真的不可以在 React 组件内部嵌套定义子组件吗？ - PRIN BLOG

[giscus[bot]]

真的不可以在 React 组件内部嵌套定义子组件吗？ - PRIN BLOG

最近在 Code Review 时，看到有同事写了这样的代码： function TodoList() { const [list, setList] = useState([]); const TodoItem = useCallback((props) => { return

{props.text}</

https://prinsss.github.io/react-unstable-nested-components/

[ShellWen]

非常有意义的文章，其实最重要的还是要老老实实把 ESLint 开好，能避免太多这样的低级错误了😭

[ahungrynoob]

其实react/no-unstable-nested-components的eslint规则规避不了这个问题https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unstable-nested-components.md

[prinsss]

是的，我说的不太严谨，这个规则只能检测裸的或者 React.memo 过的嵌套组件。如果需要检测 useCallback / useMemo 包裹的嵌套组件，需要用非官方的 no-component-def-in-render 规则。

[ahungrynoob]

尝试了一下这个插件，没有对useMemo的情况作处理，很可惜

[prinsss]

我这边测试下来好像是正常的：https://imgur.com/a/V4vXyDH

[Zxilly]

不是很理解为什么依赖数组会导致缓存失效，应该只有在依赖数组中的内容出现变化的时候，这个组件才会被重新渲染，而且在这种情况下也确实需要重新渲染，即使是把它拆成外部组件，props变了同样会重新渲染啊。。。

[Zxilly]

使用 arrayLike.map(()=> <Component/> ) 方式创建的组件会导致重新挂载吗

[prinsss]

需要联系上下文具体分析，而且 arrayLike.map(() => <Component />) 返回的是 JSX.Element[] 而不是组件

[xiaorong61]

因为依赖变了后，组件引用变了，react 没法知道新的组件和旧的组件是同一个组件，会放弃 diff 而是直接销毁重建。

[michaeldong]

react 判断类型type的时候，如果是函数组件，判断是否是同一个函数（函数引用）产生的。如果是，就走 重新渲染。 不然走挂载、再渲染的流程。

1. 如果把子组件的定义放到外部，那么都是一个类型 产生的。认为type一样。
2. 如果把函数 A1定义在内部，在 render 中使用的时候，调用的是不同的A1，A2（因为父组件重新渲染了），但是！！！不同函数 A1,A2 返回的对象 是同一个类型（本文中是
3. ) 所有不会走创建流程，直接走 re-render.
4. 如果你把定义在内部的函数，当前组件用（组件本身确实就是一个函数），性质就完全不一样了。完全不同的 type.

[michaeldong]

本文中是 ""li 组件"" 所有不会走创建流程，直接走 re-render.