本文主要是介绍react 生命周期 之getDerivedStateFromProps,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
参考:https://www.jianshu.com/p/50fe3fb9f7c3
getDerivedStateFromProps
React生命周期的命名一直都是非常语义化的,这个生命周期的意思就是从props中获取state,可以说是太简单易懂了。
可以说,这个生命周期的功能实际上就是将传入的props映射到state上面。
由于16.4的修改,这个函数会在每次re-rendering之前被调用,这意味着什么呢?
意味着即使你的props没有任何变化,而是父state发生了变化,导致子组件发生了re-render,这个生命周期函数依然会被调用。看似一个非常小的修改,却可能会导致很多隐含的问题。
使用
这个生命周期函数是为了替代componentWillReceiveProps存在的,所以在你需要使用componentWillReceiveProps的时候,就可以考虑使用getDerivedStateFromProps来进行替代了。
两者的参数是不相同的,而getDerivedStateFromProps是一个静态函数,也就是这个函数不能通过this访问到class的属性,也并不推荐直接访问属性。而是应该通过参数提供的nextProps以及prevState来进行判断,根据新传入的props来映射到state。
需要注意的是,如果props传入的内容不需要影响到你的state,那么就需要返回一个null,这个返回值是必须的,所以尽量将其写到函数的末尾。
static getDerivedStateFromProps(nextProps, prevState) {const {type} = nextProps;// 当传入的type发生变化的时候,更新stateif (type !== prevState.type) {return {type,};}// 否则,对于state不进行任何操作return null;
}
作者:老鼠AI大米_Java全栈
链接:https://www.jianshu.com/p/50fe3fb9f7c3
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
组件实例化之后接收到一个新属性(props)时调用该函数,该函数返回一个对象来更新状态(state),修改state时一般不会触发该函数,父组件重新渲染该函数一定会被调用
getDerivedStateFromProps 是新的生命周期,暂时不怎么用,可能17以后会比较有用
这篇关于react 生命周期 之getDerivedStateFromProps的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!