React | 青训营笔记

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

React的历史与应用

应用

前端应用开发，如 Facebook，Instagram，Netflix网页版。 移动原生应用开发，如Instagram，Discord，Oculus。 结合Electron，进行桌面应用开发。 历史

2010年 Facebook 在其php生态中，引入了xhp框架，首次引入了组合式组件的思想，启发了后来的React的设计。 2011年Jordan Walke创造了FaxJS，也就是后来的React原型: 既可以在客户端渲染也可以在服务端渲染 响应式，当状态变更时，UI会自动更新。 性能好，快速渲染 高度封装组件，函数式声明， 2013年React 正式开源，在2013 JSConf 上 Jordan Walke介绍了这款全新的框架：React 2014年 - 今天 生态大爆发，各种围绕React的新工具/新框架开始涌现

React设计思路

UI编程痛点

当状态更新时，UI不会自动更新，需要手动地调用DOM进行更新。 欠缺基本的代码层面的封装和隔离，代码层面没有组件化。 UI之间的数据依赖关系，需要手动维护，如果依赖链路长．则会遇到“Callback Hell”（回调地狱）。 响应式与转换式

转换式系统：给定输入求解输出，如编译器、数值计算

响应式系统：监听事件，消息驱动，如监控系统、UI界面

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

响应式编程和组件化

那么我们就希望解决以上痛点：

状态更新，UI自动更新。 前端代码组件化,可复用，可封装。 状态之间的互相依赖关系，只需声明即可。 组件化

组件一个是 原子组件/或组件的组合 组件内部拥有状态，外部不可见 父组件可将状态传入组件内部，来控制子组件的运转。 状态归属问题

当前价格 属于Root结点！因为要向下传递，这其实不合理，在下面的状态管理库里会讲到这个的解决方法。

状态应该归属于两个节点（或多个）向上寻找到的最近共同祖先。

思考：

React是单向数据流,还是双向数据流? 答：单向的，永远是只有父组件给子组件传东西，但这并不代表子组件不能改变父组件的状态。

如何解决状态不合理上升的问题? 答：通过状态管理库，接下来也会讲到。

组件的状态改变后，如何更新DOM? 答：讲解React实现中会提到。

组件设计：

组件声明了状态和UI的映射 组件有Props（外部）/State（内部）两种属性 Props接受父组件传入的状态 State是内部的属性。 可被其他组件组成 ps：学过小程序的同学应该知道，小程序中的属性的双向绑定实际上应该也有用到了这个思想。 生命周期

挂载 -> 状态更新 -> 卸载

STATE HOOK

import React, {useState} from 'react';
function Example() {
	// 声明一个叫 “count” 的 state 变量。
	const [count, setCount] = useState(0);
    return (
        <div>
       		<p>You clicked {count} times</p>
			<button onClick={() => setCount(count + 1)}>
        		Click me
            </button>
        </div>
    );
}