React列表如何调用所有PureComponent子项的serialize方法

你对PureComponent适用场景的判断是对的，之前卡壳主要是对「状态提升的边界」和「ref的适用规则」有误解，不需要推翻现有实现，有两种零侵入、不破坏PureComponent性能、不会造成父组件逻辑臃肿的方案可以选。

你之前遇到ref相关的编译错误，本质是混淆了类组件和函数组件的ref规则：

• 函数组件需要forwardRef才能接收ref，类组件（包括PureComponent类组件）原生支持ref属性。ref是React特殊处理的属性，不会计入props的浅比较流程，根本不会破坏PureComponent的重渲染优化，完全不存在“违背设计初衷”的问题。

直接改造父组件即可，Item组件一行都不用改：

class List extends React.Component {
  constructor(props) {
    super(props);
    // 存储每个列表项的ref
    this.itemRefs = [];
  }

  render() {
    const items = [
      { name: 'first' },
      { name: 'second' }
    ];

    const itemComponents = items.map((elem, index) => {
      // 初始化对应位置的ref
      if (!this.itemRefs[index]) {
        this.itemRefs[index] = React.createRef();
      }
      return <Item
        key={index}
        ref={this.itemRefs[index]}
        name={elem.name}></Item>
    });

    return <div>
      {itemComponents}
      <button onClick={this.serialize}>Serialize</button>
    </div>
  }

  // 箭头函数绑定this，避免render时创建新函数
  serialize = () => {
    const serializedResult = this.itemRefs
      .filter(ref => ref.current)
      .map(itemRef => itemRef.current.serialize());
    console.log(serializedResult);
  }
}

这个方案改造成本最低，所有Item的内部逻辑完全封装在组件内部，父组件只在触发序列化时才调用子组件的实例方法，没有任何多余的性能损耗。

如果你不想用ref，可以用注册回调的方式实现，核心逻辑是父组件维护一个序列化方法的映射表，子组件挂载时把自己的serialize方法注册到父组件，卸载时自动清理：

class List extends React.Component {
  constructor(props) {
    super(props);
    // 存储所有子项的序列化方法
    this.serializerMap = new Map();
  }

  // 提前绑定this，保证传给子组件的函数引用永久稳定
  registerSerializer = (itemKey, serializeFn) => {
    this.serializerMap.set(itemKey, serializeFn);
    // 返回清理函数，供子组件卸载时调用
    return () => this.serializerMap.delete(itemKey);
  }

  serialize = () => {
    const serializedResult = Array.from(this.serializerMap.values()).map(fn => fn());
    console.log(serializedResult);
  }

  render() {
    const items = [
      { name: 'first' },
      { name: 'second' }
    ];

    const itemComponents = items.map((elem, index) => {
      return <Item
        key={index}
        itemKey={index}
        name={elem.name}
        registerSerializer={this.registerSerializer}
      ></Item>
    });

    return <div>
      {itemComponents}
      <button onClick={this.serialize}>Serialize</button>
    </div>
  }
}

// 只需要给Item加挂载/卸载的注册逻辑，原有业务逻辑完全不动
class Item extends React.PureComponent<{ name: string, itemKey: number, registerSerializer: Function }, { checked: boolean }> {
  // 省略原有的constructor、render、serialize方法

  componentDidMount() {
    // 挂载时注册当前实例的序列化方法，保存清理函数
    this.unregister = this.props.registerSerializer(
      this.props.itemKey,
      this.serialize.bind(this)
    );
  }

  componentWillUnmount() {
    // 卸载时清理注册，避免内存泄漏
    this.unregister?.();
  }
}

这个方案里，传给Item的registerSerializer是父组件构造时就创建的稳定引用，itemKey是列表渲染时的固定值，完全不会触发PureComponent的多余重渲染，Item的复杂业务逻辑还是全部封装在自身内部，父组件不需要维护任何Item的业务状态，根本不会出现逻辑臃肿的问题。

很多人误以为状态提升就是把所有子组件的状态、逻辑全堆到父组件，这是错的。状态提升只是把状态的所有权收归父组件，对应的状态更新逻辑、复杂计算、校验规则完全可以按业务维度抽离到独立的hook、工具函数甚至单独的文件中，父组件只做状态的分发和汇总，不会造成逻辑臃肿。但对你当前的场景来说，上面两个方案的改造成本远低于全量状态提升，完全没必要为了序列化需求重构现有组件。

内容的提问来源于stack exchange，提问作者Ciufno