react中key的作用

react中key的作用

浅谈React 虚拟DOM，Diff算法与Key机制

React生命周期

React生命周期图示

React15

constructor() // 构造函数

componentWillReceiveProps() // 父组件状态属性更新触发

shouldComponentUpdate() // 组件更新时调用，在此可拦截更新

componentWillMount() // 初始化渲染时调用（挂载前调用）

componentWillUpdate() // 组件更新时调用

componentDidUpdate() // 组件更新后调用

componentDidMount() // 初始化渲染时调用（挂载后调用）

render() // 生成组件虚拟Dom

componentWillUnmount() // 组件卸载时调用

React16

constructor() // 构造函数

getDerivedStateFromProps() // 组件初始化和更新时调用

shouldComponentUpdate() // 组件更新时调用，在此可拦截更新

render() // 生成虚拟Dom

getSnapshotBeforeUpdate() // 组件更新时调用

componentDidMount() // 组件初始化时调用（挂载后调用）

componentDidUpdate(prevProps, prevState) // 组件更新后调用

componentWillUnmount() // 组件卸载时调用

static getDerivedStateFromProps(nextProps, prevState)

静态方法(纯函数)

执行时机：组件创建和更新阶段，不论是props变化还是state变化，都会调用

在每次render方法前调用，第一个参数为即将更新的props，第二个参数为上一个状态的state，比较props 和 state来加一些限制条件，防止无用的state更新

该方法返回一个新对象作为新的state或者返回null表示state状态不需要更新

getDerivedStateFromProps() contains the following legacy lifecycles:

componentWillMount

componentWillReceiveProps

componentWillUpdate

React 16.4后对getDerivedStateFromProps做了微调。在>=16.4以后的版本中，组件任何的更新流程都会触发getDerivedStateFromProps，而在16.4以前，只有父组件的更新会触发该生命周期

getSnapshotBeforeUpdate(prevProps, prevState)

该周期函数在render后执行，执行之时DOM元素还没有被更新

该方法返回一个Snapshot值，作为componentDidUpdate第三个参数传入

getSnapshotBeforeUpdate(prevProps, prevState) {

console.log('#enter getSnapshotBeforeUpdate');

return 'foo';

}

componentDidUpdate(prevProps, prevState, snapshot) {

console.log('#enter componentDidUpdate snapshot = ', snapshot);

}

目的在于获取组件更新前的信息，比如组件的滚动位置之类的，在组件更新后可以根据这些信息恢复UI视觉上的状态

componentDidMount

组件挂载到ADOM节点后执行，在render之后执行，执行一些数据获取，事件监听等操作

shouldComponentDidMount