react Hooks系列笔记

崇文
274 阅读4分钟

react Hooks都有些什么？分别有什么作用

  • useState:用于在函数组件中添加 state 状态。
  • useEffect: 用于处理函数组件中的副作用操作，如数据获取、DOM 操作等
  • useMemo: 用于缓存计算结果，避免不必要的重复计算。
  • useRef: 用于在函数组件中创建一个可变的引用，并在每次渲染之间保持其稳定性。
  • useReducer: 用于使用 reducer 在函数组件中管理复杂的 state。
  • useCallback: 用于缓存回调函数，避免不必要的重新渲染
  • useContext: 用于访问 React Context API 中提供的值。
  • useLayoutEffect: 类似于 useEffect，但它会在浏览器绘制更新屏幕之前同步执行 effect。
  • uselmperativeHandle: 用于在父组件中访问子组件的实例方法。
  • useDebugValue: 用于在 React Developer Tools 中为自定义 Hook 提供更好的错误提示.

先写常用的Hooks

一、useState初始化

useState (initialState)的第一个参数是初始状态。 返回的数组有两项:当前状态和状态更新函数，使用 setState(更新值)来更新状态值 基本用法一：

const [state,setState]=useState(值) // 返回一个state，以及更新state的函数

示例：

function App() {
    const [state,setState]=useState(0)
    const click=()=>{
        setState(state+1) //点击一次+1
    }
    return (
      <>
        <Button onClick={click}>点击</Button>
      </>
    );
  }
export default App;

如果需要根据先前的状态更新状态使用
基本用法二：

setState( preValue => {
       preValue //上一次的值
       return 值
  }) // 返回一个state，以及更新state的函数

useState总结

1. useState 有2种初始化的方式 
第一种 useState(值) 
第二种 useState(() => { 
  写逻辑 
  return 值 
})

2. useState 全都是异步的
修改完以后 如果想立刻获取上一次的值 可以使用 useState的 set方法 接收一个回调函数
setX(pre => {
  // pre 就是上一的值
  return pre
})

3. useState 为什么要做成异步的? 
如果是同步, 比如我连续调用5次, 页面就会刷新5次, 浪费性能, 所以把它做成异步的, 对同一个值进行多次 setState, setState 
的批量更新策略会对其进行覆盖 取最后一次的执行结果, 如果是同时 setState 多个不同的值, 在更新时会对其进行合并批量更新

二、useMemo

useMemo接收两个参数，分别是函数和一个数组（实际上是依赖），函数里return 函数,数组内存放依赖,使用方法与useEffect类似

举个例子，未写useMemo的：

import React, { useMemo, useState } from 'react';
import { Button } from 'antd';

function Memo() {
    const [count, setCount] = useState(0);
    
    const fn = () => {
        console.log('执行了');
        let num = 0;
        for (let i = 0; i < x; i++) {
            num += i;
        }
        return num;
    };
    
  const onClick = () => {
    setCount(count + 1);
  };
  return (
    <div>
      <h1>num:{fn}</h1>
      <h1>count:{count}</h1>
      <Button onClick={onClick}>点击</Button>
    </div>
  );
}
export default Memo;

第一次执行结果 fn=49995000
没有useMemo的情况下 点击按钮 执行一次 fn就跟着执行一次 特别浪费性能

正确的使用：

  const [x, setX] = useState(10000);
  const fn = useMemo(() => {
    console.log('执行了');
    let num = 0;
    for (let i = 0; i < x; i++) {
      num += i;
    }
    return num;
  }, [x]);
  
   const onClick = () => {
    setX(x + 1);
  };
  
   return (
    <div>
      <h1>num:{fn}</h1>
      <h1>count:{x}</h1>
      <Button onClick={onClick}>点击X</Button>
    </div>
  );

再次点击时useMemo监听x ----当 x 有变化就会重新继续执行fn函数

useMemo总结

useMemo 有2个参数 一个回调函数 一个依赖
回调函数里必须有 返回值, useMemo 的特性是 缓存 return 出来的值
如果依赖为空 useMemo 缓存的值永远不会改变
如果依赖改变 缓存的值会重新发生改变

useMemo例子

WVQNYYR`(QA17BKXP5V0_NB.jpg

三、useCallback

用法: useCallback 有2个参数 第一个参数是一个回调函数 第二个参数是一个依赖, useCallback缓存一个函数 依赖为空 
缓存的函数不会改变 依赖改变 缓存的函数就跟着改变

useCallback例子

![53X]0~(I_@533_YUOSP(LOH.png](p1-juejin.byteimg.com/tos-cn-i-k3…?)

四、useEffect

1、eEffect() 是 React 16.8 引入的一个 Hook，它用于处理函数式组件中的生命周期函数。
2、副作用指的是会对应用程序状态产生影响的任何操作。例如：修改DOM、发起网络请求等。
3、useEffect() 可以让你在函数组件中执行副作用操作，而无需使用类组件中的生命周期方法。它接受两个参数：回调函数和依赖项数组。
(3.1)、回调函数：这个函数会在每次组件渲染完成后执行。在这个函数中，你可以执行任何副作用操作，例如修改DOM或发起网络请求。
(3.2)依赖项数组：这个数组是可选的，包含了所有的依赖项。当依赖项发生变化时（即数组中的元素发生变化），React 将重新运行这个 useEffect 回调函数。如果不传递这个数组，那么每次组件渲染都会执行这个回调函数。

五、useRef

首先 const ref = useRef(可以给一个默认值), useRef 返回一个对象 这个对象的指针 不会改变 1. 可以获取DOM 节点 <div ref="ref" />
2. 可以获取上一次的值

useRef 例子

![HV8}K}XXT2K]U{AEQP4JUL.png

avatar
文章
阅读
粉丝