javascript - ReactJS - 在调用“setState”的任何时候都会调用render吗?

每次调用setState时,react是否重新呈现所有组件和子组件?
如果是,为什么?我认为这种想法是,当状态发生变化时,反应只会在需要时变小。
在下面的简单示例中,两个类在单击文本时都会再次呈现,尽管在随后的单击中状态没有改变,因为onclick处理程序总是将state设置为相同的值:

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

我本以为只有当state数据发生变化时,渲染才会发生。
下面是示例代码、as a 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是否重新呈现所有组件和子组件?
默认情况下-是。
有一个方法boolean should component update(object nextrops,object nextstate),每个组件都有这个方法,它负责确定“应该更新组件(运行render函数)”。每次更改状态或从父组件传递新属性时。
可以为组件编写自己的shouldComponentUpdate方法实现,但默认实现始终返回true,这意味着始终重新运行呈现函数。
引自官方文件http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate
默认情况下,shouldComponentUpdate始终返回true以防止
当状态在适当的位置发生变化时,细微的错误,但是如果你小心的话
始终将状态视为不可变,并且只从属性和状态中读取
在render()中,可以使用
将旧的属性和状态与它们的
替换。
问题的下一部分:
如果是,为什么?我认为这种想法是,当状态发生变化时,反应只会在需要时变小。
我们称之为“渲染”有两个步骤:
虚dom render:调用render方法时,它返回组件的一个新的虚dom结构。如前所述,调用setState()时始终调用此呈现方法,因为默认情况下ShouldComponentUpdate始终返回true。因此,在默认情况下,react中没有优化。
原生dom呈现:只有在虚拟dom中更改了真实的dom节点,并且只在需要时更改了少量节点,react才会更改浏览器中的真实dom节点-这是react的强大功能,它优化了真实的dom突变并使其快速响应。

评论