ReactJS - 渲染是否随时被调用“setState"?叫做? [英] ReactJS - Does render get called any time "setState" is called?

问题描述

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

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

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

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

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

这是示例的代码，作为 JS Fiddle，以及嵌入的代码段:

var TimeInChild = React.createClass({渲染:函数(){var t = new Date().getTime();返回 (<p>孩子的时间:{t}</p>);}});var Main = React.createClass({onTest:函数(){this.setState({'test':'me'});},渲染:函数(){var currentTime = new Date().getTime();返回 (<div onClick={this.onTest}><p>主时间:{currentTime}</p><p>点击我更新时间</p><TimeInChild/>

);}});ReactDOM.render(

, 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 时重新渲染所有组件和子组件?

默认 - 是.

有一个方法boolean shouldComponentUpdate(object nextProps, object nextState)，每个组件都有这个方法，它负责判断组件是否应该更新(运行render函数)?"每次更改 state 或从父组件传递新的 props 时.

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

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

<块引用>

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

问题的下一部分:

<块引用>

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

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

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

2. 原生 DOM 渲染:React 仅在虚拟 DOM 中更改真实 DOM 节点时才会更改浏览器中的真实 DOM 节点，并且根据需要进行更改 - 这是 React 的出色功能，可优化真实 DOM 突变并使 React 快速.

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

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

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>

解决方案

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

By default - yes.

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.

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

Quote from official docs http://facebook.github.io/react/docs/component-specs.html#updating-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.

Next part of your question:

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 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.

2. 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屋！