React父组件重排子组件时如何避免子组件重新挂载

嘿，我看你正在尝试写一个能切换子组件顺序的React组件，思路挺清晰的！不过你的代码有点小问题（比如constructor拼写错了，还没调用super()），而且没写完，我帮你补全并优化了一下，顺便聊聊几个关键细节：

完整代码实现 #

import React from 'react';

class Reorder extends React.PureComponent {
  constructor() {
    super();
    this.state = { reorder: false };
    this.toggleReorder = this.toggleReorder.bind(this);
  }

  // 切换重排状态的方法
  toggleReorder() {
    this.setState(prevState => ({ reorder: !prevState.reorder }));
  }

  render() {
    const { children } = this.props;

    // 简单校验：确保传入2个子组件，避免报错
    if (!children || React.Children.count(children) !== 2) {
      return <div>⚠️ 该组件需要传入恰好2个子元素哦</div>;
    }

    return (
      <div>
        {/* 触发重排的按钮 */}
        <button onClick={this.toggleReorder}>
          {this.state.reorder ? '恢复原顺序' : '切换子组件顺序'}
        </button>
        <div style={{ marginTop: '1rem' }}>
          {this.state.reorder ? (
            <>
              <div key="0">{children[0]}</div>
              <div key="1">{children[1]}</div>
            </>
          ) : (
            <>
              <div key="1">{children[1]}</div>
              <div key="0">{children[0]}</div>
            </>
          )}
        </div>
      </div>
    );
  }
}

// 使用示例
function App() {
  return (
    <Reorder>
      <div style={{ padding: '1rem', background: '#f0f0f0' }}>子组件A</div>
      <div style={{ padding: '1rem', background: '#e0e0e0' }}>子组件B</div>
    </Reorder>
  );
}

export default App;

关键细节说明 #

• super()不能忘：在constructor里必须调用super()，否则无法访问this，这是React类组件的基础要求。
• key属性的作用：你已经正确给每个子容器设置了唯一的key，这很重要！React靠key来识别元素身份，有了它，重排时React会直接移动DOM元素，而不是销毁重建，能大幅提升性能。
• PureComponent的优势：用React.PureComponent代替普通Component，可以让组件在props和state没有浅变化时跳过渲染，减少不必要的性能开销。不过要注意，如果你的子组件是复杂组件，也要确保它们的props符合浅比较的要求哦。
• 子元素校验：加了简单的校验逻辑，避免用户传入的子元素数量不对时出现奇怪的错误，提升组件的健壮性。

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