React16版本新增生命周期getDerivedStateFromProps替代componentWillReceiveProps的原因

朱雀 2022-09-06 14:21 196阅读 0赞

一直使用componentWillReceiveProps来进行当props发生变化时更新state，重新渲染。但是使用react16.3及以上版本时，提示componentWillReceiveProps将在17版本时被废弃。可以使用getDerivedStateFromProps来进行替代。于是研究了一下如何用getDerivedStateFromProps替代componentWillReceiveProps。

1 含义  
getDerivedStateFromProps生命周期的意思就是从props中获取state，其功能实际上就是将传入的props映射到state上面。

这个函数会在每次re-rendering之前被调用，意味着即使你的props没有任何变化，而是父state发生了变化，导致子组件发生了re-render，这个生命周期函数依然会被调用。

2 使用对比  
基本使用  
使用componentWillReceiveProps时：

componentWillReceiveProps(nextProps)\{  
        let t\_aTC\_param = nextProps.articleList;  
        this.setState(\{ s\_aI4\_tag\_id: t\_aTC\_param.tag\_id, s\_str\_tag\_name: t\_aTC\_param.tag\_name \}) //更新state  
    \}  
1  
2  
3  
4  
而getDerivedStateFromProps是一个静态函数，也就是这个函数不能通过this访问到class的属性，也并不推荐直接访问属性。而是应该通过参数提供的nextProps以及prevState来进行判断，根据新传入的props来映射到state。

需要注意的是，如果props传入的内容不需要影响到你的state，那么就需要返回一个null，这个返回值是必须的，所以尽量将其写到函数的末尾。

static getDerivedStateFromProps(nextProps, prevState) \{  
        const \{ tag\_id,tag\_name \} = nextProps.articleList;  
        if(tag\_id !== prevState.s\_aI4\_tag\_id)\{ //传入的props与state不同  
            return \{s\_aI4\_tag\_id:tag\_id,s\_str\_tag\_name:tag\_name\} //将传入的props映射到state上  
        \}  
        return null  
    \}  
1  
2  
3  
4  
5  
6  
7  
componentWillReceiveProps的写法并不存在什么功能上的问题，将componentWillReceiveProps标记为deprecated的原因也并不是因为功能问题，而是性能问题。

当外部多个属性在很短的时间间隔之内多次变化，就会导致componentWillReceiveProps被多次调用。这个调用并不会被合并，如果这次内容都会触发异步请求，那么可能会导致多个异步请求阻塞。

而setState操作是会通过transaction进行合并的，由此导致的更新过程是批量的，而react中大部分的更新过程的触发源都是setState，所以render触发的频率并不会非常频繁

因此在使用getDerivedStateFromProps的时候，遇到了上面说的props在很短的时间内多次变化，也只会触发一次render，也就是只触发一次getDerivedStateFromProps，从而提高了性能。

异步  
以前，可以在props发生改变的时候，在componentWillReceiveProps中进行异步操作，将props的改变驱动到state的改变。

componentWillReceiveProps(nextProps)\{  
        let t\_aTC\_param = nextProps.articleList;  
        this.setState(\{ s\_aI4\_tag\_id: t\_aTC\_param.tag\_id, s\_str\_tag\_name: t\_aTC\_param.tag\_name \}) //更新state  
        this.query(t\_aTC\_param.pageIndex, t\_aTC\_param.tag\_id); //根据新的props内容，进行异步数据查询  
    \}  
1  
2  
3  
4  
5  
那么，如何使用getDerivedStateFromProps进行异步的处理呢？

static getDerivedStateFromProps(nextProps, prevState) \{  
        const \{ tag\_id,tag\_name \} = nextProps.articleList;  
        if(tag\_id !== prevState.s\_aI4\_tag\_id)\{  
            return \{s\_aI4\_tag\_id:tag\_id,s\_str\_tag\_name:tag\_name\}  
        \}  
        return null  
    \}  
    // 在componentDidUpdate中进行异步操作，驱动数据的变化  
    componentDidUpdate(prevProps,prevState)\{    
        if(prevState.s\_aI4\_tag\_id !== this.state.s\_aI4\_tag\_id)\{ //前一个state与新的state不符，触发异步更新  
            //异步刷新数据  
            this.query(1, this.state.s\_aI4\_tag\_id); //异步更新数据  
        \}  
    \}  
1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
3 建议  
根据官网建议，getDerivedStateFromProps （以及其他派生 state）是一个高级复杂的功能，应该保守使用。  
设计组件时参考以下建议方案：

完全可控的组件  
从组件里删除 state

function EmailInput(props) \{  
  return <input onChange=\{props.onChange\} value=\{props.email\} />;  
\}  
1  
2  
3  
有 key 的非可控组件  
class EmailInput extends Component \{  
  state = \{ email: this.props.defaultEmail \};

handleChange = event => \{  
    this.setState(\{ email: event.target.value \});  
  \};

render() \{  
    return <input onChange=\{this.handleChange\} value=\{this.state.email\} />;  
  \}  
\}  
1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
父组件：

<EmailInput  
  defaultEmail=\{this.props.user.email\}  
  key=\{this.props.user.id\}  
/>  
1  
2  
3  
4  
可以使用 key 这个特殊的 React 属性。当 key 变化时， React 会创建一个新的而不是更新一个既有的组件，每次 ID 更改，都会重新创建 EmailInput ，并将其状态重置为最新的 defaultEmail 值  
————————————————  
版权声明：本文为CSDN博主「yaomj1986」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。  
原文链接：https://blog.csdn.net/y523006369/article/details/103630145