Question

我需要帮助的一个基本问题。每当在父组件处调用this.setState时，将呈现所有子组件。如果我有大量的子组件，这将导致性能问题。

让我们举个例子，

父组件

handleToggleTick() {
    const newObj = Object.assign({}, this.state, { iconName: ''});
    this.setState({
      iconName: newObj.iconName,
    });
}

render() {
  return(
    <ChildComponentA iconName={this.state.iconName} toggleTick={() => this.handleToggleTick}></ChildComponentA>
    <ChildComponentB></ChildComponentA>
    <ChildComponentC></ChildComponentA>
  )
}

根据上面的示例，每当从childcomponentA调用handleToggleTick时，都会为新的iconName调用setState。我想要的是，只有ChildComponentA只有一个得到渲染，因为props.iconName与它相关，但不与childcomponentB和childcomponentC相关。

我知道有一个选项可以检查childcomponent中的shouldComponentUpdate以防止它获得渲染。但是，想象一下，我有超过100个子组件，编写超过100次的shouldComponentUpdate方法会令人沮丧吗？

我在这里需要帮助，请指教！

Answer 1

React没有提供任何选择性渲染子项的方法。该组件将呈现或不呈现。但是我需要强调一点，当我们在实践中使用React时，为什么这不是问题。

首先，您不需要为每个组件手动实施shouldComponentUpdate。如果你不想重新渲染组件，如果它的props和状态没有改变，你可以从PureComponent类而不是Component类扩展。请注意，React.PureComponent's shouldComponentUpdate()仅对州和道具使用浅比较。但如果您遵循最佳实践并避免改变状态，这应该不是问题。

此外，在一个渲染方法中拥有超过100个不同的组件是不切实际的。 React总是鼓励将UI分解为更小的组件并使用组件组合。当我们遵循这种方法时，组件将以不同的级别彼此嵌套，而不是在一个渲染方法中具有大量组件。

我试图解释的是，当我们以嵌套方式（2）组合我们的组件而不是在大容器组件（1）中包含大量组件时，它更实用且更易于管理。

在您的示例中，如果ChildComponentB和ChildComponentC位于另一个名为ChildConatainerComponent的组件内，那么我们只需要为ChildConatainerComponent实现shouldComponentUpdate()。然后它会自动停止渲染其中的任何子元素。

render() {
  return(
    <ChildComponentA iconName={this.state.iconName}
      toggleTick={() => this.handleToggleTick}/>
    <ChildConatainerComponent/>
  )
}

class ChildConatainerComponent extends PureComponent {
  render() {
    return (
      <div>
       <ChildComponentB/>
       <ChildComponentC/>
      </div>
    );
  }
}

要记住的另一个非常重要的概念是调用render函数并不意味着React再次重新创建所有DOM元素。 render方法仅对React虚拟DOM进行更改，这是DOM的内存表示，并且比实际DOM更快。然后React比较更新之前和更新之后的虚拟DOM版本，实际的DOM将仅使用实际更改的内容进行更新。

Answer 2

您可以考虑的另一个解决方案是将iconName移至ChildComponentA，因为这是唯一与之相关的组件。

选择性儿童组件呈现

2 个答案: