获得徽章 0
今天看到了一篇关于 React 一些 Hook 使用的问题，由于 React 当父组件有状态更新时会默认更新当前下的所有子组件，现在想跟大家讨论一下 “何时该使用 memo 包裹一个组件” ？
以下是我对 memo 的理解以及提问：
1. 没有 Props 的子组件：由于 React 当父组件有状态更新时会默认更新当前下的所有子组件，如果一个没有 props 的子组件使用 memo 进行包裹则会缓存当前的子组件，由于考虑到 React 对使用 memo 的子组件进行缓存处理也会消耗一定的性能，而这种没有 props 的子组件不使用 memo 则父组件更新后则会导致子组件也会一直跟着更新，这时候是否有必要根据 “React 处理子组件使用 memo 的缓存” 和 “子组件里面不断触发更新的成本” 进行对比后才去考虑这个子组件是否需要使用 memo 包括？（当然我之前都是无脑使用 memo 去包裹组件的，现在越想越不对劲）
2. 有 Props 的子组件：当父组件传递具有 memoized 的 props 时，使用 memo 去包裹一个子组件也可以达到缓存子组件的效果，至于我们在父组件常用的 memoized hook 包括 useState、useMemo、 useCallback，这种情况只有 Props 更新时候才会触发子组件的更新，这个维护的问题在于 “子组件接受一个 Function Props 时是否必须在父组件定义该 Function 时使用 useCallback 定义”？
关于这两点我想看看各位平时是怎么去关注 React 子组件更新以及如何维护的问题。
以下是我对 memo 的理解以及提问：
1. 没有 Props 的子组件：由于 React 当父组件有状态更新时会默认更新当前下的所有子组件，如果一个没有 props 的子组件使用 memo 进行包裹则会缓存当前的子组件，由于考虑到 React 对使用 memo 的子组件进行缓存处理也会消耗一定的性能，而这种没有 props 的子组件不使用 memo 则父组件更新后则会导致子组件也会一直跟着更新，这时候是否有必要根据 “React 处理子组件使用 memo 的缓存” 和 “子组件里面不断触发更新的成本” 进行对比后才去考虑这个子组件是否需要使用 memo 包括？（当然我之前都是无脑使用 memo 去包裹组件的，现在越想越不对劲）
2. 有 Props 的子组件：当父组件传递具有 memoized 的 props 时，使用 memo 去包裹一个子组件也可以达到缓存子组件的效果，至于我们在父组件常用的 memoized hook 包括 useState、useMemo、 useCallback，这种情况只有 Props 更新时候才会触发子组件的更新，这个维护的问题在于 “子组件接受一个 Function Props 时是否必须在父组件定义该 Function 时使用 useCallback 定义”？
关于这两点我想看看各位平时是怎么去关注 React 子组件更新以及如何维护的问题。
展开
12
点赞
1. git clone 可以使用 --depth=1 --single-branch，表示只拉取一个分支和一个 commit，通常我们看框架源码时候只看主要分支的最新 commit，这样拉取可以加速 clone 速度
2. patch-package 用来记录 node_modules 模块改动的记录，有时候非得去改一个 node_modules 包的代码时，可以使用 patch-package 生成一个 patch 来记录当前 module 修改的记录，然后把该文件上传到 git 上面，小伙伴可以拉取到 patch 文件，小伙伴再使用 patch-package 更新自己的 node_modules 的更改，这样就能保持开发过程中所有人 node_modules 的改动是一样的
3. webpack 的 cheap-module-source-map 可以用来关联上一个 module 的 source-map，如当前项目的编译流程是 ts-loader -> babel-loader -> webpack，这三个工具都有生成 source-map 的功能，如果想调试未编译的源码（ts-loader 转换前的代码），则需要将 webpack 的 devtool 设置为 cheap-module-source-map，之后将 babel-loader 和 ts-loader 的 source-map 开启，最终会生成 ts-loader 编译之前的 source-map 文件，如果不使用 cheap-module-source-map 则会生成 babel 的 source-map 文件
2. patch-package 用来记录 node_modules 模块改动的记录，有时候非得去改一个 node_modules 包的代码时，可以使用 patch-package 生成一个 patch 来记录当前 module 修改的记录，然后把该文件上传到 git 上面，小伙伴可以拉取到 patch 文件，小伙伴再使用 patch-package 更新自己的 node_modules 的更改，这样就能保持开发过程中所有人 node_modules 的改动是一样的
3. webpack 的 cheap-module-source-map 可以用来关联上一个 module 的 source-map，如当前项目的编译流程是 ts-loader -> babel-loader -> webpack，这三个工具都有生成 source-map 的功能，如果想调试未编译的源码（ts-loader 转换前的代码），则需要将 webpack 的 devtool 设置为 cheap-module-source-map，之后将 babel-loader 和 ts-loader 的 source-map 开启，最终会生成 ts-loader 编译之前的 source-map 文件，如果不使用 cheap-module-source-map 则会生成 babel 的 source-map 文件
展开
评论
2
赞了这篇文章
有一部分打工人每到有假期时候就会想着去哪里玩，但也有一部分打工人每到假期就会想着终于有空去一趟医院检查身体，比如我，基本每次一到节日假期第一个想到就是终于有时间去医院了
2
1
这次神舟十六号载人航天名单名单我看了，我在整个掘金的沸点里面看没有一个在里面，说实话很失望，希望大家多做些有意义的事情，而不是整天虚度光阴，个个平时看着都挺厉害，也没上天，我很失望
2
3
第一步：沉淀
第二步：那场寒冬毁了我的大厂梦
第三步：小厂也是工作
第四步：两年程序员，一生极客情
第五步：送外卖也算进大厂
第六步：老同学，我想你了，回来吧icpc队友
第七步：码农烧烤
第八步：烧烤店倒闭，码农维修
第九步：行业不吃香，码农代驾
第十步：吊销驾驶证，碧桂园五星上将
第十一步：嘴笨教训不了不知好歹的业主，身体羸弱也欺负不了落单的外卖员，遇到危险只能活活挨打
第十二步：公司若缺人召必回
第二步：那场寒冬毁了我的大厂梦
第三步：小厂也是工作
第四步：两年程序员，一生极客情
第五步：送外卖也算进大厂
第六步：老同学，我想你了，回来吧icpc队友
第七步：码农烧烤
第八步：烧烤店倒闭，码农维修
第九步：行业不吃香，码农代驾
第十步：吊销驾驶证，碧桂园五星上将
第十一步：嘴笨教训不了不知好歹的业主，身体羸弱也欺负不了落单的外卖员，遇到危险只能活活挨打
第十二步：公司若缺人召必回
展开
1
5