// 不同類型元素比較
// 舊樹
<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>
);
// 推薦：使用穩(wěn)定的唯一標識作為 key
const GoodList = () => (
  <ul>
    {items.map(item => (
      <li key={item.id}>{item.text}</li>
    ))}
  </ul>
);

function diffTree(oldTree, newTree) {
  if (oldTree === null) {
    // 插入新節(jié)點
    return createNode(newTree);
  }
  if (newTree === null) {
    // 刪除舊節(jié)點
    return null;
  }
  if (oldTree.type !== newTree.type) {
    // 替換節(jié)點
    return createNode(newTree);
  }
  // 更新現(xiàn)有節(jié)點
  updateNode(oldTree, newTree);
  // 遞歸處理子節(jié)點
  diffChildren(oldTree.children, newTree.children);
}

function diffChildren(oldChildren, newChildren) {
  // 第一輪：處理更新的節(jié)點
  for (let i = 0; i < Math.min(oldChildren.length, newChildren.length); i++) {
    diff(oldChildren[i], newChildren[i]);
  }
  // 處理新增的節(jié)點
  if (newChildren.length > oldChildren.length) {
    newChildren.slice(oldChildren.length).forEach(child => {
      create(child);
    });
  }
  // 處理刪除的節(jié)點
  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 優(yōu)化函數(shù)組件
const MemoizedComponent = React.memo(function MyComponent(props) {
  return <div>{props.value}</div>;
});

// 使用 key 和 memo 優(yōu)化列表渲染
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 不穩(wěn)定導致的重新渲染
const ProblematicList = () => (
  <ul>
    {items.map((item, i) => (
      <li key={Math.random()}>{item.text}</li> // 不要這樣做
    ))}
  </ul>
);
// 解決方案：使用穩(wěn)定的唯一標識
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>
  );
};