求教组件为何会卸载

Question

demo：https://stackblitz.com/edit/r...

求大神指教，为何input组件在输入时会将组件卸载

而我用以下几种情况就不会卸载：

1. 用usecallback包下FormItemComponent
2. 将FormItemComponent 组件提取到外面封装
3. 直接用调用FormItemComponent函数

Answer 1

input输入的时候改变了context，触发App函数的执行，从而重新声明并创建了FormItemComponent函数，并更换老的FormItemComponent组件。
在App组件中把对context的依赖去掉也可以阻止重新创建FormItemComponent函数，如果想要在App的更新周期中保持原来的FormItemComponent，则可以用useCallback或useMemo

Answer 2

首先，你的App是函数组件，FormItemComponent只是函数中的一个变量，当组件中是state或者props变更时，函数组件会重新render，可以理解为函数重新执行，函数执行的时候，其内部的变量都会重新声明，所以会出现你上面的问题，而useCallback和useMemo等hooks就是为了解决不必要的重复变量声明的。你把函数组件当成普通函数就好理解了

Answer 3

注意：

const FormItemComponent = (key, restField, name, fieldKey, remove) => {...}

这是什么，这是一个函数。函数组建是什么样的

const FormItemComponent = ({key, restField, name, fieldKey, remove}) => {...}

另外，简单来说onValuesChange操作中对“上下文”有了改动，根据react的更新原理，App组件需要更新。从函数执行的角度来说，App函数重新执行，FormItemComponent被重新声明，组件树继续下去必然出现问题。
至于你说的第三点，这种方式也很合理。通过工厂函数生成子元素是可以的。