React函数组件中父组件如何刷新/清空子组件state

两种方案可直接落地，优先选第一种，特殊场景用第二种。

方案1：绑定key值触发子组件重挂载（推荐，维护成本最低） #

• 核心逻辑：React的diff规则中，组件的key属性变化时，会直接销毁旧组件实例、重新挂载全新的组件实例，子组件所有内部useState、useReducer管理的状态会自动回到初始值，不需要额外写状态重置逻辑。
• 对应预留的clearChildState方法实现非常简单，步骤如下：
  1. 父组件单独维护一个用于触发重置的状态，一般用递增数字或者时间戳即可
  2. 把这个状态作为key属性传给子组件
  3. 在clearChildState方法里更新这个key值，就会自动触发子组件重置
• 完整代码示例：

import { useState } from 'react'

// 父组件
function Parent() {
  // 专门控制子组件重置的key状态
  const [childResetKey, setChildResetKey] = useState(0)

  // 预留的清空方法，直接更新key即可
  function clearChildState(){
    setChildResetKey(prev => prev + 1)
  }

  return (
    <div>
      <button onClick={clearChildState}>清空子组件状态</button>
      {/* key变化时子组件自动重挂载，状态全清 */}
      <Child key={childResetKey} />
    </div>
  )
}

// 子组件不需要修改任何原有业务逻辑
function Child() {
  const [inputVal, setInputVal] = useState('')
  const [count, setCount] = useState(0)
  // 原有交互、渲染逻辑完全不用动
  return (
    <div>
      <input value={inputVal} onChange={e => setInputVal(e.target.value)} />
      <button onClick={() => setCount(prev => prev+1)}>计数：{count}</button>
    </div>
  )
}

• 适用场景：绝大多数普通业务场景，子组件重挂载没有额外高成本开销（比如没有复杂的未缓存大计算、不需要保留组件实例上的临时数据），这个方案代码侵入性最低，后续维护不容易出bug。

方案2：Ref暴露子组件清空方法（适合禁止子组件重挂载的场景） #

• 核心逻辑：如果子组件重挂载成本很高（比如包含大量手动管理的DOM状态、未持久化的富文本编辑内容、重挂载会触发重复的大开销请求），可以通过forwardRef+useImperativeHandle把子组件内部的清空方法暴露给父组件调用，整个过程不会触发子组件重挂载。
• 实现步骤：
  1. 子组件用forwardRef包裹，内部实现状态重置逻辑，通过useImperativeHandle把重置方法暴露给父组件
  2. 父组件用useRef创建子组件实例引用，在预留的clearChildState方法里直接调用子组件暴露的清空方法即可
• 完整代码示例：

import { useState, useRef, forwardRef, useImperativeHandle } from 'react'

// 子组件需要用forwardRef包裹，接收父组件传入的ref
const Child = forwardRef((props, ref) => {
  const [inputVal, setInputVal] = useState('')
  const [count, setCount] = useState(0)

  // 把清空方法暴露给父组件
  useImperativeHandle(ref, () => ({
    // 子组件内部自己实现状态重置逻辑
    clearState: () => {
      setInputVal('')
      setCount(0)
    }
  }), [])

  return (
    <div>
      <input value={inputVal} onChange={e => setInputVal(e.target.value)} />
      <button onClick={() => setCount(prev => prev+1)}>计数：{count}</button>
    </div>
  )
})

// 父组件
function Parent() {
  const childRef = useRef(null)

  // 预留的清空方法，直接调用子组件暴露的方法
  function clearChildState(){
    childRef.current?.clearState()
  }

  return (
    <div>
      <button onClick={clearChildState}>清空子组件状态</button>
      <Child ref={childRef} />
    </div>
  )
}

注意：这个方案属于命令式调用，不符合React单向数据流的默认设计，除非必须保留子组件实例不被销毁，否则不要优先用这个方案，后续维护成本比方案1高。

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