SearchHeader触发搜索能否在SearchMain展示结果？如何实现

这个需求完全可实现，没有技术门槛。

可用实现方案 #

根据两个组件的层级关系，选对应方案即可：

• 如果SearchHeader和SearchMain是同个父组件下的兄弟组件（绝大多数搜索页布局都是这种结构），直接用状态提升就行，这是React原生支持的最简便方案：
  1. 把搜索关键词的state定义在两者共同的父组件中
  2. 给SearchHeader传value和onChange两个props，把输入框做成受控组件，输入变化时回调更新父组件里的关键词state
  3. 父组件监听关键词变化，触发搜索请求拿到结果后，把结果传给SearchMain渲染即可
• 如果两个组件隔了很多层嵌套，逐层传props太麻烦，可以用React自带的Context API做轻量跨层共享：用createContext创建一个搜索上下文，把关键词、更新关键词的方法放到context的Provider里包裹住两个组件，SearchHeader里直接拿更新方法修改关键词，SearchMain里直接拿关键词/搜索结果渲染就行，不需要额外安装依赖。

关于单独建Slice是否属于过度设计的判断 #

这个没有标准答案，完全匹配业务场景选择即可：

• 如果搜索状态仅服务于这两个组件，没有其他组件/页面需要读取搜索关键词、不需要跨路由保留搜索状态、搜索逻辑没有复杂的异步处理/缓存需求，单独建Redux Slice纯属于过度设计。为了一个单一场景的共享状态写一堆Redux模板代码，维护成本远高于收益，用上面说的状态提升或者原生Context就足够。
• 如果你的场景符合以下任意一种，建独立Slice就不算过度设计，反而逻辑更清晰：
  • 搜索关键词/结果需要被多个无直接关联的组件复用（比如全局历史搜索、侧边栏联动、搜索结果页和头部搜索框跨路由同步状态）
  • 搜索逻辑比较复杂，需要统一管理防抖、请求取消、结果缓存、加载态、错误态等逻辑
  • 产品要求离开搜索页面再返回时，保留之前的搜索内容和结果

常用相关API #

• React原生能力：useState、useEffect（监听关键词变化触发搜索）、createContext、useContext
• Redux生态（确有需要时再用）：createSlice、useSelector、useDispatch

小提示：不管用哪种方案，记得给输入框的change事件加300ms左右的防抖，不要每次敲字都立刻发搜索请求，能减少大量无效请求。

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