React Hooks、useState、useEffect 、react函数状态

Hooks

Hooks 概念理解

学习目标： 理解 Hooks 的概念及解决的问题

1. 什么是 hooks

   hooks 的本质： 一套能够使函数组件更强大、更灵活的（钩子）

React 体系里组件分为类组件和函数组件
多年使用发现，函数组件是一个更加匹配 React 的设计理念UI = f(date),也更加有利于逻辑拆分与重用的组件表达形式，而先前组件是不可以有自己的状态的。为了让函数组件可以拥有自己的状态，所以从 react v16.8 开始，加入了 hooks
注意点：

1. 有了 Hooks 之后，为了兼容老版本，class 类组件并没有被移除，两者都可以使用
2. 有了 Hooks 之后，不能在把函数成为无状态组件了，因为 Hooks 为函数组件提供了状态
3. Hooks 只能在函数组件中使用
4. Hooks 解决了什么问题
   Hooks 的出现解决了两个问题 1.组件的逻辑复用
5. 组件逻辑复用
   在 Hooks 出现之前，react 先后尝试了 mixin 混入、HOC 高阶组件、render-props 等模式但是都有各自的问题，比如 mixin 的数据来源不清、高阶组件的嵌套问题等
6. class 组件自身的问题
   class 组件过于厚重，大而全，提供了很多东西，有很高的学习成本，比如繁多的生命周期、this 指向问题等，而更多时候需要轻快的使用组件
7. Hooks 优势
8. 告别那一理解的 class
9. 解决业务逻辑难以拆分的问题
10. 使状态逻辑复用变的简单
11. 函数组件在设计思想上与 react 的理念契合

useState

1. 基础使用
   学习目标： 能够学会 useState 的基础用法
   作用： useState 为函数组件提供状态（state）
   使用步骤：
2. 导入useState函数
3. 调用useState函数，并传入状态初始值
4. 从useState函数的返回值中，拿到状态和修改状态的方法
5. 在 JSX 中展示状态
6. 调用修改状态的方法更新状态
   代码实现：

import { useState } from 'react'
function App() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>{count}</button>
    </div>
  )
}
export default App
1
2
3
4
5
6
7
8
9
10

状态读取和修改

const [count, setCount] = useState(0) // 解构赋值 useState 返回值是一个数组

1. useState 传过来的参数 作为 count 的初始值
2. [count, setCount] 名字可以自定义保持语义化顺序不可以变 第一个参数是数据状态 第二个参数是修改数据的方法
3. setCount 函数用来修改 count 依旧保持不能直接修改原值还是生成一个新值替换原值 setCount(基于运算得到的新值)
4. count 和 setCount 是一对 是绑在一起的 setCount 只能用来修改对应的 count 值

组件的更新过程

学习目标： 能够理解使用 Hooks 之后组件的更新状态
函数组件使用 useState hook 后的执行过程，以及状态值的变化

• 组件第一次渲染
  1. 从头开始执行该组件中的代码逻辑
  2. 调用useState(0)将传入参数作为状态初始值，即：0
  3. 渲染组件，此时，获取到的状态 count 值为：0
• 组件第二次渲染 1. 点击按钮，调用setCount(count +1)修改状态，因为状态发生改变，所以该组件会重新渲染 2. 组件重新渲染时，会再次执行组件中的代码逻辑 3. 再次调用setCount(0),此时 React 内部会拿到最新的状态值而非初始值 4. 再次渲染组件时获取到的状态 count 值为：1
  注意：useState 的初始值只有在组件第一次渲染时生效，以后的每一次渲染，useState 获取到的都是最新的状态值

使用规则

学习目标： 能够记住 useState 的使用规则

1. useState函数可以执行多次，每次执行互相独立，每调用一次为函数组件提供一个状态

function List() {
  // 字符串状态值
  const [name, setName] = useState('cp')
  // 数组状态值
  const [list, setList] = useState([])
}
1
2
3
4
5
6

2. useState 注意事项
3. 只能出现在函数组件中
4. 不能嵌套在 if、for、其他函数中（react 按照 hooks 的调用顺序识别每一个 hook）

let num = 1
function List() {
  num++
  if (num / 2 === 0) {
    const [name, setName] = useState('cp')
  }
  const [list, setList] = useState([])
}
// 两个hook的顺序不是固定的，这是不可以的
1
2
3
4
5
6
7
8
9

3. 可以通过开发者工具查看 hooks 状态
   代码示例：

import { useState } from 'react'
function App() {
  const [count, setCount] = useState(0)
  const [show, setShow] = useState(false)
  const [list, setList] = useState([])
  function test() {
    setShow(!show)
    setList([1, 2, 3, 4])
    console.log(show, list)
  }
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>count:{count}</button>
      <button onClick={test}>
        show:{show ? 'true' : 'false'}---list:{list}
      </button>
    </div>
  )
}
export default App
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

useEffect 函数

基础使用

1. 理解函数副作用
   学习目标： 能够理解函数副作用的概念
   什么是函数副作用:
   副作用是相对于主作用来说的，一个函数除了主作用，其他的作用就是副作用，对于 React 组件来说主作用是根据数据（state\props）渲染 UI，除此之外都是副作用（比如，手动修改 DOM）
   常见副作用:
2. 数据请求 ajax
3. 手动修改 DOM
4. localstorage 操作

   useEffect 函数的作用就是为 React 函数组件提供副作用处理

5. 基础使用
   学习目标： 能够学会 useEffect 的基础用法并且掌握默认的执行时机
   作用 为 React 函数组件提供副作用处理
   使用步骤：
6. 导入useEffect函数
7. 调用useEffect函数，并传入回调函数
8. 在回调函数中编写副作用处理（DOM 操作）

import { useState, useEffect } from 'react'
function App() {
  const [count, setCount] = useState(0)
  useEffect(() => {
    document.title = count
  })
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>count:{count}</button>
    </div>
  )
}
export default App
1
2
3
4
5
6
7
8
9
10
11
12
13

依赖项控制执行时机

1. 默认状态(无依赖项) 组件初始化时先执行一次 等每次数据修改更新再次执行

useEffect(() => {
  console.log('副作用执行了')
})
1
2
3

2. 添加空数组依赖项 组件只在首次渲染时执行一次 其余时间不执行

useEffect(() => {
  console.log('副作用执行了')
}, [])
1
2
3

3. 添加特定依赖项 副作用函数在首次渲染时执行，在依赖项发生变化时再次执行

import { useState, useEffect } from 'react'
function App() {
  const [count, setCount] = useState(0)
  const [name, setName] = useState('cp')

  useEffect(() => {
    console.log('副作用执行了')
    document.title = count
  }, [count, name])
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>count:{count}</button>
      <button onClick={() => setName('hs')}>name:{name}</button>
    </div>
  )
}
export default App
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

注意事项: 只要在 useEffect 回调函数中用到的数据（比如，count）就是依赖数据，就应该出现在依赖项数组中，如果不添加依赖项就会有 bug 出现