react hooks

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