ReactJS - 是否会在任何时候调用渲染“setState"?叫做? [英] ReactJS - Does render get called any time "setState" is called?

问题描述

React 是否在每次调用 setState() 时重新渲染所有组件和子组件?

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 处理程序总是将 state 设置为相同的值:

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'});

我原以为只有在 state 数据发生变化时才会进行渲染.

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

这是示例的代码，as a JS Fiddle，以及嵌入的代码片段:

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>

推荐答案

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

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

默认情况下 - 是的.

By default - yes.

有一个方法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.

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

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

By default, shouldComponentUpdate always returns true to prevent subtle bugs when the state is mutated in place, but if you are careful to always treat the state as immutable and to read-only from props and state in render() then you can override shouldComponentUpdate with an implementation that compares the old props and state to their replacements.

你问题的下一部分:

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

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

我们可以称之为渲染"的有两个步骤:

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

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

1. Virtual DOM renders: 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.

Native DOM 渲染:React 仅在虚拟 DOM 中更改真实 DOM 节点时才会更改浏览器中的真实 DOM 节点，并且只需根据需要进行更改 - 这是 React 的一项很棒的功能，它优化了真实 DOM 突变并使 React 变得更快.

Native DOM renders: 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 - 是否会在任何时候调用渲染“setState"?叫做?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！