React学习笔记 | 青训营

这是我参与「第五届青训营」伴学笔记创作活动的第 6 天

本节课学习前提

HTML,JS,CSS基础
数据结构和算法知识
有Web API的使用经验，熟悉Dom

前端应用开发如：Facebook
移动原生应用开发如：Instagram
桌面应用开发：结合Electron


2010 年 facebook 在php生态种，引入xhp框架，引入了组合式组件的思想，启发了React的设计
2011 年 Jordan Walke 创造了FaxJS, 也就是后来的React原型(客户端和服务端渲染，响应式(状态变更，UI也变更)，好性能，结构化(高度组件化，函数定义，声明式视图))
2012 年 Facebook 收购Instagram，FaxJS被使用到项目中。Jordan Walke基于FaxJS的经验创造了React
2013 年 React 正式开源。
2014 年 React 生态爆发，各种新工具/新框架涌现

转换式系统：
给定输入解出输出
就像一种编译器的数值计算

响应式系统：
通过监听事件和对事件做出响应的系统
通过监控系统，然后改变UI界面的表现形式

响应式系统中，一般情况：
事件发生---->执行回调---->状态变更

注意：转换式系统不等于响应式系统

事件------>执行回调------>状态变更------->UI更新

React需要：
状态更新时，UI也自动更新
前端代码组件化，复用组件和封装组件
状态之间的互相依赖关系，只需声明就能使用

就像是转化式那样，a = b + c 的形式，当b或者c改变的时候，a也会自动更新

能够将页面抽象成类似一棵树的形式。

组件时组件与组件的组合(类似于函数嵌套)
组件内拥有状态，外部不可见(类似于函数中的临时变量，能够表现却不能修改)
父组件可将状态传入组件内部（类似接口的形式，像函数中通过形参传递信息）

当有个状态需要跨越不同的组件(父与子组件)共享的时候，遵循从上往下传导状态，所以应该放在他们共同的父组件root中。

可以这样理解：
类似于C++编程中函数编程的函数内部参数和全局参数。当有函数需要共用一个变量的时候，
使用全局变量比使用局部变量更好，使用局部变量会使得代码变得丑陋和难以维护。

React 是单向数据流，还是双向数据流？
单向，父组件给子组件传递。
父组件传递函数到子组件，子组件通过函数改变父组件的状态。

组件声明了状态和 UI 的映射。
组件有 Props/State 两种状态。
“组件”可由其他组件拼装而成。

1.JSX不符合JS标准
2. 返回的JSX改变的时候如何更新dom
更新时改变div，搜索diff的速度也要快。
当一个父组件发生更新的时候，将其和其的子组件抽象成一颗virtual dom tree。
与原来的dom对比出diff，最后更新更新Re-render Virtual DOM.

完美的最小diff算法，要 $O(n^3)$ 的复杂度
牺牲理论最小diff，换取事件，得到 $O(n)$ 复杂度
Heuristic O(n) 算法一种启发式算法

3.State/Props更新的时候，要重新触发render

使用一个store 存储状态。但是会增加耦合性。
将状态抽离到UI框架的外部进行管理

推荐使用的状态库

当前状态收到外部事件刺刺激转移到下一个状态。

NEXT.JS
网页刷新快

MODERN.JS
字节开发的全栈开发框架，开箱即用。

Blitz
无API思想的全栈开发，无需写api调用与CRUD逻辑。适合前后端紧密结合的小团队项目。

这节课简要介绍了React的历史以及设计。对于不了解React的初学者和前端小白来说，或许过于抽象，所以，课后还需要花时间去学习React的相关知识，重新梳理本节课所学的内容。

引用参考：
React 的历史与应用 - 掘金 (juejin.cn)
React 的设计思路 - 掘金 (juejin.cn)
React （hooks）的写法与 React 实现 - 掘金 (juejin.cn)
React 状态管理库与应用级框架科普 - 掘金 (juejin.cn)