setState 不会额外呈现一次

Question

Code A：

componentDidMount(){
  this.dateString = this.props.navigation.getParam('dateString', moment());
}

代码 B：

state = { dateString: moment() }
componentDidMount(){
  const dateString = this.props.navigation.getParam('dateString', moment());
  this.setState({ dateString })
}

dateString是从上一个屏幕传递的参数。我在render() console.log，发现它们看起来完全相同的次数？我期待代码 B 额外渲染一次，因为它使用 setState ？

以上哪种方式是更好的方法？

Answer 1

不确定在您的特定情况下是否是这种情况，但是：React 可能会将多个 setState 调用批处理在一起。因此，即使您有多个异步 setState 调用，也可能只有一个（重新）渲染。所以你不应该依赖调用次数来渲染

Answer 2

检查 this.props.navigation.getParam('dateString', moment()) 的值在 render 和 componentDidmount() 中。

如果两个值相同，则不会触发重新渲染，因为只有当您将其设置为PureComponent时，反应才会重新渲染组件。

在此jsfiddle中，您可以尝试通过更改Pure和Normal组件来运行代码，并可以看到差异。

Answer 3

尝试在代码 B 中放入 constructor（） 方法中的状态，如下所示：

constructor(){
    super();
    this.state = { dateString: moment() }
}

我

通常不习惯将状态浮动放在类中，我总是将他放在构造函数中。