当前位置：首页 > news >正文

react hooks

news 2025/10/12 8:28:34

react hooks (内置的钩子)

什么是 hooks?
增强了函数组件的功能。
在没有 hooks 时，函数组件是没有状态、生命周期、ref 等。通过 hooks 使函数组件也具有这些能力。
在没有 hooks 时，函数组件是缺少部分功能的，只有 class 类组件才拥有这些功能。因此函数组件性能更优，更符合 React 的设计，所以要尽可能的用函数组件。

useState

用于定义响应式变量，和改变变量的方式,可以在数据更新时更新页面。
只要 state 发生变化,函数组件会重新渲染。而且会递归的渲染子组件，也会重新渲染。

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

核心是缓存计算值，对于多次重复使用计算值的情况，对应用进行性能优化。
针对那些特别昂贵的计算。
如果依赖数组传入空数组，函数只调用一次。也就是只会计算一次结果，之后的值都来自缓存。

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>;
}