react hooks - 技术栈

react hooks (内置的钩子)

什么是 hooks?

增强了函数组件的功能。

在没有 hooks 时，函数组件是没有状态、生命周期、ref 等。通过 hooks 使函数组件也具有这些能力。

在没有 hooks 时，函数组件是缺少部分功能的，只有 class 类组件才拥有这些功能。因此函数组件性能更优，更符合 React 的设计，所以要尽可能的用函数组件。

useState

用于定义响应式变量，和改变变量的方式,可以在数据更新时更新页面。

只要 state 发生变化,函数组件会重新渲染。而且会递归的渲染子组件，也会重新渲染。

jsx 复制代码

import { useState } from 'react';

function Example() {
    const [count, setCount] = useState(0);
    const increment = () => {
        setCount(count => count+1)
    }
    return <>
        <h1>{count}</h1>
        <button onClick={increment}>
            +
        </button>
        <button onClick={() => {setCount(666)}}>
            set count = 666
        </button>
    </>
}

useMemo

核心是缓存计算值，对于多次重复使用计算值的情况，对应用进行性能优化。

针对那些特别昂贵的计算。

如果依赖数组传入空数组，函数只调用一次。也就是只会计算一次结果，之后的值都来自缓存。

jsx 复制代码

import React, { useMemo } from 'react';
        
function MyComponent({ a, b }) {
  const expensive = useMemo(() => {
    let sum = 0;
    for (let i = 0; i < a; i++) {
      sum += 1;
      console.log(sum);
    }
    return [sum];
  }, [a]);              
  console.log("组件渲染完成！");
  return <h1>{expensive}</h1>;
}

useEffect

用于处理组件中的副作用（如数据获取、订阅、手动修改 DOM 等）