![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Hooks
文章平均质量分 54
Always--Learning
选择远远大于努力
展开
-
有大用途的useRef
使用useRef获取DOM元素使用useRef获取DOM元素是目前useRef最常用的用法。基本用法function App() { const box = useRef(); return ( <div ref={box}> <button onClick={() => console.log(box)}>点击获取div</button> </div> )}原创 2021-10-18 07:55:07 · 472 阅读 · 0 评论 -
从原理上解读useState钩子函数
原生useState具有的几个特点返回一个数组,数组的第一个参数值是状态值,第二个参数值是设置状态的方法。useState会判断传入的state是初始值还是已存在的值。useState可能被多次调用调用设置状态的方法后需要重新渲染组件。手写useState第一步:用不同的数组来分别存放状态值和设置状态的方法let states = [];let setters = [];let stateId = 0;第二步:判断useState传入的初始状态值是否已经存在存在用以前的,不存在原创 2021-10-16 08:17:52 · 465 阅读 · 0 评论 -
彻底搞懂自定义Hook函数和路由钩子函数
什么是自定义Hook?自定义Hook是标准的封装和共享逻辑的方式。自定义Hook是一个函数,其名称以use开头。自定义Hook其实就是逻辑和内置的Hook的组合。通俗的说,自定义Hook就是对组件间共用逻辑的封装,其名称以use开头。实例一:封装共有请求假设我们在组件挂载完成之后,需要对远程服务器发送一个GET请求,获取到文章数据,然后显示在页面中,我们可以通过下面的写法来完成,将获取数据折翼共有操作进行封装。function useGetPost() { const [p原创 2021-10-14 08:08:16 · 563 阅读 · 0 评论 -
学会使用useMemo和useCallback对你没坏处
什么是useMemo?useMemo的行为类似Vue中的计算属性,可以检测某个值的变化,根据变化值计算新值。useMemo会缓存计算结果,如果检测值没有发生变化,即使组件重新渲染,也不会重新计算,此行为可以有助于避免在每个渲染上进行昂贵的计算。不要再useMemo函数中执行与渲染无关的操作。useMemo的基本用法function App() { const [bool,setBool] = useState(true); const [age,setAge] = useStat原创 2021-08-31 09:34:00 · 611 阅读 · 0 评论 -
这一次,彻底搞懂useEffect
什么是useEffect?让函数型组件拥有处理副作用的能力,类似生命周期函数。1. useEffect执行时机可以把useEffect看做componentDidMount,componentDidUpdate,componentWillUnmount这三个函数的组合。当做componentDidMount和componentDidUpdate的时候function App() { const [count,setCount] = useState(0); // 组件原创 2021-08-29 09:45:28 · 1336 阅读 · 0 评论 -
需要掌握的Hooks之useReducer与useContext
什么是useReducer?useReducer是一种让函数组件保存状态的方式,是useState的替代方案.通过useReducer可以向子组件传递dispatch.useReducer接受什么?接收的第一个参数是一个reducer函数,第二个参数是一个初始的状态值.userReducer返回的是什么?返回的是一个数组,数组的第一个元素是存储的状态,第二个元素是出发action的dispatch方法.定义的reducer函数接收什么,返回什么?接收两个参数,第一个是以前的状态值原创 2021-08-28 10:32:16 · 339 阅读 · 0 评论 -
useState是怎么回事?
Hooks意为钩子,React Hooks就是一堆钩子函数,React通过这些钩子函数对函数型组件进行增强,不同的钩子函数提供了不同的功能。钩子函数有一个特点,都是以use开头。为函数组件提供状态useState函数的内部是使用闭包来实现函数保存状态数据的。useState的返回值是什么?返回值是一个数组,数组的第一项是状态数据,第二项是设置状态数据的方法,关于这个第二项的命名,我们一般采用set+状态数据名的方法,请看下面的例子。const [count,setCount] = us.原创 2021-08-26 15:57:44 · 1019 阅读 · 0 评论 -
为什么需要React Hooks?
Hook是React16.8的新增特性,它可以让我们不使用类组件的情况下使用state以及其他的React特性。React Hooks介绍React Hooks是用来做什么的?对函数型组件进行增强,让函数型组件可以存储状态,可以拥有处理副作用的能力,让开发者在不使用类组件的情况下,实现相同的功能。什么是副作用?上文提到了副作用这一概念,下面我们来讲解下什么是副作用,我们只需要记住只要不是把数据转换为视图的代码那么就属于副作用,例如下面的副作用例子。在类组件中,我们通常使用生命周期钩子函数.原创 2021-08-25 15:46:21 · 423 阅读 · 0 评论