React的Hooks

React Hooks

在这里插入图片描述
在这里插入图片描述

useState

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

useMemo 和usecallback

在这里插入图片描述
Hooks显示的指明因变量有什么好处
当使用时,y与changeX会被缓存下来,只要x不变,始终读取的是缓存的值,
如果不使用时,每次函数组件执行时,实际会基于x,创建新的y与changeX
这涉及到React的性能优化,
个人建议,在遇到性能优化的瓶颈之前,都可以暂时不使用这两个Hooks

在这里插入图片描述
在这里插入图片描述
副作用是函数式编程中的概念

对于一个函数,如果固定的输入一定会产生固定的输出,

如果这里面x是固定的,输出的结果就是一定的,那这说这是一个纯函数
在这里插入图片描述
但当我们引入随机数Z时,x一定是输出是不固定的
我们就可以说这个函数是包含副作用的
在这里插入图片描述

useEffect

在函数组件中,可以通过useEffect来定义有副作用的因变量,
假设我们希望当x变化后,将当前页面的标题修改为x的值
改变标题的这一行为就属于副作用
初次之外,比如请求数据,操作DOM,这些都属于副作用
我们都可以通过useEffect处理
在这里插入图片描述
在这里插入图片描述
可见,自变量变化,导致因变量变化,因变量不仅可以作用于视图,也能触发副作用
在这里插入图片描述
useState定义自变量
useMemo和useCallback定义无副作用的因变量
useEffect定义有副作用的因变量
useReducer可以看作是进阶版的useState,使用redux的理念将多个state合并为一个
本质上也是一个因变量

实例
在这里插入图片描述
在这里插入图片描述
一个组件的自变量和因变量,又可以作为另一个组件的自变量
当组件的层级变多时,自变量的传递变得十分繁琐,

在这里插入图片描述
为了解决上述问题,我们出现了

useContext

在第一级组件通过createContext创建context后
在第四级组件通过useContext
可以直接消费一级组件创建的context
通过这种方式使跨层级的传递自变量变得很简单,
在这里插入图片描述
通过这种方式使跨层级的传递自变量变得很简单,

useRef

做一些个性化的需求
在这里插入图片描述
我们希望组件奇数次更新时,显示x所在li,偶数次更新时不显示
我们需要一个变量,标记当前组件的更新次数
知道了次数,才能知道是当前是奇数次更新,还是偶数次更新
保存标记的变量既不是自变量也不是因变量,它仅仅是在路劲中起到缓存数据的作用
在这里插入图片描述

这就是useRef
在这里插入图片描述
就展示x所在的li,如果是偶数次就不展示

扫描二维码关注公众号,回复: 16866349 查看本文章

可以作用于自变量与因变量的不同路径中,增加组件逻辑的灵活性
在这里插入图片描述

总结
React Hooks的本质是自变量与因变量

useState定义自变量
useMemo和useCallback定义无副作用的因变量
useEffect定义有副作用的因变量
useReducer
可以看作是进阶版的useState,使用redux的理念将多个state合并为一个
本质上也是一个因变量,为了方便操作更多的自变量
useContext
为了跨组件层级的操作自变量,有了useContext
useRef
为了组件逻辑更灵活有了useRef

学习视频

猜你喜欢

转载自blog.csdn.net/SOLar7SysteM/article/details/129385223