每次调用 setState 时，React 是否会重新渲染所有组件和子组件？

默认情况下 - 是的。

有一个方法boolean shouldComponentUpdate(object nextProps, object nextState)，每个组件都有这个方法，它负责确定“组件是否应该更新（运行渲染函数）？” 每次更改状态或从父组件传递新props时。

您可以为组件编写自己的shouldComponentUpdate方法实现，但默认实现始终返回 true - 意味着始终重新运行渲染函数。

引用官方文档http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate

默认情况下，shouldComponentUpdate 总是返回 true 以防止在状态发生变化时出现细微的错误，但是如果您小心地始终将状态视为不可变的并且在 render() 中从 props 和 state 中只读，那么您可以使用一个将旧的 props 和 state 与其替换进行比较的实现。

你问题的下一部分：

如果是这样，为什么？我认为这个想法是 React 只在需要的时候渲染——当状态改变时。

我们可以称之为“渲染”有两个步骤：

1. 虚拟 DOM 渲染：当调用render方法时，它会返回组件的新虚拟 dom结构。正如我之前提到的，当你调用setState()时总是会调用这个渲染方法，因为默认情况下shouldComponentUpdate总是返回 true。因此，默认情况下，React 中没有优化。

2. 原生 DOM 渲染：React 仅在虚拟 DOM 中更改真实 DOM 节点时才会更改浏览器中的真实 DOM 节点，并且根据需要尽可能少地更改 - 这是 React 的强大功能，它优化了真实 DOM 突变并使 React 快速。

不，React 不会在状态改变时渲染所有内容。

• 每当组件变脏（其状态发生变化）时，该组件及其子组件都会重新渲染。这在某种程度上是尽可能少地重新渲染。唯一不调用渲染的时间是将某个分支移动到另一个根时，理论上我们不需要重新渲染任何东西。在您的示例中，TimeInChild是 的子组件Main，因此当状态Main更改时它也会重新呈现。

• React 不比较状态数据。当setState被调用时，它将组件标记为脏（这意味着它需要重新渲染）。需要注意的重要一点是，虽然render调用了组件的方法，但只有当输出与当前 DOM 树不同（也就是虚拟 DOM 树和文档的 DOM 树之间的差异）时，才会更新真正的 DOM。在您的示例中，即使state数据没有更改，上次更改的时间也发生了变化，这使得虚拟 DOM 与文档的 DOM 不同，因此更新 HTML 的原因。

即使在这里的许多其他答案中都有说明，该组件也应该：

• 实现shouldComponentUpdate仅在状态或属性更改时呈现

• 切换到扩展PureComponent，它已经在shouldComponentUpdate内部实现了一个用于浅层比较的方法。

这是一个使用 的示例shouldComponentUpdate，它仅适用于这个简单的用例和演示目的。使用此选项时，组件不再在每次单击时重新渲染自身，并在首次显示和单击一次后渲染。

var TimeInChild = React.createClass({
    render: function() {
        var t = new Date().getTime();

        return (
            <p>Time in child:{t}</p>
        );
    }
});

var Main = React.createClass({
    onTest: function() {
        this.setState({'test':'me'});
    },

    shouldComponentUpdate: function(nextProps, nextState) {
      if (this.state == null)
        return true;
  
      if (this.state.test == nextState.test)
        return false;
        
      return true;
  },

    render: function() {
        var currentTime = new Date().getTime();

        return (
            <div onClick={this.onTest}>
            <p>Time in main:{currentTime}</p>
            <p>Click me to update time</p>
            <TimeInChild/>
            </div>
        );
    }
});

ReactDOM.render(<Main/>, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>

是的。它只在render()我们每次调用时调用该方法，setState除非shouldComponentUpdate返回false。

使用 React 钩子时，似乎已接受的答案不再是这种情况（使用原始值，有关详细信息，请参阅对此答案的评论）。你可以在这个代码沙箱中看到，当状态设置为相同的值时，类组件会被重新渲染，而在函数组件中，将状态设置为相同的值不会导致重新渲染。

https://codesandbox.io/s/still-wave-wouk2?file=/src/App.js