ReactJS - 任何时候都会调用render“setState”叫做？

问题描述

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

Does React re-render all components and sub components every time setState is called?

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

If so, why? I thought the idea was that React only rendered as little as needed - when state changed.

在下面的简单示例中，两个类在单击文本时再次呈现，尽管状态在后续单击时不会更改，因为onClick处理程序始终将州设置为相同的值：

In the following simple example, both classes render again when the text is clicked, despite the fact that the state doesn't change on subsequent clicks, as the onClick handler always sets the state to the same value:

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

我原本预计只有在州数据已更改。

I would've expected that renders would only happen if state data had changed.

以下是示例的代码，和嵌入式代码段：

Here's the code of the example, as a JS Fiddle, and embedded snippet:

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/




推荐答案

默认情况下 - 是。

有一个方法 boolean shouldComponentUpdate（object nextProps，object nextState），每个组件都有这个方法，它负责确定应该组件更新（运行 render 功能）？每次从父组件更改 state 或传递新的 props 时。

There is a method boolean shouldComponentUpdate(object nextProps, object nextState), each component has this method and it's responsible to determine "should component update (run render function)?" every time you change state or pass new props from parent component.

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

You can write your own implementation of shouldComponentUpdate method for your component, but default implementation always returns true - meaning always re-run render function.

来自官方文档的引用

N你的问题的部分内容：

Next part of your question:

我们称之为渲染的步骤有两个步骤：

There are two steps of what we may call "render":

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

1. Virtual DOM render: when render method is called it returns a new virtual dom structure of the component. As I mentioned before, this render method is called always when you call setState(), because shouldComponentUpdate always returns true by default. So, by default, there is no optimization here in React.

原生DOM渲染：只有在更改后，React才会更改浏览器中的真实DOM节点虚拟DOM和尽可能少 - 这是React的优秀功能，它可以优化真正的DOM突变并使React更快。

Native DOM render: React changes real DOM nodes in your browser only if they were changed in the Virtual DOM and as little as needed - this is that great React's feature which optimizes real DOM mutation and makes React fast.

这篇关于ReactJS - 任何时候都会调用render“setState”叫做？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！