在 React 18 中，并发渲染 (concurrent render) 有可能会出现撕裂这个问题，本文只是介绍产生撕裂的原因。

react在进行组件渲染时，从setState开始到渲染完成整个过程是同步的（“一气呵成”）。如果需要渲染的组件比较庞大，js执行会占据主线程时间较长，会导致页面响应度变差，使得react在动画、手势等应用中效果比较差。 为了解决这个问题，react团队经过两年的工作，重写了r…

React18的升级策略是「渐进升级」，包括名声在外的并发渲染等在内的新能力都是可选的，不会立刻对组件行为带来任何明显的破坏性变化。

diff的作用 在React中，diff算法需要与虚拟DOM配合才能发挥出真正的威力。React会使用diff算法计算出虚拟DOM中真正发生变化的部分，并且只会针对该部分进行dom操作，从而避免了对页

源码结构 在渲染函数组件的时候会调用renderWithHooks方法： 可以看到这个函数中： 将nextRenderLanes（当前需要渲染的优先级集合）赋值给了renderLanes，将workI

解析源码前，我们明确几个问题： Scheduler是什么，作用是什么？ Scheduler的出现是为了解决什么问题？ Scheduler是一个任务调度器，它会根据任务的优先级对任务进行调用执行。 在有

概述 Lane是React中用于表示任务的优先级。优先级分为高优先级与低优先级，当用户操作界面时，为了避免页面卡顿，需要让出线程的执行权，先执行用户触发的事件，这个我们称之为高优先级任务，其它不那么重

⁣React 的工作流程是什么？我们可以在哪些阶段进行性能优化呢？ 如果 React 项目中出现了卡顿，我们可以采用哪些性能优化技巧？ 如何通过 React Profiler 定位性能问题？

最近准备培训新人, 为了方便新人较快入手 React 开发并编写高质量的组件代码, 我根据自己的实践经验对React 组件设计的相关实践和规范整理了一些文档, 将部分章节分享了出来. 由于经验有限, 文章可能会有某些错误, 希望大家指出, 互相交流. 由于篇幅太长, 所以拆分为…