react 学习(一)

97 阅读2分钟

文档仅自学,勿喷,课程来源于珠峰react课程

4/141
vue mvvm
React mvc setState修改状态同时更新视图渲染,forceUpdate通知视图强制更新

image.png

image.png

7/141 JSX底层渲染机制(创建虚拟dom)

image.png

image.png 8/141 JSX底层渲染机制(创建真实dom)

image.png

image.png

image.png

9/141 函数组件底层渲染机制

image.png

image.png

10/141 关于props属性的细节知识

image.png

11/141 react中的插槽处理机制 image.png

15/141 类组件第一次渲染的底层逻辑
第一步 初始化属性 && 校验规则 image.png 第二步 初始化状态,强制让视图更新的方法(1、setState,2、forceUpdate) image.png 第三四五步 image.png image.png 16/141 类组件更新的底层逻辑
image.png 17/141 pureComponent 原理 和component区别

image.png 18/141 有关ref操作的详细解读
受控组件和非受控组件的区别
受控组件:基于修改数据、状态,让视图更新,达到需要的效果 非受控组件:基于ref获取dom元素,我们操作dom元素,来实现需求和效果 image.png 对于获取类和函数的子组件ref 函数组件外面要套一层React.forwardRef image.png 19/141 关于setState的进阶处理1
image.png setState的批处理机制 image.png 20/141 关于setState的进阶处理2
关于setState是同步还是异步的问题,要分版本回答,
如果是react18的话,无论在什么地方执行setState,它都是异步的,(都是基于updater更新队列机制,实现批处理)
如果在react16的话,如果在合成时间,周期函数中,setState是异步的,向定时器、手动获取dom做的事件绑定是同步的 image.png 立即刷新更新队列 (flushSync,来源于react-dom) image.png image.png