选择性子组件渲染

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。我想要的是，因为props.iconName与之相关，所以只有ChildComponentA仅获得一个渲染，而与childcomponentB和childcomponentC没有关系。

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

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

Answer 1

React没有提供任何方式来选择性地渲染子级。组件将渲染或不渲染。但是我需要强调几点，为什么在实践中使用React时这不是问题。

首先，您不需要shouldComponentUpdate为每个组件手动实现。如果您不希望在组件的PureComponent属性和状态未更改的情况下重新渲染组件，则可以从类扩展而不是从类扩展Component。请注意，React.PureComponent's shouldComponentUpdate()仅对状态和道具使用浅层比较。但是，如果您遵循最佳实践并避免改变状态，那么这应该不是问题。

同样，在一种渲染方法中包含100个以上的不同组件也是不切实际的。React总是鼓励将UI分解为较小的组件并使用组件组成。当我们采用这种方法时，组件将以不同的级别嵌套在彼此内部，而不是在一个render方法中包含大量组件。

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

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

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都将只使用实际更改的内容进行更新。