携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第10天，点击查看活动详情
前言
大家好呀，我是L同学。在上篇文章react笔记（九）—— useState基本使用中，我们学习了useState基本使用、useState状态的读取和修改、useState组件的更新过程等相关知识点。在本篇文章中，我们将学习到useState使用规则、useEffect副作用介绍、useEffect基本使用、useEffect依赖等相关知识点。
useState-使用规则
如何为函数组件提供多个状态？调用 useState Hook 多次即可，每调用一次 useState Hook 可以提供一个状态。useState Hook 多次调用返回的 [state, setState] 相互之间，互不影响。
useState的使用规则:
- React Hooks 只能直接出现在 函数组件 中
- react Hooks不能嵌套在 if/for/其他函数中
- React 是按照 Hooks 的调用顺序来识别每一个 Hook，如果每次调用的顺序不同，导致 React 无法知道是哪一个 Hook
useEffect-副作用介绍
当你想要在函数组件中，处理副作用（side effect）时，就要使用 useEffect Hook 了。useEffect的作用是处理函数组件中的副作用（side effect）。
在计算机科学中，如果一个函数或其他操作修改了其局部环境之外的状态变量值，那么它就被称为有副作用。副作用是相对于主作用来说的，一个功能（比如，函数）除了主作用，其他的作用就是副作用。对于 React 组件来说，主作用就是根据数据（state/props）渲染 UI，除此之外都是副作用（比如，手动修改 DOM）。
常见的副作用（side effect）：数据（Ajax）请求、手动修改 DOM、localStorage 操作等。
useEffect-基本使用
在实际开发中，副作用是不可避免的。因此，react 专门提供了 useEffect Hook 来处理函数组件中的副作用。
参数：回调函数（称为 effect），就是在该函数中写副作用代码
执行时机：该 effect 会在组件渲染后以及组件更新后执行，相当于componentDidMount + componentDidUpdate。
import { useEffect } from 'react'
useEffect(function effect() {
document.title = `当前已点击 ${count} 次`
})
useEffect(() => {
document.title = `当前已点击 ${count} 次`
})
useEffect-依赖
如果组件中有另外一个状态，另一个状态更新时，刚刚的 effect 回调，也会执行。默认情况下，useEffect的回调函数只要当函数的状态发生更新，都会执行。所以，需要优化的是，跳过不必要的执行，只在 count 变化时，才执行相应的 effect。
- 第二个参数：可选的，可省略；也可以传一个数组，数组中的元素可以成为依赖项（deps）
- 该示例中表示：只有当 count 改变时，才会重新执行该 effect
useEffect(() => {
document.title = `当前已点击 ${count} 次`
}, [count])
