# React Hooks
Hooks 让函数组件拥有状态、生命周期、副作用、性能优化等能力
本质：把 class 组件能力函数化 Hooks 不是语法糖，而是 React 的函数式编程的实践
# 为什么要使用 Hooks
# Class 组件的问题
Class
- 生命周期分散、复杂
this易出错- 逻辑复用依赖 HOC / Render Props（嵌套深）
- 状态与副作用耦合严重
# Hooks 的优势
Hooks
- 无
this - 逻辑内聚（相关逻辑写在一起）
- 易复用（自定义 Hook）
- 更贴近函数式编程
# Hooks 使用规则（铁律）
# 只能在最外层调用 Hook
TIP
不能在if条件、for循环、while循环、普通js函数中调用Hook
# Hooks 调用顺序必须一致
TIP
React 通过Hooks的 调用顺序 关联 state
# 核心 Hooks
# useState
useState
状态管理hook。 更新状态会触发页面重新渲染。 setState 是异步、批量的。
const [state, setState] = useState(initialValue);
// 推荐
setCount(prev => prev + 1);
// 不推荐
setCount(count + 1); // 闭包旧值风险
# useEffect
useEffect
副作用管理（生命周期合体）hook。 不同依赖含义：
不传：每次 render 执行[]: 只在页面挂载完之后执行(componentDidMount)[count]: 依赖更新时执行
# useRef
useRef
返回最新对象而且不触发重新渲染。 比如存储定时器ID、避免闭包陷阱或访问DOM元素，因为它不参与 React 的状态更新机制，直接读取 .current 属性总能获取最新值
const ref = useRef(initialValue);
ref.current = value;
# useMemo
useMemo
缓存计算数据hook 当计算开销大、依赖变化少时才使用（即算的慢，才memo），不然会起到优化反作用，
# useCallback
useCallback
缓存函数引用hook 保证函数引用稳定，避免子组件不必要的重新渲染，常与React.memo 配合使用
# useContext
useContext
跨组件共享状态 为了解决props drilling问题，注意context更新会导致所有消费者组件更新。
const value = useContext(MyContext);