商务网站怎么做,北京新站优化,政务门户网站建设思想,网站备案 不关站1、useState
在函数组件中#xff0c;可以使用useState来定义函数组件的状态。使用useState来创建状态。
1.引入2.接收一个参数作为初始值3.返回一个数组#xff0c;第一个值为状态#xff0c;第二个值为改变状态的函数
2、 useEffect
useEffect又称副作用hooks。作用可以使用useState来定义函数组件的状态。使用useState来创建状态。
1.引入2.接收一个参数作为初始值3.返回一个数组第一个值为状态第二个值为改变状态的函数
2、 useEffect
useEffect又称副作用hooks。作用给没有生命周期的组件添加结束渲染的信号。执行时机在渲染结束之后执行 什么是副作用 副作用 ( side effect ): 数据获取数据订阅以及手动更改 React 组件中的 DOM 都属于副作用因为我们渲染出的页面都是静态的任何在其之后的操作都会对他产生影响所以称之为副作用 使用 1.第一个参数接收一个函数作为参数2.第二个参数接收【依赖列表】只有依赖更新时才会执行函数3.返回一个函数先执行返回函数再执行参数函数
2.1 不接受第二个参数的情况下
如果不接受第二个参数那么在第一次渲染完成之后和每次更新渲染页面的时候都会调用useEffect的回调函数。
2.2 接受第二个参数的情况下
第二个参数传入一个数组这个数组表示的是更新执行所依赖的列表只有依赖列表改变时当数组中的任意一项变化的时候useEffect会被重新执行 才会触发回调函数
传入的为空数组[]那么即告诉useEffect不依赖于state、props中的任意值useEffect就只会运行一次常用场景为页面获取数据的方法可以写入此处进行调用以获取页面初始数据。传入一个值构建的数组、或者多个值构建的数组如[num]、[num,val]上述代码变更为如下。那么此时只有当数组中的值任意一项即可改变时才会重新触发回调函数。
3、 useLayoutEffect
一般将useLayoutEffect称为有DOM操作的副作用hooks。作用是在DOM更新完成之后执行某个操作。执行时机在DOM更新之后执行。
与useEffect对比
相同点 1.第一个参数接收一个函数作为参数2.第二个参数接收【依赖列表】只有依赖更新时才会执行函数3.返回一个函数先执行返回函数再执行参数函数所以说执行过程的流程是一样的不同点 执行时机不同。useLayoutEffect在DOM更新之后执行useEffect在render渲染结束后执行。执行示例代码会发现useLayoutEffect永远比useEffect先执行这是因为DOM更新之后渲染才结束或者渲染还会结束
4、 useMemo
使用useMemo可以传递一个创建函数和依赖项创建函数会需要返回一个值只有在依赖项发生改变的时候才会重新调用此函数返回一个新的值。简单来说作用是让组件中的函数跟随状态更新即优化函数组件中的功能函数。
使用 1.接收一个函数作为参数2.同样接收第二个参数作为依赖列表可以与useEffect、useLayoutEffect进行对比学习3.返回的是一个值。返回值可以是任何函数、对象等都可以。使用场景有复杂计算逻辑优化、父子组件传值重新优化等
5、 useCallback
useMemo讲完我们来讲一个跟其很相似的叫useCallback作用也是让某些操作、方法跟随状态的更新而去执行。
与useMemo对比。
可以简单这样看作useMemo(() Fn,deps)相当于useCallback(Fn,deps) 不同点useCallback是缓存的是一个函数对传过来的回调函数优化返回的是一个函数useMemo返回值可以是任何函数对象等都可以。复杂计算逻辑的场景不适合使用useCallback来缓存因为传入的函数内容会不断执行。
相同点
在使用方法上useMemo与useCallback相同。接收一个函数作为参数也同样接收第二个参数作为依赖列表
useCallback适用场景
可以对父子组件传参渲染的问题进行优化。简单来说就是父组件的传入函数不更新就不会触发子组件的函数重新执行 通常而言父组件更新了那么子组件也会更新。但是如果父组件传入子组件的内容不变那么子组件某些操作某些操作是指需要跟随传入内容的改变而同步进行的操作是没必要执行的这会影响页面性能所以我们可以对这情况进行优化。
简单总结使用场景判断
在子组件不需要父组件的值和函数的情况下只需要使用memo函数包裹子组件即可如果有函数传递给子组件使用useCallback缓存一个组件内的复杂计算逻辑需要返回值时使用useMemo如果有值传递给子组件使用useMemo。
6 、useRef
简单来说useRef就是返回一个子元素索引此索引在整个生命周期中保持不变。作用也就是长久保存数据。注意事项保存的对象发生改变不通知。属性变更不会重新渲染
7、useContext
useContext是让子组件之间共享父组件传入的状态的。作用通俗地说是带着子组件去流浪。
需要引入useContextcreateContext两个内容通过createContext创建一个context句柄Context.Provider来确定数据共享范围通过value来分发内容在子组件中通过useContext(Context句柄)来获取数据
