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

如果是,为什么?我以为这样的 idea 是,当状态改变时,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>

推荐答案

Reaction是否在每次调用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以防止

问题的下一部分:

如果是,为什么?我认为React的 idea 是,当状态发生变化时,只提供所需的少量内容.

我们可以将其称为"渲染",其中有两个步骤:

  1. 虚拟DOM呈现:当调用render方法时,它返回组件的新virtual dom struct .正如我前面提到的,当您调用setState()时,总是调用这个render方法,因为默认情况下shouldComponentUpdate总是返回TRUE.因此,默认情况下,Reaction中没有优化.

  2. 原生DOM呈现:Reaction仅在虚拟DOM中更改实际DOM node 时才会更改浏览器中的实际DOM node ,并尽可能少地进行更改-这是非常棒的Reaction特性,它可以优化实际DOMMutations 并使react 更快.

Javascript相关问答推荐

Vega中的模运算符

我应该在redux reducer中调用其他reducer函数吗?

使用Java脚本根据按下的按钮更改S文本

编剧如何获得一个div内的所有链接,然后判断每个链接是否都会得到200?

我创建了一个创建对象的函数,我希望从该函数创建的对象具有唯一的键.我怎么能做到这一点?

连接到游戏的玩家不会在浏览器在线游戏中呈现

在我的index.html页面上找不到我的Java脚本条形图

如何将数据块添加到d3力有向图中?

从Nextjs中的 Select 项收集值,但当单击以处理时,未发生任何情况

如何将未排序的元素追加到数组的末尾?

查询参数中的JAVASCRIPT/REACT中的括号

在FAQ Accodion应用程序中使用React useState时出现问题

try 将Redux工具包与MUI ToggleButtonGroup组件一起使用时出错

有没有一种直接的方法可以深度嵌套在一个JavaScript对象中?

在JS/TS中将复杂图形转换为数组或其他数据 struct

Promise.race()返回已解析的promise ,而不是第一个被拒绝的promise

如何使用Cypress在IFRAME中打字

将延迟加载的模块转换为Eager 加载的模块

$GTE的mongoose 问题

使用导航时,路径的所有子组件都必须是路径