state更新不生效之——派生状态

原因

一个派生 state 值[num]也被 setState 方法更新时，这个值就不是一个单一来源的值了。

误解

getDerivedStateFromProps 和 componentWillReceiveProps 只会在 props “改变”时才会调用。实际上只要父级重新渲染时，这两个生命周期函数就会重新调用，不管 props 有没有“变化”。

在这两个方法内直接复制props 到 state 是不安全的。这样做会导致 state 后没有正确渲染。

demo 示例

• 如下代码，可以自己本地跑一遍，无论怎么点击按钮，数字一直是1，setState并未生效

  
    class Children extends React.Component  {
   
    	constructor(props) {
   
		    super(props)
		    this.state = {
   
		      num: props.num
		    }
		}
		handleClick = () => {
   
        	this.</