Question

代码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是从上一屏幕传递的参数。我在console.log中有render()，发现它们出现的次数完全相同吗？我期望代码B使用setState吗？

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

Answer 1

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

Answer 2

检查line1 line2 line3 line4 line5 line6 line7 line8 line9 line10和this.props.navigation.getParam('dateString', moment())中render的值。

如果两个值相同，则只有在状态更改为componentDidmount()的情况下，它才会触发重新渲染，只有当组件状态发生改变时，react才重新渲染组件。

在此jsfiddle中，您可以尝试通过更改Pure和normal组件来运行代码，并看到不同之处。

Answer 3

尝试将状态B的状态放入代码B中，如下所示：

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

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

setState不会再渲染一次吗？

3 个答案: