reactjs - 选择性子组件渲染

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 则不然。

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

我需要帮助，请指教!

Answer 1

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

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

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

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

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

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 的内存表示形式，并且比实际 DOM 更快。然后 React 会比较更新前和更新后的虚拟 DOM 版本，实际 DOM 将仅更新实际更改的内容。