穿10号的赵睿
前端
获得徽章 0
- 家人们确实，我10月27日去澳门看陈奕迅演唱会的事没必要天天提，知道我10月27日看陈奕迅演唱会的人多的是，天天提我10月27日看陈奕迅演唱会显得好像就我10月27日看陈奕迅演唱会一样，其实都是不光你知道我10月27日看陈奕迅演唱会，别人也知道我10月27日看陈奕迅演唱会，我10月27日看陈奕迅演唱会那就看呗等人赞过 57
- React学习笔记
Ⅰ. Effect Hook：用于在函数组件中处理副作用
Ⅱ. 副作用：
1. ajax请求
2. 计时器
3. 其他异步操作
4. 更改真实DOM对象
5. 本地存储
6. 其他会对外部产生影响的操作
Ⅲ. 函数：useEffect，该函数接收一个函数作为参数，接收的函数就是需要进行副作用操作的函数
Ⅳ. 细节
1. 副作用函数的运行时间点，是在页面完成真实的UI渲染之后。因此它的执行是异步的，并且不会阻塞浏览器
a. 与类组件中componentDidMount和componentDidUpdate的区别
b. componentDidMount和componentDidUpdate，更改了真实DOM，但是用户还没有看到UI更新，同步的。
c. useEffect中的副作用函数，更改了真实DOM，并且用户已经看到了UI更新，异步的。
2. 每个函数组件中，可以多次使用useEffect，但不要放入判断或循环等代码块中。
3. useEffect中的副作用函数，可以有返回值，返回值必须是一个函数，该函数叫做清理函数
a. 该函数运行时间点，在每次运行副作用函数之前
b. 首次渲染组件不会运行
c. 组件被销毁时一定会运行
4. useEffect函数，可以传递第二个参数
a. 第二个参数是一个数组
b. 数组中记录该副作用的依赖数据
c. 当组件重新渲染后，只有依赖数据与上一次不一样的时，才会执行副作用
d. 所以，当传递了依赖数据之后，如果数据没有发生变化
ⅰ. 副作用函数仅在第一次渲染后运行
ⅱ. 清理函数仅在卸载组件后运行
5. 副作用函数中，如果使用了函数上下文中的变量，则由于闭包的影响，会导致副作用函数中变量不会实时变化。
6. 副作用函数在每次注册时，会覆盖掉之前的副作用函数，因此，尽量保持副作用函数稳定，否则控制起来会比较复杂。展开评论点赞 - React笔记分享：
首次渲染原理（新节点渲染）
1. 通过参数的值创建节点
2. 根据不同的节点，做不同的事情
a. 文本节点：通过document.createTextNode创建真实的文本节点
b. 空节点：什么都不做（节点对象是存在的，会占位）
c. 数组节点：遍历数组，将数组每一项递归创建节点（回到第1步进行反复操作，直到遍历结束）
d. DOM节点：通过document.createElement创建真实的DOM对象，然后立即设置该真实DOM元素的各种属性，然后遍历对应React元素的children属性，递归操作（回到第1步进行反复操作，直到遍历结束）
e. 组件节点
ⅰ. 函数组件：调用函数(该函数必须返回一个可以生成节点的内容)，将该函数的返回结果递归生成节点（回到第1步进行反复操作，直到遍历结束）
ⅱ. 类组件：
1. 创建该类的实例
2. 立即调用对象的生命周期方法：static getDerivedStateFromProps
3. 运行该对象的render方法，拿到节点对象（将该节点递归操作，回到第1步进行反复操作）
4. 将该组件的componentDidMount加入到执行队列（先进先出，先进先执行），当整个虚拟DOM树全部构建完毕，并且将真实的DOM对象加入到容器中后，执行该队列
3. 生成出虚拟DOM树之后，将该树保存起来，以便后续使用
4. 将之前生成的真实的DOM对象，加入到容器中。展开评论点赞
![[爱心]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_106.ba42c9a.png)
太有才华啦🌈
🏻