前言 今天我们来一期不同寻常的React进阶文章，本文我们通过一些不同寻常的现象，以探案的流程分析原因，找到结果，从而认识React，走进React的世界，揭开React的面纱，我深信，更深的理解，方

React性能优化是在业务迭代过程中不得不考虑的问题，大部分情况是由于项目启动之初，没有充分考虑到项目的复杂度，定位该产品的用户体量及技术场景并不复杂，那么我们在业务前期可能并不需要考虑性能优化。

得益于 chrome 浏览器强大的调试能力， console.log 可谓是前端开发中解决未知问题最直接的办法，遇事不决，打个日志，简单粗暴🏈。但是在 React 项目中其实有更好的调试方案，那就是官方（脸书）出的 react devtools ，可以针对性的做一些代码的调试…

react diff 是从 fiber 树的 Root 节点开始，从上往下一层一层的对新老节点进行 比较。期间组件的 key 以及 type 决定是否需要复用老的节点。节点的 index 最终决定了 dom 是否需要被移动。没有被复用的节点会被删除，也就不需要对其子树进行 di…

应届生小A：在学校用React + antd做过后台管理系统，熟悉React技术栈。 两年前端小B：公司技术栈是React，都用了一年了，我React贼六。 五年前端老C：带团队把公司的粪坑项目用React重构了。React对我来说就跟呼吸一样容易。 小A、小B、老C：要不学学…

今天我们React源码交流群里有个小伙伴提出个有趣的问题，觉得自己对React运行流程理解很到位的同学，可以来看看。 render。即调用render函数，根据返回的JSX创建新的fiber。 bailout。即满足一定条件时，React判断该组件在更新前后没有发生变化，则复用…

只有在依赖项改变后才会重新计算新的memoizedValue。 我们有个全局context —— AppContext。 由于同学们偷懒，随着项目的迭代，新增的context都选择放在AppContext里，导致AppContext包含的内容越来越多。 现在我们有个Tree组件…

在 React 的世界里”一切都是组件“， 组件可以映射作函数式编程中的函数，React 的组件和函数一样的灵活的特性不仅仅可以用于绘制 UI，还可以用于封装业务状态和逻辑，或者非展示相关的副作用, 再通过组合方式组成复杂的应用. 本文尝试解释用 React 组件的思维来处理常…

本文来源于公司内部的一次闪电分享，稍作润色分享出来。主要讨论 React 性能优化的主要方向和一些小技巧。如果你觉得可以，请多点赞，鼓励我写出更精彩的文章🙏。 减少计算的量。 -> 对应到 React 中就是减少渲染的节点 或者 降低组件渲染的复杂度 利用缓存。-> 对应到 …