React学习笔记(六)Hooks

1. 认识Hook

1.1 为什么需要 Hook

Hook 是 React 16.8 的新增特性，它可以让我们在不编写class的情况下使用state 以及其他的React特性（比如生命周期）。

我们先来思考一下 class 组件相对于函数式组件有什么优势？比较常见的是下面的优势：

• class 组件可以定义自己的 state，用来保存组件自己内部的状态；
  • 函数式组件不可以，因为函数每次调用都会产生新的临时变量；
• class组件有自己的生命周期，我们可以在对应的生命周期中完成自己的逻辑；
  • 比如在 componentDidMount 中发送网络请求，并且该生命周期函数只会执行一次；
  • 函数式组件在学习hooks之前，如果在函数中发送网络请求，意味着每次重新渲染都会重新发送一次网络请求；
• class 组件可以在状态改变时只会重新执行render函数以及我们希望重新调用的生命周期函数componentDidUpdate等；
  • 函数式组件在重新渲染时，整个函数都会被执行，似乎没有什么地方可以只让它们调用一次；

所以，在Hook出现之前，对于上面这些情况我们通常都会编写class组件。

【下面是一个函数式组件和类组件】

// 类组件
class HelloWorld extends PureComponent{
   
  constructor() {
   
    super();
    this.state = {
   
      message : 'hello world'
    }
  }
  render() {
   
    const {
    message } = this.state
    return (<div>
      <h2>{
    message}</h2>
      <button onClick={
   e=> this.setState({
   message:'你好'})}>修改文本</button>
    </div>)
  }
}
// 函数式组件
function HelloReact() {
   
  let message = "hello react"
  // 函数式组件存在的缺陷
  // 1. 组件不会被重新渲染：修改message之后，组件不知道自己要重新进行渲染
  // 2. 退一步说如果组件重新渲染了：函数重新执行了，message 还是会被赋值为原来的 hello react
  // 3. 不能调用生命周期
  return (
    <div>
      <h2>{
   message}</h2>
      <button onClick={
    e => message = "你好"}>修改文本</button>
    </div>
  );
}

1.2 Class组件存在的问题

复杂组件变得难以理解：

• 我们在最初编写一个class组件时，往往逻辑比较简单，并不会非常复杂。但是随着业务的增多，我们的class组件会变得越来越复杂；
• 比如componentDidMount中，可能就会包含大量的逻辑代码：包括网络请求、一些事件的监听（还需要在componentWillUnmount中移除）；
• 而对于这样的 class 实际上非常难以拆分：因为它们的逻辑往往混在一起，强行拆分反而会造成过度设计，增加代码的复杂度；

难以理解的 class：

• 很多人发现学习ES6的class是学习React的一个障碍。
• 比如在class中，我们必须搞清楚this的指向到底是谁，所以需要花很多的精力去学习this；

组件复用状态很难：

• 在前面为了一些状态的复用我们需要通过高阶组件；
• 像之前学习的 redux中connect或者react-router中的withRouter，这些高阶组件设计的目的就是为了状态的复用；
• 或者类似于Provider、Consumer来共享一些状态，但是多次使用Consumer时，我们的代码就会存在很多嵌套；
• 这些代码让我们不管是编写和设计上来说，都变得非常困难；

Class组件和Functional组件对比

1.3 Hook的出现

Hook的出现，可以解决上面提到的这些问题；

简单总结一下hooks：

• 它可以让我们在不编写class的情况下使用state以及其他的React特性；
• 但是我们可以由此延伸出非常多的用法，来解决我们前面所提到的问题；

Hook 的使用场景：

• Hook 的出现基本可以代替之前所有使用 class 组件的地方；
• 但是如果是一个旧的项目，你并不需要直接将所有的代码重构为Hooks，因为它完全向下兼容，你可以渐进式的来使用它；
• Hook 只能在函数组件中使用，不能在类组件，或者函数组件之外的地方使用；

在继续之前，请记住 Hook 是：

• 完全可选的：你无需重写任何已有代码就可以在一些组件中尝试 Hook。但是如果你不想，你不必现在就去学习或使用 Hook。
• 100% 向后兼容的：Hook 不包含任何破坏性改动。
• 现在可用：Hook 已发布于 v16.8.0。

1.4 计数器案例对比

我们通过一个计数器案例，来对比一下 class 组件和 函数式组件结合hooks的对比：

【class实现计数器】

import React, {
    PureComponent } from 'react'
class CounterClass extends PureComponent {
   
  constructor() {
   
    super();
    this.state = {
   
      count: 0,
    };
  }
  increment() {
   
    this.setState({
    count: this.state.count + 1 });
  }
  decrement() {
   
    this.setState({
    count: this.state.count - 1 });
  }
  render() {
   
    const {
    count } = this.state;
    return (
      <div>
        <h1>CountClass当前计数: {
   count}</h1>
        <button onClick={
   (e) => this.increment()}>+1</button>
        <button onClick={
   (e) => this.decrement()}>-1</button>
      </div>
    );
  }
}
export default CounterClass

【函数式结合hook】

import {
    memo,useState } from "react";
function CounterHook(props) {
   
  const [count, setCount] = useState(0)
  return (
    <div>
      <h2>CounterHook当前计数:{
    count }</h2>
      <button onClick={
   e=> setCount(count + 1)}>+1</button>
      <button onClick={
   e=> setCount(count - 1)}>-1</button>
    </div>
  )
}
export default memo(CounterHook)

会发现上面的代码差异非常大：函数式组件结合hooks让整个代码变得非常简洁，并且再也不用考虑this相关的问题；

1.5 useState 解析

我们来研究一下上面函数式组件配合hook的核心的一段代码代表什么意思：

useState 来自 react，需要从 react 中导入，它是一个 hook ；

• 参数：初始化值，如果不设置为 undefined；
• 返回值：数组，包含两个元素；
  • 元素一：当前状态的值；
  • 元素二：修改状态值的函数；

点击 button 按钮后，会完成两件事情：

• 调用 setCount，设置一个新的值；
• 组件重新渲染，并且根据新的值返回 DOM 结构；

Hook 就是 JavaScript 函数，这个函数可以帮助你 钩入（hook into） React State以及生命周期等特性；

但是使用它们会有两个额外的规则：

• 只能在函数最外层调用 Hook。不能在循环、条件判断或者子函数中调用。
• 只能在 React 的函数式组件中调用 Hook。不能在其他 JavaScript 函数中调用。

import React, {
    memo, useState } from 'react'
const App = memo(() => {
   
  const [message, setMessage] = useState("hello world");
  function changeMessage() {
   
    setMessage('你好')
  }
  return (
    <div>
      <h2>App:{
   message}</h2>
      <button onClick={
   changeMessage}>修改文本</button>
    </div>
  );
})
export default App

Hook指的类似于useState、 useEffect这样的函数；Hooks是对这类函数的统称；

2. 认识 usesState

State Hook 的 API 就是 useState，在前面已经接触过了：

• useState会帮助我们定义一个 state变量，useState 是一种新方法，它与 class 里面的 this.state 提供的功能完全相同。
• 一般来说，在函数退出后变量就会”消失”，而 state 中的变量会被 React 保留。
• useState 接受唯一 一个参数，在第一次组件被调用时使用来作为初始化值。（如果没有传递参数，那么初始化值为undefined）。
• useState的返回值是一个数组，我们可以通过数组的解构，来完成赋值会非常方便。

FAQ：为什么叫 useState 而不叫 createState?

• “create” 可能不是很准确，因为 state 只在组件首次渲染的时候被创建。
• 在下一次重新渲染时，useState 返回给我们当前的 state。
• 如果每次都创建新的变量，它就不是 “state”了。
• 这也是 Hook 的名字总是以 use 开头的一个原因。

当然，我们也可以在一个组件中定义多个变量和复杂变量（数组、对象）

3. Effect Hook

3.1 认识Effect Hook

目前我们已经通过 hook 在函数式组件中定义 state，那么类似于生命周期这些呢？

• Effect Hook 可以让你来完成一些类似于class中生命周期的功能；
• 事实上，类似于网络请求、手动更新DOM、一些事件的监听，都是React更新DOM的一些副作用（Side Effects）；
• 所以对于完成这些功能的Hook被称之为 Effect Hook；

【示例：使用Effect Hook，实现网页标题随着数字的改变而改变】

import React, {
    memo, useState, useEffect } from "react";
const App = memo(() => {
   
  const [count, setCount] = useState(0)
  useEffect(() => {
   
    // 当前传入的回调函数会在组件被渲染完成后，自动执行
    // 网络请求/DOM操作(修改标题)/事件监听
  document.title = count; 
  })
  return (
    <div>
      <h2>App: {
    count }</h2>
      <button onClick={
   e => setCount(count + 1)}>+1</button>
    </div>
  )
})
export default App

useEffect的解析：

• 通过 useEffect 的 Hook，可以告诉 React 需要在渲染后执行某些操作；
• useEffect 要求我们传入一个回调函数，在React执行完更新DOM操作之后，就会回调这个函数；
• 默认情况下，无论是第一次渲染之后，还是每次更新之后，都会执行这个回调函数；

3.2 需要清除Effect

在class组件的编写过程中，某些副作用的代码，我们需要在 componentWillUnmount 中进行清除：

• 比如之前的事件总线或 Redux 中手动调用subscribe；
• 都需要在 componentWillUnmount 有对应的取消订阅；
• Effect Hook 通过什么方式来模拟 componentWillUnmount呢？

useEffect 传入的回调函数A本身可以有一个返回值，这个返回值是另外一个回调函数B：

type EffectCallback = () => (void | (() => void | undefined));

为什么要在 effect 中返回一个函数？

• 这是 effect 可选的清除机制。每个 effect 都可以返回一个清除函数；
• 如此可以将添加和移除订阅的逻辑放在一起；
• 它们都属于 effect 的一部分；

React 何时清除 effect？

• React 会在组件更新和卸载的时候执行清除操作；

import React, {
    memo, useState, useEffect } from "react";
const App = memo(() => {
   
  const [count, setCount] = useState(0)
  useEffect(() => {
   
    // 监听事件/订阅事件/(这里假设对 store监听 )
    // const unsubstrib = store.subscribe(() => {
   
    //   // todo...
    // })
    console.log('监听了redux中的数据变化')
    return () => {
   
      // unsubstrib();
      console.log('取消监听 redux 中的 数据变化')
    }
  })
  return (
    <div>
      <h2>App: {
    count }</h2>
      <button onClick={
   e => setCount(count + 1)}>+1</button>
    </div>
  )
})
export default App

3.3 使用多个 Effect

使用 Hook 的其中一个目的就是解决class中生命周期经常将很多的逻辑放在一起的问题：

• 比如网络请求、事件监听、手动修改DOM，这些往往都会放在componentDidMount中；
• 而使用 Effect Hook，我们可以将它们分离到不同的 useEffect中：

Hook 允许我们按照代码的用途分离它们， 而不是像生命周期函数那样：

• React 将按照 effect 声明的顺序依次调用组件中的每一个 effect；

import React, {
    memo, useEffect } from "react";
const App =