前言
React Hooks 是 React 16.8 版本引入的一个特性，它允许你在函数组件中使用状态和其他 React 特性。
hooks 引入一个不受函数组件重复执行影响的外部变量作为组件内的状态，当状态变更时，函数组件会重新渲染页面。
React hooks 解决的问题
- 使状态逻辑的重用变的简单可行
- 解决代码分割困难的问题
- 告别难以理解的类组件
- 提高对 React 新特性的适应性
Hook 的规则
- Hook 应该在组件的顶层或自定义Hook中调用
- 不要在循环、条件语句、嵌套函数中调用 Hook
- 不要在类组件中调用 Hook
下面是一些常用的 React Hooks 的基本使用方法。
- useState()
- useEffect()
- useRef()
useState
useState 是最基本的 Hook，它允许你向组件添加一个 状态变量。
const [state, setState] = useState(initialValue);
state 是一个状态变量，setState 是用于修改状态的 Setter 函数，当 state 改变了，该组件会重新渲染，而 initialValue 则是状态的初始值。
计时器
import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
// 写法一：定义handleClick方法
function handleClick() {
// 更新 count
setCount(count + 1);
}
return (
<button onClick={handleClick}>
You pressed me {count} times
</button>
);
// 写法二：使用箭头函数
return (
<button onClick={() => setCount(count + 1)}>
You pressed me {count} times
</button>
);
}
写法二 这样写会报错
// 应该要点击后才调用,如果没有箭头函数会在页面加载时立即调用,就会触发一个setState动作，组件就会无限重新渲染
<button onClick={setCount(count + 1)}>You pressed me {count} times
</button>
目前，在事件处理函数内部的 setState 是异步的。调用setState，组件的state并不会立即改变。
所以不要依赖当前的state，计算下个state。
如何更新那些依赖于当前的 state 的 state 呢？ 可以给 setState 传递一个函数，而不是一个对象，就可以确保每次调用的都是最新版的 state。
更新 state 中的对象
更新 state 中的对象时，我们需要创建一个新的对象，然后将 state 更新为此对象。而不应该直接修改存放在 React state 中的对象。
obj.x = 10; // 🚩 错误：直接修改现有的对象
setObj(obj); // 🚩 不会触发渲染
// ✅ 正确：创建一个新对象
setObj({
...obj,
x: 10
});
useEffect
用来执行一段和当前渲染无关的副作用代码，可用于弥补函数组件没有生命周期的缺陷。
useEffect(setup, dependencies?)
- setup：处理 Effect 的函数（例如数据获取、设置/销毁定时器、异步请求等）。setup 函数选择性返回一个清理函数（cleanup）
- 可选 dependencies（依赖项）：setup 代码中引用的所有响应式值的列表。响应式值包括 props、state 以及所有直接在组件内部声明的变量和函数。
React 会在每次渲染后都运行 Effect，而依赖数组就是用来控制是否触发 Effect，从而能够减少不必要的计算，优化性能。
useEffect(() => {
const intervalId = setInterval(doSomething(), 1000);
// useEffect()允许返回一个函数，在组件卸载时，执行该函数，清理副效应
return () => clearInterval(intervalId);
});
useEffect 可以模拟类组件的生命周期：componentDidMount、componentDidUpdate 和 componentWillUnmount
React useEffect 使用指南 - 掘金 (juejin.cn)
useRef
useRef 可以用来获取元素，缓存状态，设置初始值 initState，返回一个 ref 对象。
const ref = useRef(initialValue)
- initialValue：ref 对象的
current属性的初始值
在 React 中，ref（引用）是一个特殊的属性，它允许你直接访问 DOM 元素或组件实例。改变 ref 不会触发重新渲染，所以 ref 适合用来保存跨渲染周期的数据。
使用 ref 操作 DOM
import { useRef } from 'react';
const inputRef = useRef(null);
<input ref={inputRef} type="text" />
要访问该 ref 的值，需要通过 ref.current 属性
myRef.current.scrollIntoView();
总结
本文是我在学习react hooks时记录再加以整理的，希望对你有所帮助。
