千锋教育2022版React全家桶教程_react零基础入门到项目实战完整版

使用hooks的理由

1.高阶弊端使代码层级复杂，函数式组件可以缓解

2.处理复杂的类生命周期

3.设计无状态组件，因后期需要状态

Hooks的钩子函数

1.userState 改变状态

2.useEffect和useLayouEffect (处理副作用)和 (同步执行副作用)

useEffect

useEffect钩子是所有三个生命周期方法的组合因此它允许我们在函数组件中访问生命周期方法。

可以多次注册

回调函数只执行一次

使用情况

不传递，传递空数组，传递一个，传达多个传递props的对象 传递的useState返回的setterreturn方法

useEffect挂钩是异步的，这有一个明显的缺点即它只能在组件挂载后调用。这意味着依赖于组件布局的副作用不能使用

useLayoutEffect

1.类似于useEffect。区别就是执行的时机

2 .useEffect不会阻塞浏览器的绘制任务，他会在页面更新之后才执行

3 .useLayoutEffect和

mponentDidMount,componentUpdate的执行时机一样，会阻塞页面的渲染，如果在里面执行耗时任务的话，页面就会卡顿

4 .如果需要根据新的ui来执行特定操作，就去这里面

5 .会在浏览器layout之后，painting之前执行

6.可以使用来读取dom布局并同步触发重渲染

7.在浏览器执行绘制前useLeyoutEffect内部的更新计划将被同步刷新

8.尽可能地使用标准的useEffect，以避免阻塞视图更新

useLayoutEffect hook 是同步运行的，这意味着它会在 React 执行完所有必要的 DOM 变更后立即运行，但恰好在浏览器绘制屏幕之前运行。它具有与useEffect hook 相同的 API和相似的语法。引入此 hook 是为了解决一些在使用