react知识点汇总（开发随记，持续更新中...）

一、常用hooks（挑核心的说了）

所有hooks不要在循环和条件处理中使用，如果必须使用单独封装在组件中（不清楚怎么使用某些hooks，建议去官网学习，写的很不错）react.docschina.org/reference/r…

• useEffect

依赖项要独立；cleanup逻辑（卸载组件）

• useState

set一个新对象

• useReducer

用来进行状态管理；

• useContext（和useReducer配合使用）

方便向组件树深层传递数据

• useRef

返回一个只有一个属性的对象(xxx.current)；不会触发重新渲染

const ref = useRef(initialValue)

• useImperativeHandle

配合forwardRef将子组件的方法暴漏给父组件

• useMemo

• 每次重新渲染的时候能够缓存计算的结果
• 配合memo跳过重新渲染

const cachedValue = useMemo(calculateValue, dependencies)

• useCallBack

• 多次渲染中缓存函数
• 配合memo使用

const cachedFn = useCallback(fn, dependencies)

二、性能优化

• useCallBack、useMemo 结合 memo，减少重渲
• 页面使用react-activation做缓存（少量使用能提升页面交互，要注意不要过渡依赖，有可能导致页面卡顿）
• 长列表页面使用虚拟列表rc-virtual-list
• 大数据table开启虚拟滚动
• 所有页面在使用hooks时，一定要注意依赖项的简洁，避免重复渲染
• 首屏加载速度：首屏接口拆分（注意控制在6个以内），合理控制并发请求数量（p-limit）
• 打包：注意拆包（非核心插件进行分包）、开启gzip压缩、使用HappyPack提升打包速度
• 系统中用到的图片、静态资源都走CDN

三、核心原理（虚拟dom、diff）

• 虚拟DOM

当我们编写 JSX 代码时，React 会将这些 JSX 转换为虚拟 DOM 树。每一个 JSX 元素都会转化为一个虚拟 DOM 对象，其中包含了 type（节点类型）、props（节点属性）、children（子节点）等信息

• diff

• 同层节点对比、唯一 key 标识（通过 key 属性来区分不同的节点、只更新变化的元素）
• 当 key 不唯一或缺失时，React 会重新渲染整个列表，性能会明显下降

四、状态管理工具（redux）

@reduxjs/toolkit

五、对比vue3

• 相同点

都是单项数据流，例：父组件调子组件方法，需要特定的方式实现（）

• 各自特点