微信小程序getDerivedStateFromProps有bug，影响页面更新

[ItxiaoDz]

问题描述
在页面组件中，增加getDerivedStateFromProps声明周期函数后，在微信小程序中运行时，只会在页面初始挂载时被调用一次。同时使用redux、dva等状态管理工具，当model的状态改变后，不会触发该生命周期函数，同时页面也不会更新。

当前测试是微信小程序有问题，h5正常，其他小程序没有进行测试。

复现步骤
上传了一份示例代码：https://github.com/ItxiaoDz/taro-demo
也就是用官方cli创建的项目，创建时引入了redux。
在src/pages/index/index.tsx中加入了如下代码

static getDerivedStateFromProps(props, state) {
    console.log(props);
    return null;
  }

期望行为
点击页面中“+”，“-”，程序调用了相关action方法，model的state改变了，会触发getDerivedStateFromProps生命周期函数，然后页面同时进行更新

报错信息

截图中可以看到多次调用action方法，相关的model的state也改变了，但是页面没有变化，getDerivedStateFromProps也没被触发

系统信息

• 操作系统: macOS 10.14.2
• Taro 版本 Taro v1.3.9
• Node.js 版本 10.15.3
• 报错平台 weapp

补充信息

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[taro-bot]

CC @Chen-jj

[Chen-jj]

@ItxiaoDz https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

[ItxiaoDz]

@Chen-jj 你发的官方文档连接，我还是没搞明白为什么小程序没有触发这个方法。官方文档不是说每次render前都会触发吗？

[Chen-jj]

@ItxiaoDz 如果你有认真看我发的文档链接，就明白了。

[ItxiaoDz]

@Chen-jj 能提示一下吗？

[Chen-jj]

@ItxiaoDz 你看了吗

[Chen-jj]

@ItxiaoDz 文档白纸黑字写得很清楚了，我甚至都帮你找到对应位置的锚点了。沉下气撸一遍文档吧。

[ItxiaoDz]

看了呀。都看了4、5遍了。我菜，行了吧

[Chen-jj]

@ItxiaoDz 那你把你翻译的这段文档贴上来，我帮你找

[ItxiaoDz]

getDerivedStateFromProps is invoked right before calling the render method, both on the initial mount and on subsequent updates. It should return an object to update the state, or null to update nothing.

这里大概说的getDerivedStateFromProps在render之前执行，包括第一次挂载和以后的更新。它需要返回一个对象更新state，或者返回一个null去告诉框架不更新任何东西。
你们Taro文档对这个生命周期函数翻译的就是这段话。
这里我是有个疑问，它说返回nul，是不更新任何东西，但是是不更新state还是不更新页面，好像就有点歧义。按照测试，h5中，返回null，页面有更新，所以我觉得应该只是不更新state，而不是不更新页面。但是小程序中，连页面没更新，我后面改成：

return { ...state }
也是没有继续执行getDerivedStateFromProps，当然也就页面没有更新

[Chen-jj]

@ItxiaoDz https://taro-docs.jd.com/taro/docs/optimized-practice.html#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%95%B0%E6%8D%AE-diff

[ItxiaoDz]

我再加了一些测试代码

<Button className='dec_btn' onClick={this.localClick}>local</Button>

localClick = () => {
    this.setState({
      time2222: new Date().getTime(),
    })
  }

这样点击local按钮时，会触发getDerivedStateFromProps方法。也就只要触发了页面渲染（要执行render方法），都会执行这个生命周期函数。这样也就是说对官方文档的理解大体正确

而我是想用redux的方式，通过改变组件的props来触发页面重新渲染，reducer中返回state时，如下：

return {
        ...state,
        num: state.num + 1
      }

如果props有触发diff流程，按照你给的diff的说明文档，应该会触发10. 都为对象，新对象拥有旧对象所有的属性 => 逐项 diff、按路径更新。现在情况是reducer的state改变了（也即组件props变了），但是页面没有重新渲染，是diff没正确执行呢？还是说props改变了，却没有触发重新render？

[Chen-jj]

@ItxiaoDz 跑了你的 demo，关注点错了，在于 redux listener 没有触发，getDerivedStateFromProp 甚至还没执行。等下个版本再试试

[hnsylitao]

请问这个问题解决了么，我在mobx 里面也碰到了getDerivedStateFromProps 导致页面不刷新渲染