React Hooks 入门基础（详细使用）

一、简介

hooks 的本质：一套能够使函数组件更强大，更灵活的 “钩子”。
React 体系里组件分为 类组件 和 函数组件。
- 经过多年的实战，函数组件是一个更加匹配 React 的设计理念 UI = f(data)，也更有利于逻辑拆分与重用的组件表达形式，而先前的函数组件是不可以有自己的状态的，为了能让函数组件可以拥有自己的状态，所以从react v16.8 开始，Hooks 应运而生。
- 有了 hooks 之后，为了兼容老版本，class 类组件并没有被移除，俩者都可以使用。
- 有了 hooks 之后，不能在把函数成为无状态组件了，因为 hooks 为函数组件提供了状态。
- hooks 只能在函数组件或者自定义 hook 中使用，不能嵌套 在 if/for/其他函数中（react 会按照 hooks 的调用顺序识别每个 hook）。
hooks 解决了什么问题？
- 组件的逻辑复用
  
  在 hooks 出现之前，react 先后尝试了 mixins 混入，HOC 高阶组件，render-props 等模式，但是都有各自的问题，比如 mixin 的数据来源不清晰，高阶组件的嵌套问题等等
- class 组件自身的问题
  
  class 组件就像一个厚重的 战舰 一样，大而全，提供了很多东西，有不可忽视的学习成本，比如各种生命周期，this 指向问题等等，而更多时候需要的是一个轻快灵活的 快艇。
hooks 让函数组件拥有了类组件的特性，例如组件内的状态、生命周期等，常用的有：
- useState
- useEffect
- useRef 详细使用
- useContext 详细使用
- …

二、`useState` 使用

基础案例

import React, { useState } from "react";

// 函数组件
function Sub () {
  // 参数：状态初始值（传入 0 表示该状态的初始值为 0）
  // 返回值：数组（包含两个值：1、状态值（state）2、修改该状态的函数（setState））

  // 状态值名字可以自定义吗？可以自定义保持语义化
  // 返回值的顺序是否可以替换？不可以，第一个就是数据状态，第二个就是修改数据的函数

  // 组件的更新过程 与 当调用 setCount 的时更新过程：

  // 》首次渲染
  // 首次被渲染的时候，组件内部的代码会执行一次
  // 其中 useState 也会跟着执行，这里重点注意，初始值只在首次渲染时生效

  // 》更新渲染，调用 setCount 整个 app 中代码都会更新
  // 1、app 组件会再次渲染，这个函数会再次执行
  // 2、useState 再次执行，得到新的 count 值不是 0 而是修改之后的 1，模版会用新值渲染
  const [count, setCount] = useState(0)
  // 可以通过输出 count 验证
  console.log(count)

  // useState 可以执行多次
  const [list, setList] = useState([])

  // 点击方法
  function touchButton () {
    // 函数中不能写，会报错的
    // const [flag, setFlag] = useState(true)
    // + 1
    setCount(count + 1)
  }

  return (
    <button onClick={touchButton}>{count}</button>
    // <button onClick={() => setCount(count + 1)}>{count}</button>
  )
}

class App extends React.Component {
  render () {
    return (
      <div>
        <Sub></Sub>
      </div>
    )
  }
}

export default App

函数方式

import React, { useState } from "react";

function getDefaultValue () {
  // 耗时操作
  for (let index = 0; index < 20000; index++) {
  }
  // 返回结果
  return 10
}

// 函数组件
function Sub (props) {
  const [count, setCount] = useState(() => {
    // return props.count
    return getDefaultValue()
  })
  return (
    <button onClick={() => setCount(count + 1)}>{count}</button>
  )
}

class App extends React.Component {
  render () {
    return (
      <div>
        <Sub count={10}></Sub>
      </div>
    )
  }
}

export default App

二、`useEffect` 使用

理解函数副作用，什么是副作用？

副作用是相对于主作用来说的，一个函数除了主作用，其他的作用就是副作用。对于 React 组件来说，主作用就是根据数据（state/props）渲染 UI，除此之外都是副作用。
常见的副作用
- 数据请求 ajax 发送
- 手动修改 dom
- localstorage 操作
- …
- useEffect 函数的作用就是为 react 函数组件提供副作用处理的！

简单案例：

import React, { useEffect, useState } from "react";

// 函数组件
function Sub () {
  const [count, setCount] = useState(0)
  // 例如：count 的主作用就是更换按钮中的内容，但是当需要用到它的副作用时，需要在 useEffect 函数中实现它副作用效果
  useEffect(() => {
    console.log('副作用函数调用了')
    // 副作业函数会每次数据变化都执行，默认是全部属性的副作用都会调用该函数，可以指定
    // 例如：当它初始化或变化时设置为网页标题，这就是副作业
    document.title = count
  })
  return (
    // 这是 count 的主作用
    <button onClick={() => setCount(count + 1)}>{count}</button>
  )
}

class App extends React.Component {
  render () {
    return (
      <div>
        <Sub></Sub>
      </div>
    )
  }
}

export default App

添加空数组，只在组件首次渲染时执行一次

useEffect(() => {
    console.log('副作用函数调用了')
    document.title = count
}, [])

指定属性副作业执行，首次渲染时也会执行

// 函数组件
function Sub () {
  const [count, setCount] = useState(0)
  const [name, setName] = useState('dzm')
  // 指定 count/name 会有副作用回调，首次渲染也会回调
  useEffect(() => {
    console.log('副作用函数调用了')
    document.title = count
    // 此时什么时候会执行副作用函数？初始化 + count/name被修改时都会执行
  }, [count, name])
  
  // 可以写多个副作用函数
  // useEffect(() => {
  //   console.log('count 副作用函数调用了')
  // }, [count])
  // useEffect(() => {
  //   console.log('name 副作用函数调用了')
  // }, [name])
  
  return (
    <>
      <button onClick={() => setCount(count + 1)}>{count}</button>
      <button onClick={() => setName('test')}>{name}</button>
    </>
  )
}

注意：useEffect 回调函数中用到的数据（比如: count），也就是依赖数据，就应该出现在依赖项数组中，如果不添加依赖项会有 bug 出现，就算不是通过 useState 创建的属性也需要添加到数组中。

清理副作用

使用场景：在组件被销毁时，如果有些副作用操作需要被清理，就可以使用这种方式（比如常见的 定时器）。

如果想要清理副作用，可以在副作用函数中的末尾 return 一个新的函数，在新的函数中编写清理副作用的逻辑，注意执行时机为：

组件卸载时自动执行
组件更新时，下一个 useEffect 副作用函数执行之前自动执行

import { useEffect, useState } from "react"

const App = () => {
  const [count, setCount] = useState(0)
  useEffect(() => {
    const timer = setInterval(() => {
      setCount(count + 1)
    }, 1000)
    return () => {
      // 用来清理副作用的事情
      clearInterval(timer)
    }
  }, [count])
  return (
    <div>{count}</div>
  )
}

export default App