如何优雅地在React中重新加载第三方不受控组件？

我使用了第三方库中的组件，无法对其代码进行修改，该组件自身维护内部状态（属于不受控组件）。我希望在特定时机（比如用户点击按钮时）重新加载它，让其内部状态恢复至初始值。目前我实现了一种方案，但其中的reload函数不够优雅，有没有更优的解决办法？

<Child></Child>代表该第三方组件，其内部维护一个count值。点击重新加载按钮时，需让组件内的count恢复为9。

原实现代码 #

const Child = function Child() {
  const [count, setCount] = useState(9)

  const increment = () => {
    setCount(count + 1)
  }

  return <>
    <div>
      <div>{count}</div>
      <button onClick={increment}>+</button>
    </div>
  </>
}

const Parent = function Parent() {
  const [flag, setFlag] = useState(true)

  const reload = () => {
    setFlag(false)
    setTimeout(() => {
      setFlag(true)
    })
  }

  return <>
    <div>
      <button onClick={reload}>reload</button>
      {flag && <Child></Child>}
    </div>
  </>
}

更优解决方案：利用React的key属性 #

React的key属性用于标识组件的唯一性，当key值发生变化时，React会自动卸载旧组件实例并挂载新的组件，这样组件的内部状态就会自然重置为初始值，完全不需要定时器这类hack手段。

修改后的父组件代码 #

const Parent = function Parent() {
  const [componentKey, setComponentKey] = useState(0)

  const reload = () => {
    // 每次点击更新key值，触发组件重新挂载
    setComponentKey(prev => prev + 1)
  }

  return <>
    <div>
      <button onClick={reload}>reload</button>
      {/* 通过key变化触发组件重置 */}
      <Child key={componentKey} />
    </div>
  </>
}

方案优势 #

• 代码更简洁：去掉了冗余的条件渲染和定时器，逻辑直观易懂
• 符合React设计逻辑：key原本就是React用来处理组件更新的核心属性，用它触发组件重置是官方认可的合理用法
• 避免潜在问题：定时器方案依赖React的更新时机，可能出现渲染异常；而key的方式是稳定可靠的官方方案

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