ReactJS-每次调用“ setState”时都会调用渲染吗？

  • Z时代
  • 2024-01-10
  • 分类：问答

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

如果是这样，为什么？我以为这个想法是，当状态改变时，React只渲染所需的内容。

在下面的简单示例中，尽管onClick处理程序始终将设置state为相同的值，但是在随后的单击中状态不会改变，这两个类在单击文本时都再次呈现。

this.setState({'test':'me'});

我曾希望只有在state数据更改的情况下才会进行渲染。

这是示例代码，例如JS Fiddle和嵌入式代码段：

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'});
    },
    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>
[1]: http://jsfiddle.net/fp2tncmb/2/

回答：

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

默认情况下-是。

有一个方法

，每个组件都有此方法，它负责确定“组件应该更新（运行 渲染 功能）吗？”。每次更改 状态 或从父组件传递新的 道具时 。

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

默认情况下，在状态发生适当变化时，shouldComponentUpdate始终返回true以防止细微的错误，但是如果您始终将状态视为不可变并在render（）中对props和state进行只读处理，则可以使用比较旧道具和状态及其替换的实现。

问题的下一部分：

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

我们可以将“渲染”分为两个步骤：

  1. 虚拟DOM渲染：调用 render 方法时，它将返回组件的新 虚拟dom 结构。如前所述，此 渲染 方法总是在调用 setState（） 时调用，因为默认情况下 shouldComponentUpdate 始终返回true。因此，默认情况下，React中没有优化。

  2. 原生DOM渲染：只有在虚拟DOM中更改了真实DOM节点后，React才更改浏览器中的真实DOM节点，并且需要的次数很少-这就是React的强大功能，它可以优化真实的DOM变异并使React更快。

以上是 ReactJS-每次调用“ setState”时都会调用渲染吗？ 的全部内容， 来源链接： utcz.com/qa/429366.html

回到顶部