diff --git a/source/_posts/2024/react-unstable-nested-components.md b/source/_posts/2024/react-unstable-nested-components.md index 2451cc14..fb3e850e 100644 --- a/source/_posts/2024/react-unstable-nested-components.md +++ b/source/_posts/2024/react-unstable-nested-components.md @@ -279,7 +279,7 @@ function TodoList() { ![nested-usememo-memo-deps](react-unstable-nested-components/nested-usememo-memo-deps.png) -从实际测试中可以看到,有了依赖项的 `useMemo` + 嵌套组件,又退化成了最开始的样子,每次都会被当成不同的组件类型,每次都会被 unmount。之前所做的努力全部木大! +从实际测试中可以看到,有了依赖项的 `useMemo` + 嵌套组件,又退化成了最开始的样子,每次都会被当成不同的组件类型,每次都会被 unmount。之前所做的努力全部木大!(顺带一提用 `useRef` [也是一样的](https://stackblitz.com/edit/react-unstable-nested-components?file=src%2Fcomponents%2F10-nested-useref.jsx),有依赖就歇菜) 也就是说,只有你的嵌套子组件完全不依赖父组件作用域时,才能保证 `useMemo` 的缓存一直有效,才能做到完全不影响渲染性能。但既然都已经完全不依赖了,那么又还有什么理由一定要把它定义在父组件内部呢? @@ -350,6 +350,7 @@ function TodoList() { - 渲染函数虽然和组件一样都返回 JSX,但它不是组件; - 渲染函数就是普通 JavaScript 函数,没有状态,也没有对应的 Fiber 节点; +- 渲染函数只是当前组件的一部分,对于 React 渲染来说没有额外开销; - 渲染函数内部不能使用 Hooks,只有组件内部才能使用 Hooks; - 渲染函数命名一般以 `render` 开头,首字母小写(否则容易和组件搞混)。 @@ -361,7 +362,7 @@ function TodoList() { **第一,配置 Lint 规则。** -防范于未然,合理的 Lint 配置可以减少起码 80% 的代码规范问题。比如本文介绍的坑,其实完全可以通过 [`react/no-unstable-nested-components`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unstable-nested-components.md) 规则提前规避。 +防范于未然,合理的 Lint 配置可以减少起码 80% 的代码规范问题。比如本文介绍的坑,其实完全可以通过 [`react/no-unstable-nested-components`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unstable-nested-components.md) + [`react-rfc/no-component-def-in-render`](https://github.com/xgbuils/eslint-plugin-react-rfc/blob/main/docs/rules/no-component-def-in-render.md) 规则提前规避。 最好再配合代码提交后的 CI 卡点检查,有效避免因开发者环境配置不当或者偷摸跳过检查,导致规则形同虚设的情况。