子组件事件处理函数调用setState触发构造函数重置状态该如何解决？

根本原因 #

该问题本质是子组件发生了卸载后重新挂载的流程，而非普通的组件重渲染。普通重渲染只会触发render、componentDidUpdate等生命周期，不会执行构造函数、也不会重置内部状态。触发重新挂载通常是父组件重渲染时，子组件的唯一标识、组件引用发生了变化，被React判定为全新组件导致的。

编码层面解决方案 #

• 固定子组件的key属性为稳定值
  如果父组件渲染时给子组件绑定的key是随机值、时间戳、或者每次渲染都会变化的变量，React会直接卸载旧组件、挂载新组件，触发构造函数重置状态。需保证同一子组件的key在多次渲染间唯一且固定不变。

• 不要在父组件的render逻辑内定义子组件
  如果在父组件的函数体/render方法中声明子组件的类/函数定义，每次父组件重渲染都会生成全新的子组件引用，React会触发重新挂载流程。需将子组件的定义提到模块顶层、父组件外部。

错误写法示例：

function Parent() {
  // 错误：每次Parent渲染都重新生成Child的引用
  function Child() {
    const [count, setCount] = useState(0)
    return <button onClick={() => setCount(count + 1)}>{count}</button>
  }
  return <Child />
}

• 条件渲染场景优先用样式隐藏代替节点销毁
  如果父组件的条件渲染逻辑是不满足条件时直接移除子组件节点，当条件再次满足时子组件会重新挂载。如果需要保留子组件的内部状态，可使用display: none或visibility: hidden隐藏子组件，而非直接卸载节点。

• 状态提升到上层存储
  对需要跨重新挂载保留的状态，可以将状态从子组件提升到父组件或者全局状态管理（如Context、Redux）中，子组件通过props接收状态和状态修改方法，即使子组件重新挂载也能从上一层拿到最新的状态值，不会被重置为默认值。

• 减少不必要的重渲染
  函数组件可以使用React.memo对props做浅比较跳过不必要的重渲染，类组件可以继承React.PureComponent或者自定义shouldComponentUpdate生命周期控制重渲染逻辑。注意该方案仅能优化普通重渲染，无法解决子组件被强制重新挂载的问题。

内容的提问来源于stack exchange，提问作者iron.man.rball