Question

一旦调用state，React组件会对其this.setState()进行一些检查，以查看state是否已更改。因此，在componentDidMount被调用之后，将不会再次出现协调阶段，如下面的代码所示：

// in constructor
this.state = {width: 0}
...
// in componentDidMount method
this.setState(() => ({ width: 0 }))

或者我需要手动执行这些检查，例如：

const width = getViewportWidth()
if (this.state.width !== width) {
  this.setState(() => ({
    width
  }))

Answer 1

默认情况下，只要组件通过props或state，React就会重新渲染。

您可以在shouldComponentUpdate中进行一些检查，然后决定是否重新渲染。

来自docs：

使用shouldComponentUpdate（）让React知道组件的输出是否不受当前状态或道具更改的影响。默认   行为是重新渲染每一个状态变化，并在广阔的   大多数情况下你应该依赖默认行为。

在收到新的道具或州时，在渲染之前调用shouldComponentUpdate（）。默认为true。不调用此方法   用于初始渲染或使用forceUpdate（）时。

目前，如果shouldComponentUpdate（）返回false，那么componentWillUpdate（），render（）和componentDidUpdate（）将不会   调用

返回false并不会阻止子组件在状态发生变化时重新呈现。

TLDR; 在shouldComponentUpdate中返回false将阻止重新呈现，除非状态实际发生更改。

Answer 2

setState不会比较之前和当前的状态值，只是设置它并再次进行协调。

模拟此行为的

CodeSandbox

您可以做什么来实施shouldComponentUpdate方法

使用shouldComponentUpdate（）让React知道组件的输出   不受当前状态或道具变化的影响。默认   行为是重新渲染每一个状态变化，并在广阔的   大多数情况下你应该依赖默认行为。

在渲染新道具或者之前调用shouldComponentUpdate（）   国家正在接受。默认为true。不调用此方法   用于初始渲染或使用forceUpdate（）时。

返回false不会阻止子组件重新呈现   当他们的状态发生变化时。

你要做的是

shouldComponentUpdate(nextProps, nextState) {
     if(this.state.width === nextState.width) {
          return false
     }
     return true;
}

Answer 3

无论何时调用setstate方法，组件都会更新并呈现视图

如果新提供的值相同，React会触发状态更新吗？

3 个答案: