解析 React 渲染原理

主要观点总结

本文介绍了React框架的渲染流程，包括组件的初次渲染、更新渲染以及优化手段。文章详细阐述了React的渲染原理，如何避免不必要的渲染，以及如何使用React.memo、useMemo和useCallback等优化手段。

关键观点总结

关键观点1: React渲染流程

React通过构建虚拟DOM树来描述组件结构，并与旧的虚拟DOM树对比，找到需要更新的部分，从而修改页面。

关键观点2: state与组件渲染

只有state的改变会引起组件的重新渲染，且其所有子组件也会重新渲染。

关键观点3: 避免不必要的渲染

使用React.memo、useMemo和useCallback等优化手段可以避免无谓的组件渲染。React.memo适用于缓存组件返回值，useMemo适用于缓存复杂计算的结果，useCallback适用于缓存函数实例。