useState
- 在函数组件中,我们没有 this 不能分配或读取 this.state
- 可以使用 useState 来使用state
- useState 接受初始state值 为参数
- useState 返回当前 state 以及更新 state 的函数
- 一般来说,在函数退出后变量就就会”消失”,而 state 中的变量会被 React 保留
useEffect
- useEffect 可以在组件渲染后实现各种不同的副作用
- useEffect 在每次渲染之后执行
- useEffect 可以return 一个 clean函数 清除上一个 副作用
- useEffect 通过第二个参数是否变化,判定是否需要执行改effect函数
hook 使用规则
- 只在最顶层使用 Hook 不要在循环,条件或嵌套函数中调用 Hook
- 只在 React 函数中调用 Hook 不要在普通的 JavaScript 函数中调用 Hook
React 怎么知道哪个 state 对应哪个 useState?答案是 React 靠的是 Hook 调用的顺序 所以有规则一
- 如果我们想要有条件地执行一个 effect,可以将判断放到 Hook 的内部:
useEffect(function persistForm() {
// 👍 将条件判断放置在 effect 中
if (name !== '') {
localStorage.setItem('formData', name);
}
});