本文共 3350 字，大约阅读时间需要 11 分钟。

React Hook 绅士总结

作为一名前端开发工程师，我最近对 React 的新特性有了深入了解，特别是与 React Hooks 相关的内容。在一次组内分享中，前端开发小伙伴们讨论了 React 的钩子（Hooks），我也尝试对这些新特性进行理解和总结，希望能为更多的同学提供帮助。

常用的几个 React Hooks

React 官方提供了一系列内置的钩子，我们可以通过这些钩子来简化组件逻辑，提高开发效率。以下是几个最常用的钩子及其使用方法。

useState 状态钩子

useState 是最常用的钩子之一，用于管理组件的状态数据。通过 useState，我们可以在组件中声明变量，并根据变量的变化重新渲染组件。

例如，可以通过 useState 实现一个简单的计数器：

const [count, setCount] = useState(0);return (  <>    
{count}
     setCount(count + 1)}>加1  );

在 TypeScript 中，useState 会根据初始值自动推断变量类型。如果需要自定义类型，可以在 useState 后面传入类型信息：

const [count, setCount] = useState
   
    (null);
   

需要注意的是，useState 会在每次更新时替换整个状态对象。如果你只想修改状态对象中的某个字段，可以在之前的状态基础上合并新值：

const [person, setPerson] = useState({  name: 'wenzi',  age: 20,  score: 89});// 合并前置状态setPerson(prev => ({  ...prev,  score: 98}));

如果是在 function 组件中使用 useState，需要自己合并数据，否则会导致字段丢失。

useEffect 副作用钩子

useEffect 用于在组件的生命周期中执行副作用操作，比如数据绑定、定时器设置等。它可以看作是组件生命周期方法的替代品。

useEffect 接收两个参数：回调函数和依赖项数组。回调函数在组件初始化时和每次渲染时都会执行。如果需要在特定条件下执行副作用，可以传入依赖项数组。

例如，可以通过 useEffect 实现窗口大小的动态调整：

const useWinResize = () => {  const [size, setSize] = useState({    width: document.documentElement.clientWidth,    height: document.documentElement.clientHeight  });  const resize = useCallback(() => {    setSize({      width: document.documentElement.clientWidth,      height: document.documentElement.clientHeight    });  }, []);  useEffect(() => {    window.addEventListener('resize', resize);    return () => {      window.removeEventListener('resize', resize);    };  }, [resize]);  return size;};

useMemo 和 useCallback

useMemo 用于优化性能，避免在每次渲染时重复计算复杂的值。useCallback 则用于优化方法或回调函数，防止在每次渲染时重新创建新函数实例。

例如，可以通过 useMemo 来优化一个计算函数：

const sum = useMemo(() => {  const tempSum = (1 + count) * count / 2;  return `${tempSum}, ${Math.random()}`;}, [count]);

useCallback 的使用场景包括防止闭包变量的频繁重渲染：

const fn = useCallback(() => {  // 假设 fn 内部依赖 count 变量}, [count]);

自定义 Hooks 实现

除了官方提供的内置钩子，我们还可以根据项目需求自定义自己的 Hooks。以下是两个常见的自定义 Hooks 实现示例。

获取窗口变化的宽高

通过监听 resize 事件，可以实时获取窗口的宽高。我们可以将这个逻辑封装成一个自定义 Hook：

const useWinResize = () => {  const [size, setSize] = useState({    width: document.documentElement.clientWidth,    height: document.documentElement.clientHeight  });  const resize = useCallback(() => {    setSize({      width: document.documentElement.clientWidth,      height: document.documentElement.clientHeight    });  }, []);  useEffect(() => {    window.addEventListener('resize', resize);    return () => {      window.removeEventListener('resize', resize);    };  }, [resize]);  return size;};

使用方式：

const Home = () => {  const { width, height } = useWinResize();  return (    
   
      
    
宽度: {width}
      
    
高度: {height}
    
   
  );};

定时器 Hook

在 React 中使用定时器时，需要在组件生命周期中正确清除定时器。自定义一个定时器 Hook，可以更方便地控制定时器的周期：

const useInterval = (callback, delay) => {  const saveCallback = useRef();  useEffect(() => {    saveCallback.current = callback;  });  useEffect(() => {    const tick = () => saveCallback.current();    if (delay !== null) {      let id = setInterval(tick, delay);      return () => clearInterval(id);    }  }, [delay]);  return null;};

使用方式：

const Home = () => {  const [count, setCount] = useState(0);  useInterval(() => {    setCount(count + 1);  }, 500);  return (    
   
      
    
当前计数: {count}
    
   
  );};

总结

通过学习 React Hooks，我们可以更高效地管理组件的状态和副作用，优化组件性能。这些 Hooks 的结合使用可以显著提升代码的可读性和可维护性。在实际项目中，可以根据需求合理组合这些 Hooks，甚至自定义自己的 Hooks 来解决特定的业务逻辑问题。

转载地址：http://dlvbz.baihongyu.com/