当前位置: 代码迷 >> 综合 >> React-Hooks-学习-02-4个常用hooks
  详细解决方案

React-Hooks-学习-02-4个常用hooks

热度:73   发布时间:2023-10-18 16:56:38.0

Hooks的使用规则:

  1. 只能在组件的顶级作用域使用,且在组件的多次渲染之间必须按顺序执行。

    1. 即不能在循环、条件判断、嵌套里面使用
    2. 即所有hook必须执行到,且按顺序
  2. 只能在函数组件或其他hooks中使用。

4个常用的内置hooks:

  1. useCallback

    1. useCallback(fn, deps) 相当于 useMemo(() => fn, deps)

    2. 该回调函数仅在某个依赖项改变时才会更新

  2. useMemo

  3. useRef

  4. useContext


  • useCallback

    • 缓存回调函数

在React函数组件中,每一次UI的变化,都是通过重新执行整个函数来完成的,这与传统的Class组件有很大的不同:函数组件中没有一个直接的方式来保存回调函数,在多次渲染之间维持一个状态

function Counter() {const [count, setCount] = useState(0);const handleIncrement = () => setCount(count + 1);// ...return <button onClick={handleIncrement}>+</button>
}

对应Counter组件,每次变化时都会重新生成一个handleIncrement函数,这也意味着即使count没有发生变化,每次父组件UI变化都会重新生成handleIncrement函数,导致接收事件处理函数的子组件<button>的props发生改变,也重新渲染。

使用useCallback解决:

function Counter() {const [count, setCount] = useState(0)const handleIncrement = useCallback(() => {setCount(count + 1)}, [count] // 只有当count发生变化时,才会重新创建回调函数) return <button onClick={handleIncrement}>+</button>
}

  • useMemo

    • 缓存计算的结果 
      • 要return 一个 结果
      • 使用场景:某个数据是需要通过其他数据计算得到的,那么只有当用到的数据,即依赖的数据发生变化时,才应该需要重新计算

      • 这里的fn是产生所需数据的一个计算函数

      • 通常来说,fn会使用deps中声明的一些变量来计算得到结果

useMemo(fn, deps)

其实useCallback的功能能够使用useMemo来实现:

const myEventHandler = useMemo(() => {// 返回一个函数作为缓存结果return () => {// 在这里进行事件处理}}, [dep1, dep2]);

-举个例子:对于一个显示用户信息的列表,现在需要对用户名进行搜索,且UI上需要根据搜索关键字显示过滤后的用户,那么这样一个功能需要2个状态:

  1. 用户列表数据本身:来自某个请求

  2. 搜索关键字:用户在搜索框输入的数据

-无论是两个数据中的哪一个发生变化,都需要过滤用户列表以获取需要展示的数据。


  • useRef

    • 同一个组件中在多次渲染之间共享数据
    • 可以把useRef看作是在函数组件之外创建的一个容器空间
    • 在这个容器上可以通过唯一的current属性设置一个值,从而在函数组件的多次渲染之间共享这个值
    • 使用useRef保存的数据一般是和UI的渲染无关的,因此当ref的值发生变化,是不会触发组件重新渲染,这也是区别于useState的地方
  • 用处有:

    • 存储跨渲染的数据(即和渲染无关的数据,如timer)
    • 保存某个DOM节点的引用

思考:useState 其实也是能够在组件的多次渲染之间共享数据的,那么在 useRef 的计时器例子中,我们能否用 state 去保存 window.setInterval() 返回的 timer 呢?

答:只有需要触发 UI 更新的状态才需要放到 state 里。这里的 timer 其实只是临时存放一个变量,无需用 state 保存。否则会造成不必要的渲染。


  • useContext

    • 定义全局状态

  相关解决方案