React学习20220312 生命周期

React学习20220312

CreateElement函数拆解

生命周期

React16

挂载过程

getDerivedFromProps的功能：使用props来派生/更新state

• 是针对某个属性的定向更新

更新过程

getSnapshotBeforeUpdate:

React16引入的Fiber架构

之前组件更新：树状递归更新，同步更新，占用主线程，易卡死

Fiber会把大任务转为小任务，使得渲染线程可打断

重要特征

可以被打断的异步渲染模式

react将渲染过程分为render和commit两个过程

render可被打断

commit同步执行

因为commit会改视图，因此不可打断

数据的流动

基于props的单向数据流：

当前组件的state以props的形式流动时，只能流向组件树中比自己层级更低的组件

父子组件通信

父组件把this.props传入子组件

子父组件通信

父组件向子组件传递一个绑定了自身上下文的函数

子组件在调用该函数时，

就可以把想要交给父组件的数据以函数入参的形式传入