标签：vstat javascrip 包装 key 问题 lis 初始 commit 实现原理
React 的核心流程可以分为两个部分:
reconciliation (调度算法，也可称为 render): // 调和
更新 state 与 props；
调用生命周期钩子；
生成 virtual dom；
这里应该称为 Fiber Tree 更为符合；
通过新旧 vdom 进行 diff 算法，获取 vdom change；
确定是否需要重新渲染
commit:
如需要，则操作 dom 节点更新；
constructor ====》 初始化state componentWillMount ==== 》getDerivedStateFromProps// 当新 props 中的 data 发生变化时，同步更新到 state 上
componentDidMount ====》进行事件监听，数据的请求
componentWillUpdate === 》 getSnapshotBeforeUpdate componentDidUpdate ==== 》 当 id 发生变化时，重新获取数据 shouldComponentUpdate ====》 优化渲染的性能，return false 阻止后面的逻辑 componentWillReciveProps ==== 》少使用，使用getDerivedStateFromPropscomponentWillUnmount ====》 解绑事件
在新版本中，React 官方对生命周期有了新的 变动建议:
getDerivedStateFromProps 替换componentWillMount；getSnapshotBeforeUpdate替换componentWillUpdate；componentWillReceiveProps；其实该变动的原因，正是由于上述提到的 Fiber。首先，从上面我们知道 React 可以分成 reconciliation 与 commit 两个阶段，对应的生命周期如下:
reconciliation:
componentWillMountcomponentWillReceivePropsshouldComponentUpdatecomponentWillUpdatecommit:
componentDidMountcomponentDidUpdatecomponentWillUnmount在 Fiber 中，reconciliation 阶段进行了任务分割，涉及到 暂停 和 重启，因此可能会导致 reconciliation 中的生命周期函数在一次更新渲染循环中被 多次调用 的情况，产生一些意外错误。
新版的建议生命周期如下:
class Component extends React.Component {
// 替换 `componentWillReceiveProps` ，
// 初始化和 update 时被调用
// 静态函数，无法使用 this
static getDerivedStateFromProps(nextProps, prevState) {}
// 判断是否需要更新组件
// 可以用于组件性能优化
shouldComponentUpdate(nextProps, nextState) {}
// 组件被挂载后触发
componentDidMount() {}
// 替换 componentWillUpdate
// 可以在更新之前获取最新 dom 数据
getSnapshotBeforeUpdate() {}
// 组件更新后调用
componentDidUpdate() {}
// 组件即将销毁
componentWillUnmount() {}
// 组件已销毁
componentDidUnMount() {}
}
使用建议:
constructor初始化 state；componentDidMount中进行事件监听，并在componentWillUnmount中解绑事件；componentDidMount中进行数据的请求，而不是在componentWillMount；getDerivedStateFromProps(nextProps, prevState)；
public static getDerivedStateFromProps(nextProps, prevState) {
// 当新 props 中的 data 发生变化时，同步更新到 state 上
if (nextProps.data !== prevState.data) {
return {
data: nextProps.data
}
} else {
return null1
}
}
componentDidUpdate监听 props 或者 state 的变化，例如:componentDidUpdate(prevProps) {
// 当 id 发生变化时，重新获取数据
if (this.props.id !== prevProps.id) {
this.fetchData(this.props.id);
}
}
componentDidUpdate使用setState时，必须加条件，否则将进入死循环；getSnapshotBeforeUpdate(prevProps, prevState)可以在更新之前获取最新的渲染数据，它的调用是在 render 之后， update 之前；shouldComponentUpdate: 默认每次调用setState，一定会最终走到 diff 阶段，但可以通过shouldComponentUpdate的生命钩子返回false来直接阻止后面的逻辑执行，通常是用于做条件渲染，优化渲染的性能。（1）Virtual DOM是对DOM的抽象,本质上是JavaScript对象,这个对象就是更加轻量级的对DOM的描述.
（2）两个内容的差异，进行dom的对比，事件属性方法，耗性能，dom对象转换为js对象，比较会快。有效提升性能。
（3）首先,我们都知道在前端性能优化的一个秘诀就是尽可能少地操作DOM,不仅仅是DOM相对较慢,更因为频繁变动DOM会造成浏览器的回流或者重回,这些都是性能的杀手,因此我们需要这一层抽象,在patch过程中尽可能地一次性将差异更新到DOM中,这样保证了DOM不会出现性能很差的情况.
（4）更好的跨平台,比如Node.js就没有DOM,如果想实现SSR(服务端渲染),那么一个方式就是借助Virtual DOM,因为Virtual DOM本身是JavaScript对象.
（1）diff的目的就是比较新旧Virtual DOM Tree找出差异并更新.
（2）一层节点发现有问题，不再往下比，直接放弃，n的平方降低为n
（1）如果key值相同，dom直接复用，不用再创建dom，直接这两个比，不用循环比
（2）用新指针对应节点的key去旧数组寻找对应的节点,这里分三种情况,
当没有对应的key，那么创建新的节点,
如果有key并且是相同的节点，把新节点patch到旧节点,
如果有key但是不是相同的节点，则创建新节点
接收一些函数，返回函数，组件进行包装，返回一个新的组件，很多地方都要用，有一点区别，共用的东西写在高阶组件中，通过传递额外参数，动态改变组件不同场景下使用的差异。
action--store-reducer-props action和store之间，沟通的桥梁dispatch,改装dispatch，
store.dispatch,直接把action（对象）传递给store，使用中间件，action可以是函数，可以将函数转换为对象，传递给store。
调和的过程。setState一般怎么用，传递什么进去，对象还是方法。
this.setState({
name: ‘小李‘
});
this.setState(() =>({
name:‘小李‘
}));
永远用函数调用，会避免一些坑。
this.setState({
age: this.state.age+1
});
setState异步，疯狂点击按钮，age不是每次加1，会一次加5,6个，state异步，会进行累加
<input refs="input" value={this.state.age} /> ====1
this.setState((prevState) =>{
age: ++ prevState
});
this.refs.input.value ==== 1
this.setState((prevState) =>{
age: ++ prevState
}, () => {
this.refs.input.value // 异步执行完state之后执行
});
方便react在销毁组件重新渲染，有效清空ref引用中的东西，防止内存泄漏
操作dom（滚动条，点击按钮，滚动条滚动到上面）
图片展示获取图片的宽和高，
标签：vstat javascrip 包装 key 问题 lis 初始 commit 实现原理
原文地址：https://www.cnblogs.com/jcxfighting/p/11681992.html
