我正在使用 React 16.8.2,每当应用程序组件中的状态发生更改时,我都会遇到组件卸载的问题。
这是场景:
- 我有 App.jsx (一个功能组件)和许多状态变量(useState)
- 其中一些状态变量的设置器通过 Context 提供程序(后代中的 useContext)沿树向下传递
- 我有一个菜单组件(应用程序的后代),它调用这些设置器来(例如)显示模式对话框
- 我有一个模式对话框组件(App 的子组件),它使用状态变量作为属性来确定它是否打开——我认为这是标准的 React 东西。
我的问题:当 App 中的任何状态变量发生更改(当然是通过钩子)时,App 的子级将被卸载并重新安装 - 即使它们与正在更改的状态没有任何连接。它们不仅仅是重新渲染 - 子级被卸载并且它们的状态被重新初始化。因此,例如,我的对话框中的字段在不应该被清除的情况下被清除了。
这已经是一个相当复杂的应用程序,所以我今天花了很多时间来隔离问题。然后,我设置了一个简单的 create-react-app 来尝试在那里复制此行为 - 但此测试应用程序的行为就像它应该的那样。更改父状态,无论是通过 prop 回调,还是通过子级上下文提供的回调,都会重新渲染,但不会卸载/重新挂载,并且子状态保持不变。
但在我的真实应用程序中,组件重新安装并且子状态重新初始化。
我已经将其简化到了我能做到的最简单的程度 - 我通过子级的上下文设置了一个假状态变量“foo”和“setFoo”。即使 foo 不被任何组件使用,更改 foo 的值也会导致 App 的子组件卸载/重新安装。
在 App.jsx 中:
const App = props => {
const [foo, setFoo] = useState(false);
// ...
const appControl = {
toggleFoo: () => setFoo(!foo);
};
// ...
return (
<AppContext.Provider value={appControl}>
... a bunch of stuff not using foo anywhere
... including, deep down:
<Menu />
</AppContext.Provider>
);
};
在 Menu.jsx 中:
const Menu = props => {
const appControl = useContext(AppContext);
// ...
return (
... super simplified for test
<div onClick={appControl.toggleFoo}>
Toggle Foo
</div>
);
};
如果我正确理解状态,我确实相信改变状态应该导致孩子被重新渲染,但不会重新安装。这是我在简单的 create-react-app 测试中看到的,但不是在我的真实应用程序中看到的。
我确实发现我没有使用最新的 React - 也许升级可以解决这个问题?
感谢您对我可能做错或误解的任何见解。