React组件意外完全重置（非重渲染）的触发条件是什么？

你描述的「完全重置」本质是React判定原有组件实例需要被卸载后重新挂载，属于React的正常运行逻辑，并非底层逻辑如下：

• **组件的key属性发生变化
  这是最常见的触发原因。React通过key判断组件是否为同一个实例，只要key值变化，无论其他属性多一致都会直接卸载旧实例、挂载全新实例。比如父组件给子组件传递了动态生成的key（如随机数、每次渲染都会重新计算的不稳定值）时就会触发该问题。
• 条件渲染逻辑触发卸载
  当组件被条件渲染包裹，若条件从满足变为不满足再变回满足时，组件会被卸载后重新挂载。比如父组件写了{showProject && <Project />}，showProject变量在运行中发生true→false→true的切换，就会导致组件重置。
• 组件定义位置不稳定
  如果将子组件的函数定义写在另一个组件的函数体内，每次父组件重渲染时，子组件的引用都会重新生成，React会判定为完全不同的组件类型，直接卸载旧实例挂载新实例。错误写法示例：

  function Parent () {
    // 错误：子组件定义在父组件内部
    function Project () {
      // 你的组件逻辑
    }
    return <Project />
  }
  

• 路由相关逻辑触发
  你使用的react-router-dom v6.0.0-beta.8属于未正式发布的测试版本，存在大量已知bug，其中就包括路由参数变化、同路径匹配逻辑异常时，会错误卸载路由组件而非仅更新组件props的问题。另外如果路由配置时，每次渲染都会生成新的element属性对应的组件实例，也会触发该问题。
• React严格模式（开发环境）
  开发环境下开启React.StrictMode时，React会主动对组件执行一次「挂载-卸载-重新挂载」的操作，用来检测组件是否存在副作用残留问题，也会出现你描述的重置表现，该逻辑仅在开发环境生效。

排查方案 #

1. 先检查Project组件被调用的位置是否绑定了动态、不稳定的key值
2. 检查父组件是否存在控制Project组件显隐的条件渲染逻辑，排查相关状态是否存在异常切换
3. 确认Project组件的定义是否写在其他组件的函数内部，需将组件定义移到全局作用域
4. 针对react-router相关问题可以临时给路由组件绑定固定key，比如`<Route path="/project" element={

   return (<Project key="fixed-project-key" />)
   

   }，强制稳定组件实例不被卸载
5. 排除严格模式导致的问题可以临时关闭严格模式验证是否复现

// 你的示例代码
export default function Project (props) {
  const [temp, setTemp] = useState(false)
  const tempRef = useRef(false)
  console.debug({ temp }, tempRef)

  useEffect(() => {
    console.debug('INITIALIZATION:', { temp }, tempRef)
    setTemp(true)
    tempRef.current = true
  }, [])

  // ...
}

内容的提问来源于stack exchange，提问作者Mir-Ismaili