深度解锁React Hook 常用Api

最新推荐文章于 2023-03-06 11:41:03 发布

一贱你就笑～

最新推荐文章于 2023-03-06 11:41:03 发布

阅读量360

点赞数

文章标签：前端 react.js

本文链接：https://blog.csdn.net/qq_38629292/article/details/125801301

版权

前言：HOOK作为React16.8的新增特性，相信绝大多数react开发者都已经了解或者上手过。本文希望通过对这些常用API的使用案例说明，和大家一起去深度解锁HOOK。

1、useState

const [state, setState] = useState(initState);

1.1、以上语句大家需要理解下，useState的返回值实际上是一个长度为2的数组，所以下面的写法也是可以的，只是为了代码的简洁性而使用了数组的解构赋值。

const fruitStateVariable = useState('banana'); // 返回一个有两个元素的数组
const fruit = fruitStateVariable[0]; // 数组里的第一个值
const setFruit = fruitStateVariable[1]; // 数组里的第二个值

注：所以参考useState的返回值，有时候我们在写公用方法的返回值时，Object在某些时候不一定是首选项，实际上数组更方便使用者去自定义接收的变量名。

1.2、在定时器或者接口的回调函数中，有时候受制于闭包环境的影响，我们无法去获取到state的最新状态。实际上在setState这个更新函数中，允许接收一个函数，这个函数的入参就是最新的state。

const [count, setCount] = useState(0);
useEffect(() => {
  setInterval(() => {
    setCount(c => c + 1); // 此处的c就是最新的count
  }, 1000);
}, []);

注：此处定时器的清除我们放在useEffect（2.1）里单独讲解。

1.3、initState在常见场景下，我们通常作为state的初始值来使用，当state的初始值过于复杂时，我们可能会依赖函数去处理。而这时候其实你应该明白，useState并非只能接收基础类型的数据，而且也支持函数的接收。

// 错误：
const initState = () => {
  //...
  return '';
};
const [state, setState] = useState(initState());
// 正确：
const [state, setState] = useState(initState);

注：错误示例中，useState接收的是initState函数返回的值，这样的写法会在组件每次更新（state或props更新时）都会触发initState函数的执行。正确的写法是在useState里传入函数，在这个函数里做复杂计算后返回你需要的初始值。

2、useEffect

componentDidMount, componentDidUpdate, componentWillUnmount：useEffect Hook 可以表达所有这些(包括不那么常见的场景)的组合。

getSnapshotBeforeUpdate，componentDidCatch 以及 getDerivedStateFromError：目前还没有这些方法的 Hook 等价写法，但很快会被添加。

useEffect(() => {
  //...
  return () => {
      //...
  }
}, []);

2.1、useEffect的第一个参数为函数，每次useEffect触发时会执行这个函数，在这个函数中支持return出一个函数，通常我们会在这个副作用来模拟componentWillUnmount，⚠️但是请注意：这时候你应该用useEffect的第二个参数传入空数组去配合。

// 错误：
const ref = useRef();
const [count, setCount] = useState(0);
useEffect(() => {
  ref.current = setTimeout(() => setCount(c => c + 1), 1000);
  return () => {
      // 此处在每次count更新后都会触发执行
    clearTimeout(ref.current)
  };
}, [count]);
// 正确：
const ref = useRef();
const [count, setCount] = useState(0);
useEffect(() => {
  ref.current = setTimeout(() => setCount(c => c + 1), 1000);
}, [count]);
useEffect(() => {
  return () => {
      // 此处仅在组件销毁前执行
    clearTimeout(ref.current)
  };
}, []);

注：此处仅仅为demo需要，正常开发中setTimeout换成setInterval效果更佳。
参考如下：

const ref = useRef();
const [count, setCount] = useState(0);
useEffect(() => {
  ref.current = setInterval(() => setCount(c => c + 1), 1000);
  return () => {
    clearInterval(ref.current)
  };
}, []);

2.2、useEffect的第二个参数为非必填值数组。当第二个参数不传时，组件每次更新（state或props更新时）都会触发第一个入参函数的执行，effect内部的props和state也会随之更新。

useEffect(() => {
  // 此处在组件每次更新（state或props更新时）都会触发执行
  // ...
});

2.3、当第二个参数传入空数组时，仅在组件挂载后触发第一个入参函数的执行，而且effect内部的props和state就会一直持有其初始值。

useEffect(() => {
  // 此处仅在组件挂载后触发执行
  // ...
}, []);

2.4、当第二个参数传入非空数组时，组件挂载后和数组内部参数更新后都会触发第一个入参函数的执行，且effect内部的props和state会随着监听值变化而更新。

const ref = useRef();
const [count, setCount] = useState(0);
useEffect(() => {
  // 每次count更新后，都会再次触发执行
  ref.current = setTimeout(() => setCount(c => c + 1), 1000);
}, [count]);

注：实际上，useEffect的第二个参数数组的每项中，支持对Object的监听。这样在实际开发中，我们可以对部分关联性较强的state做统一化处理：

const [payload, setPayload] = useState({
  searchKey: undefined,
  type: undefined,
  pageIndex: 1,
  pageSize: 10,
  // ...
});
useEffect(() => {
  dispatch({ type: 'xxx', payload });
}, [payload]);
// 为了方便payload状态的更新，我们可以这样：
const updatePayload = (data) => setPayload((d) => ({ ...d, ...data }));

注：当state的状态过于复杂且包含多个值时，建议使用useReducer。

3、useRef

const ref = useRef(initialValue);

3.1、useRef返回一个可变的ref对象，其.current属性则为初始化时传入的参数initialValue。通常我们会用其获取dom元素，但是由于其内置属性.current是一个可变值的“盒子”，利用其整个生命周期都持续存在的特性，可以实现在class函数中this.timer的写法去保存某些值。（比如：定时器的序号）

const ref = useRef();
const [count, setCount] = useState(0);
useEffect(() => {
  ref.current = setInterval(() => setCount(c => c + 1), 1000);
  return () => {
    clearInterval(ref.current)
  };
}, []);