Question

在一个简单的组件中，我有一个子组件数组。在父state（以及其他内容）中，我持有一个对象数组，在render函数中我将子组件构造为：

const children = [];
let i = 1;
for(let child of this.state.children){
    children.push(<Decoration key={i++} {...child} />);
}
return (
    <div>{children} {this.state.something_else}</div>
);

问题在于，每当我更改其他一些状态值时，子组件的渲染功能都会被调用，这很奇怪，因为我不会更改children中的任何内容阵列。有任何想法吗？这段代码效率低下吗？

Answer 1

默认情况下，每次调用setState时，React都会重新渲染所有组件和子组件。

有一个方法boolean shouldComponentUpdate（object nextProps，object nextState），每个组件都有这个方法，它负责确定＆＃34;应该组件更新（运行渲染函数）？＆＃34;每次更改状态或从父组件传递新道具时。

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

默认情况下，shouldComponentUpdate始终返回true以防止当状态发生变异时会出现微妙的错误，但是如果你小心的话总是将状态视为不可变状态，只能从道具和状态中读取在render（）中，你可以用一个覆盖shouldComponentUpdate 将旧道具和状态与他们的状态进行比较的实现更换。 http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate

Answer 2

您可能希望将代码移出render()方法并将其放入其中一个生命周期方法中，在这种情况下它将是

componentWillMount和componentWillReceiveProps。您可以在那里构建children数组，只需在render()例如

中显示它

render(){
  return (
      <div>{children} {this.state.something_else}</div>
  );
}

生成渲染组件是否有效？

2 个答案: