React 原理

函数式编程

• 纯函数
  reducer 必须是一个纯函数，即没有副作用的函数，不修改输入值，相同的输入一定会有相同的输出
• 不可变值
  state 必须是不可变值，否则在 shouldComponentUpdate 中无法拿到更新前的值，无法做性能优化操作。

vdom 和 diff 算法

JSX 本质

• 是 React.createElement 函数
  • React.createElement(tag, props, child1, child2, child3)
  • React.createElement(tag, props, [child1, child2, child3])
• 执行生成 vnode

const elem = <div><p>aaa</p><p style={{ color: 'red' }}>bbb</p></div>;

const elem = React.createElement("div", null, React.createElement("p", null, "aaa"), React.createElement("p", { style: { color: "red" } }, "bbb")
);

const lisElem = <div>{this.state.list.map((item, index) => {return (<span key={item.id}>{item.name}</span>);})}
</div>;

const listElem = React.createElement("div", null, (void 0).state.list.map((item, index) => {return React.createElement("span", { key: item.id }, item.name);})
);

合成事件

• react 的事件不是原生事件 MouseEvent，而是合成事件 SyntheticEvent
• react16 是挂载到 document 上的；react17 开始是挂载到 root 上的
• 事件处理函数交给合成事件，事件冒泡到 document / root 上进行处理

出处：https://coding.imooc.com/lesson/419.html#mid=41943

合成事件的好处：

• 更好的兼容性和跨平台：比如 react-native
• 全部挂载到 document / root上，减少内存消耗，避免频繁解绑
• 方便事件的统一管理（事务机制）

出处：https://coding.imooc.com/lesson/419.html#mid=41943

React17 开始挂载到 root 组件上：
- document 只有一个，root 有多个，有利于多个 react 版本共存，例如：微前端

setState 和 batchUpdate

setState 主流程

出处：https://coding.imooc.com/lesson/419.html#mid=41943

• 异步：左边分支
• 非异步：右边分支

isBatchingUpdates

class ListDemo extends React.Componentconstructor(props) {// ...}render() {// ...}increase = () => {// 开始: 处于 batchUpdate// isBatchingiUpdates = true this.setState({count: this.state.count + 1});// 结束// isBatchingUpdates = false}
}

class ListDemo extends React.Componentconstructor(props) {// ...}render() {// ...}increase = () => {// 开始: 处于 batchUpdate// isBatchingUpdates = true setTimeout(() => {// 此时 isBatchingUpdates 是 falsethis.setState({count: this.state.count + 1});});// 结束// isBatchingUpdates = false}
}

componentDidMount() {// 开始: 处于 batchUpdate// isBatchingUpdates = true document.body.addEventListener('click', () => {// 此时 isBatchingUpdates 是 falsethis.setState({count: this.state.count + 1});console.log('count in body event', this.stae.count);});// 结束// isBatchingUpdates = false
}

哪些能命中 batchUpdate 机制：

• 生命周期（和它调用的函数）
• React 中注册的事件（和它调用的函数）
• React 可以“管理”的入口

transaction 事务机制

class ListDemo extends React.Componentconstructor(props) {// ...}render() {// ...}increase = () => {// 	开始：处于 batchUpdate// isBatchingUpdates = true// 其他任何操作// 结束// isBatchingUpdates = false}
}

出处：https://coding.imooc.com/lesson/419.html#mid=41943

transaction.initialize = function() {console.log('initialize');
};transaction.close = function() {console.log('close');
};function method() {console.log('abc');
}transaction.perform(method);// 输出 'initialize'
// 输出 'abc'
// 输出 'close'

react 组件渲染过程

1. JSX 如何渲染为页面：
   • 初始化时候继承 props 和 生成 state
   • 通过 render() 函数 生成 vnode
   • patch(elem, vnode)：通过 patch 函数将 vonde 更新到 dom 上
2. setState 之后如何更新页面：
   • setSate(newState) -> dirtyComponents（可能有子组件）：通过 setState 产生新的 state，存到 dirtyComponent 进行异步更新
   • 通过 render() 函数生成新的 vnode
   • patch(elem, vnode)：再通过 patch 函数用 newVnode 去更新旧的 vnode

react-fiber

react 的 patch 被拆分为两个阶段：

• reconciliation阶段：执行 diff 算法，纯 js 计算
• commit 阶段：将 diff 结果渲染成 dom

背景

• js 是单线程的，且和 dom 渲染共用一个线程
• 当组件足够复杂，组件更新时计算和渲染压力都很大
• 同时再有 dom 操作需求，比如动画、鼠标拖拽等，那么将会卡顿

解决方案：fiber

fiber

• react 内部的运行机制，开发者体会不到
• 将 reconciliation 阶段进行任务拆分（commit 无法拆分）
• dom 需要渲染时暂停，空闲时恢复
• 通过 window.requestidleCallback 进行控制（并非所有浏览器支持）

FQA

1. JSX 的本质是什么？
   • jsx 的本质是 React.createElement 函数，执行生返回 vnode。
2. react 组件更新渲染的过程。
   • 初始化时候继承 props 和 生成 state
   • 通过 render() 函数生成 vnode
   • 再通过 patch 函数将 vonde 渲染成真实 dom
   • 通过 setState 修改产生新的 state
   • 触发 re-render 生成新的 vnode
   • 再通过 patch 函数用 newVnode 去更新旧的 vnode
3. react 为什么要将 patch 过程拆分成 reconciliation 和 commit 两个阶段？
   • 因为js 是单线程的，且和 dom 渲染共用一个线程
   • 当组件很复杂的时候，组件更新时计算和渲染压力都很大
   • 同时再有 dom 操作需求，比如动画、鼠标拖拽等，那么将会卡顿