React

[tanxukun]

技术解密

https://react.iamkasong.com/

生命周期

• 挂载阶段： constructor => static getDerivedStateFromProps(nextProps, prevState) =>render => componentDidMount
• 更新阶段： static getDerivedStateFromProps => shouldComponentUpdate(nextProps, nextState) => render => getSnapshotBeforeUpdate(prevProps, prevState) => componentDidUpdate(prevProps, prevState, snapshot)
• 卸载阶段： componentWillUnmount

SyntheticEvent 合成事件

合成事件是 React 模拟原生 DOM 事件所有能力的一个事件对象，即浏览器原生事件的跨浏览器包装器

根据 W3C 规范来定义合成事件，兼容所有浏览器，拥有与浏览器原生事件相同的接口

• React 所有事件都挂载在 document 对象上
• 当真实 DOM 元素触发事件，会冒泡到 document 对象后，再处理 React 事件，所以会先执行原生事件，然后处理 React 事件，最后真正执行 document 上挂载的事件
• React事件回调函数的时候切记不能将 event 用于异步操作 —— 当异步操作真正执行的时候，SyntheticEvent对象有可能已经被重置了放回事件池中，比如上传文件，异步操作后获取不到e.files了， 可以通过event.persist()或者及时缓存事件属性值（react 17已经放弃了事件池）

受控组件和非受控组件

• 受控组件，如 输入的内容手动控制的组件叫受控组件
• 非受控组件，如 输入的内容由组件自己控制，只到最后取结果的组件叫非受控组件

高阶组件

接收一个或多个组件，加工后返回一个组件，本质是一个函数而非组件

一般遵循一些约定：

• props保持一致
• 不能再函数式组件上使用ref，因为它没有实例
• 不要以任何方式改变原始组件
• 不在render()中使用高阶组件
• 高阶组件不能传递ref,如果要传递则使用forwardRef

Hooks

• useDeferredValue ?

[tanxukun]

React 18新特性

Automatic Batching 自动批处理

• 自动的批量更新，所有的setState相关的触发更新的操作都会变成异步批量更新
• 18之前是React控制的更新是异步更新，React控制之外的如setTimeout, setInterval, 原生dom事件监听等都是同步
• import { flushSync } from 'react-dom' flushSync(() => {setState()}) 可以同步更新 不建议

Concurrent并发渲染

• 渲染可以被中断，继续，终止的
• 渲染可以在后台运行
• 渲染可以有优先级
• 不是新功能，而是一种新的底层机制

Transitions

• 标记渲染优先级，React有高低两种优先级，默认都是高
• 非hook使用startTransition， hook使用useTransition降低优先级

Suspense

• 过度组件

其他

• Api变更
• 旧：ReactDom.render(<App />, container) 新import {createRoot} from 'react-dom/client'; const root = createRoot(container); root.render(<App />)