React Diffing 算法完整指南(示例详解)

// 不同类型元素比较
// 旧树
<div>
  <Counter />
</div>
// 新树
<span>
  <Counter />
</span>
// React 会完全删除旧树，重建新树

// 同类型DOM元素比较
// 旧树
<div className="old" title="old">
  Hello
</div>
// 新树
<div className="new" title="new">
  World
</div>
// React 只会更新变化的属性

class MyComponent extends React.Component {
  render() {
    // 更新时只比较渲染结果
    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>{this.props.content}</p>
      </div>
    );
  }
}

// 效率较低的列表渲染
function ListWithoutKeys() {
  return (
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  );
}
// 当列表项变化时，React 需要重新渲染所有项

// 使用 key 的列表渲染
function ListWithKeys() {
  const items = [
    { id: 1, text: 'Item 1' },
    { id: 2, text: 'Item 2' },
    { id: 3, text: 'Item 3' }
  ];
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.text}</li>
      ))}
    </ul>
  );
}
// React 可以通过 key 识别哪些元素保持不变

// 不推荐：使用索引作为 key
const BadList = () => (
  <ul>
    {items.map((item, index) => (
      <li key={index}>{item.text}</li>
    ))}
  </ul>
);
// 推荐：使用稳定的唯一标识作为 key
const GoodList = () => (
  <ul>
    {items.map(item => (
      <li key={item.id}>{item.text}</li>
    ))}
  </ul>
);

function diffTree(oldTree, newTree) {
  if (oldTree === null) {
    // 插入新节点
    return createNode(newTree);
  }
  if (newTree === null) {
    // 删除旧节点
    return null;
  }
  if (oldTree.type !== newTree.type) {
    // 替换节点
    return createNode(newTree);
  }
  // 更新现有节点
  updateNode(oldTree, newTree);
  // 递归处理子节点
  diffChildren(oldTree.children, newTree.children);
}

function diffChildren(oldChildren, newChildren) {
  // 第一轮：处理更新的节点
  for (let i = 0; i < Math.min(oldChildren.length, newChildren.length); i++) {
    diff(oldChildren[i], newChildren[i]);
  }
  // 处理新增的节点
  if (newChildren.length > oldChildren.length) {
    newChildren.slice(oldChildren.length).forEach(child => {
      create(child);
    });
  }
  // 处理删除的节点
  if (oldChildren.length > newChildren.length) {
    oldChildren.slice(newChildren.length).forEach(child => {
      remove(child);
    });
  }
}

class OptimizedComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 只在必要时更新
    return this.props.value !== nextProps.value;
  }
  render() {
    return <div>{this.props.value}</div>;
  }
}
// 使用 React.memo 优化函数组件
const MemoizedComponent = React.memo(function MyComponent(props) {
  return <div>{props.value}</div>;
});

// 使用 key 和 memo 优化列表渲染
const OptimizedListItem = React.memo(({ item }) => (
  <li>{item.text}</li>
));
function OptimizedList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <OptimizedListItem 
          key={item.id} 
          item={item}
        />
      ))}
    </ul>
  );
}

import { FixedSizeList } from 'react-window';
function VirtualizedList({ items }) {
  const Row = ({ index, style }) => (
    <div style={style}>
      {items[index].text}
    </div>
  );
  return (
    <FixedSizeList
      height={400}
      width={300}
      itemCount={items.length}
      itemSize={35}
    >
      {Row}
    </FixedSizeList>
  );
}

// 问题：key 不稳定导致的重新渲染
const ProblematicList = () => (
  <ul>
    {items.map((item, i) => (
      <li key={Math.random()}>{item.text}</li> // 不要这样做
    ))}
  </ul>
);
// 解决方案：使用稳定的唯一标识
const FixedList = () => (
  <ul>
    {items.map(item => (
      <li key={item.id}>{item.text}</li>
    ))}
  </ul>
);

// 问题：父组件更新导致子组件不必要的重渲染
const Parent = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        Count: {count}
      </button>
      <Child data={data} /> // 即使 data 没变，Child 也会重渲染
    </div>
  );
};
// 解决方案：使用 useMemo 或 React.memo
const Parent = () => {
  const [count, setCount] = useState(0);
  const memoizedData = useMemo(() => data, [data]);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        Count: {count}
      </button>
      <Child data={memoizedData} />
    </div>
  );
};