React Hooks

102 阅读2分钟

hooks

    hooks为函数组件提供了状态,也支持在函数组件中进行数据获取、订阅事件解绑事件等等。下面先介绍几个最基本的hook作为基础知识。

1)useState

    通过useState为组件提供状态。这是一个简单的useState例子,计数器,useState的参数是state的初始值,他只有在组件第一次渲染的时候会生效,他的返回值是一个数组,第一个是state,第二个是设置state的函数。

2)useEffect

    副作用。通常在副作用中进行ajax请求,事件的绑定与解绑,设置定时器与清除等等。这是一个简单的useEffect的例子,useEffect基本用法,useEffect第一个参数是一个回调函数,在里面进行业务逻辑代码的书写;第二个参数是依赖项数组,如果数组中的依赖发生变化,那么该副作用就会重新执行,如果不设置第二个参数,那么当该组件每渲染一次,副作用就会执行一次;当然如果设置空数组,那么该副作用只会在组件初次渲染时执行一次。

    注意,有时我们会需要清除副作用,例如,定时器,useEffect的回调函数接受一个返回值,这个返回值是一个函数,在这个函数中我们可以执行清除副作用操作,上例中,如果不清除定时器,那么副作用每执行一次,就会产生一个新的定时器,造成内存溢出。

3)useCallback

    用于缓存函数,第一个参数为要缓存的函数,第二个参数为依赖项数组,如果依赖发生了变化,那么就会生成一个新的函数;否则当组件重新渲染时,不会重新定义这个函数,而是会取缓存。

4)useMemo

    用于缓存函数的返回值,第一个参数为要缓存的函数(注意实际被缓存的是函数被执行过后的值),第二个参数为依赖项数组,如果依赖发生了变化,那么就会重新执行这个函数,得到新的返回值;否则当组件重新渲染时,不会重新执行这个函数,而是直接取被缓存的该函数的返回值。

    useCallback,useMemo都是用作优化函数式组件性能的