解析 React 渲染原理

主要观点总结

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

关键观点总结

关键观点1: React渲染流程

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

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

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

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

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

文章预览

本文作者为 360 奇舞团前端开发工程师 简介 当我们使用React框架编写代码时，无论是组件的更新、状态的改变，还是父子组件之间的交互，都会涉及到 React 的渲染流程。你可能会有以下疑问： 组件渲染的具体流程是什么？ 引起组件重新渲染的因素有哪些？ React.memo、useMemo和useCallback等优化手段的原理是什么？如何合理使用它们？ 带着这些疑问，让我们开始探索React的渲染过程吧。 一、渲染过程 初次渲染 首先，我们定义一个函数组件： function   Home () {    return  (      < >        Home        这是一个函数组件     >   ); } export  default Home; 当页面初次渲染时，React会先创建一个根节点，用来绑定组件： const root = createRoot(document.getElementById( 'root' )) 接下来，会使用root函数渲染具体的组件： root.render( ) 由于我在 App 组件中引入了 Home 组件 ………………………………