javascript - ReactJS-每次调用“ setState”时都会调用渲染吗？(ReactJS - Does render get called any time “setState” is called?)

Question

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

(每当调用setState React是否会重新渲染所有组件和子组件？)

If so, why?

(如果是这样，为什么？)

I thought the idea was that React only rendered as little as needed - when state changed.

(我以为这个想法是，当状态改变时，React只渲染所需的内容。)

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:

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

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

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

(我曾希望只有在state数据已更改的情况state才会进行渲染。)

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

(这是示例代码，例如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/

  ask by Brad Parks translate from so

Answer 1

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

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

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)?"

(有一个方法boolean shouldComponentUpdate（object nextProps，object nextState） ，每个组件都有此方法，它负责确定“组件应该更新（运行渲染功能）吗？”。)

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.

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

Quote from official docs http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate

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

By default, shouldComponentUpdate always returns true to prevent subtle bugs when state is mutated in place, but if you are careful to always treat 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.

(默认情况下，shouldComponentUpdate始终返回true，以防止状态发生适当变化时产生细微的错误，但是如果您始终将状态视为不可变并仅从props和render（）中的状态读取状态，则可以使用实现将旧的道具和状态与其替换进行比较。)

Next part of your question:

(问题的下一部分：)

If so, why?

(如果是这样，为什么？)

I thought the idea was that React only rendered as little as needed - when state changed.

(我以为这个想法是，当状态改变时，React只渲染所需的内容。)

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

(我们可以将“渲染”分为两个步骤：)

1. Virtual DOM render: when render method is called it returns a new virtual dom structure of the component.

   (虚拟DOM渲染：调用render方法时，它将返回组件的新虚拟dom结构。)

   As I mentioned before, this render method is called always when you call setState() , because shouldComponentUpdate always returns true by default.

   (如前所述，此渲染方法总是在您调用setState（）时调用，因为默认情况下shouldComponentUpdate始终返回true。)

   So, by default, there is no optimization here in React.

   (因此，默认情况下，React中没有优化。)

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

   (原生DOM渲染：仅当在虚拟DOM中更改了真实DOM节点时，React才更改浏览器中的真实DOM节点，并且需要的次数很少-这就是React的一项出色功能，它可以优化真实DOM变异并使其快速运行。)