- Objective:
- Breadcrumb:
# 概念阐释
hooks 是 React 组件中的一系列功能。可以使用内置 hooks，也可以创建hooks。React Hooks 是专门设计用于函数组件的，它们本身是JavaScript函数。
内置 hooks 包括：
- [[React Hooks useState]]
- [[Context Hooks]]
- [[Ref Hooks]]
- [[React Hooks Effect]]
- [[Performance Hooks]]
- [[Resource Hooks]]
- [[Others]]
# 实例
# 相关内容
## 相关规则
- Hooks 只能用做顶层调用
```jsx
//不要内嵌 hooks
if (userName !== '') {
useEffect(() => {
localStorage.setItem('savedUserName', userName);
});
}
// 顶层调用
useEffect(() => {
if (userName !== '') {
localStorage.setItem('savedUserName', userName);
}
});
```
- hooks 只能在 React 函数组件中使用。唯一的另一种用法是在[自定义 hooks](https://react.dev/reference/react/cache)中使用。
# 参考资料
[React Hooks](https://react.dev/reference/react/hooks)