1. 状态提升的核心原则

1.5 实践示例：兄弟组件同步搜索关键词

以下是一个在 React 中实现状态提升的最小范例：

// 共同祖先：SearchContainer
import React, { useState } from 'react';

function SearchContainer() {
  const [keyword, setKeyword] = useState('');

  return (
    <div>
      <SearchInput value={keyword} onChange={setKeyword} />
      <ResultList keyword={keyword} />
    </div>
  );
}

// 子组件1：SearchInput（通过 props 接收值 + 回调）
function SearchInput({ value, onChange }) {
  return (
    <input
      type="text"
      value={value}
      onChange={(e) => onChange(e.target.value)}
      placeholder="输入搜索关键词"
    />
  );
}

// 子组件2：ResultList（通过 props 接收数据）
function ResultList({ keyword }) {
  const items = ['React', 'Vue', 'Svelte'].filter(
    (item) => item.toLowerCase().includes(keyword.toLowerCase())
  );
  return (
    <ul>
      {items.map((item, i) => <li key={i}>{item}</li>)}
    </ul>
  );
}

1.6 调试与验证

• 使用 React DevTools 检查 共同祖先 的 state 是否只包含一份 keyword。
• 在 SearchContainer 中增加 console.log 观察 state 变更时是否只有一次渲染来源。
• 确认没有组件通过 ref 或全局变量绕过 props 修改状态。

1.7 性能注意事项

状态提升本身不引入额外开销，但提升后祖先组件的任意子组件都会因为祖先 state 变化而重新渲染。可采用 React.memo 或 useMemo 隔离不依赖提升状态的子组件，避免不必要的重渲染。