Question

假设我有一个当前状态为 {random: 1} 的 React 组件。如果我打电话

this.setState({random: 1})

它会触发重新渲染吗？如果是这样，有什么办法可以在调用 setState 时阻止重新渲染，但状态不会像这样改变吗？

Answer 1

是的，它会重新渲染：

class App extends React.Component {
  state = { random: 1 };
  render() {
    console.log('rerendering');
    return (
      <button onClick={() => this.setState({random: 1})}>
        click
      </button>
    );
  }
};

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

如果 shouldComponentUpdate 值相同，您可以添加一个 random 方法来告诉 React 不要重新渲染：

class App extends React.Component {
  state = { random: 1 };
  render() {
    console.log('rerendering');
    return (
      <button onClick={() => this.setState({random: 1})}>
        click
      </button>
    );
  }
  shouldComponentUpdate(nextProps, nextState) {
    return nextState.random !== this.state.random;
  }
};

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

Artem 指出，另一种选择（可能更好！）是改用 PureComponent。来自the docs：

<块引用>

React.PureComponent 类似于 React.Component。它们之间的区别在于 React.Component 没有实现 shouldComponentUpdate()，而是 React.PureComponent 通过浅层的 prop 和 state 比较实现了。

<块引用>

如果你的 React 组件的 render() 函数在给定相同的 props 和 state 的情况下呈现相同的结果，你可以在某些情况下使用 React.PureComponent 来提升性能。

Answer 2

在函数式组件中，我们可以使用 react hooks 方式：

React.memo(function MyComponent (props) {
    return <>{ "My Component " + props.val}</>;
})

在上面的代码中，只有在改变 props 时才会重新渲染组件。

如果我使用 setState 但状态值保持不变，React 会重新渲染吗？

2 个答案: