第19节——hooks介绍

1、概念

Hook 这个单词的意思是"钩子"。 React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。 React Hooks 就是那些钩子。 你需要什么功能，就使用什么钩子。React 默认提供了一些常用钩子，你也可以封装自己的钩子。所有的钩子都是为函数引入外部功能，所以 React 约定，钩子一律使用use前缀命名，便于识别。你要使用 xxx 功能，钩子就命名为 useXxx。注意hook是v16.8.0后，才新增的特性

2、为什么会出现hooks

class component 学习成本高

我们在class component中要学习生命周期，React15、React16.3、React16.4到React17生命周期有了很多变化。生命周期在class组件中非常重要。但是太多的太多的生命周期难记，有些也不知道具体的场景麻烦。还有就是this指向的问题比如我们要写大量的bind函数来改变this的指向，当然也可以通过装饰器等其他方法改变，但是本质上来说还是要跟this打交道

import React from "react";

export default class LearnClassComponent extends React.Component {
  componentWillMount() {
    /**
     * 发生在 render 函数之前，还没有挂载 Dom
     * 已被废弃
     */
  }

  static getDerivedStateFromProps(nextProps, state) {
    /**
     * 在调用 render方法之前调用，在初始化和后续更新都会被调用
     * 接收两个参数第一个参数为即将更新的 新的props
     * 第二个参数为老的state ,
     * 可以比较props 和 state来加一些限制条件，防止无用的state更新
     * 返回一个对象来更新 state, 如果返回 null 则不更新任何内容
     *
     * 注意：
     * getDerivedStateFromProps 是一个静态函数，
     *  不能使用this, 也就是只能作一些无副作用的操作
     *
     */
    return state;
  }

  componentDidMount() {
    /**
     * 在组件挂载后 (插入DOM树后) 立即调用，
      只会调用一次，在初始化后
     * 常用于
     * 发送网络请求等，并且可以在 此钩子函数里直接调用 setState()
     */
  }

  /**
   *
   * @param {*} nextProps 即将更新的 props 值
   * @param {*} nextState 即将跟新后的 state 值
   * @returns 返回true则更新false则不更新视图
   */
  shouldComponentUpdate(nextProps, nextState) {
    /**
     * 在组件更新之前调用，可以控制组件是否进行更新
     * 一般常用于优化性能
     * 注意：
     * 1、不建议在 shouldComponentUpdate()
     * 中进行深层比较或使用JSON.stringify()。这样非常影响效率，且会损害性能
     * 2、不要 shouldComponentUpdate 中调用 setState()，
     * 否则会导致无限循环调用更新、渲染，直至浏览器内存崩溃
     * 3、可以使用内置 PureComponent 组件替代
     *
     */
    return true;
  }

  /**
   *
   * @param {*} prevProps
   * @param {*} prevState
   * @return
   */
  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log(prevProps, prevState);
    /**
     *
     * 因为render和componentDidUpdate之间可能有延迟，所以用他来补足
     * 它可以使组件在 DOM 真正更新之前捕获一些信息（例如滚动位置），
     * 此生命周期返回的任何值都会作为参数传递给 componentDidUpdate()。
     * 如不需要传递任何值，那么请返回 null
     *
     */
    return null;
  }

  /**
   *
   * @param {*} prevProps 上一次的或者说老的props
   * @param {*} prevState 上一次的或者说老的state
   * @param {*} snapshot 这是getSnapshotBeforeUpdate这个生命周期返回的
   */
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("我是，componentDidUpdate", prevProps, prevState, snapshot);
    /**
     * 每次触发render后都会被调用
     * 注意：
     * 不要在这里使用this.setState()等改变视图的操作，会造成死循环
     */
  }

  componentWillUnmount() {
    /**
     * 在组件即将被卸载或销毁时进行调用
     * 可以用于取消网络请求、移除监听事件、清理 DOM 元素、清理定时器等操作
     */
  }

  /**
   * 方法是class组件中唯一必须实现的方法，用于渲染dom, render()方法必须返回reactDOM
   * @returns
   */
  render() {
    return (
      <div>
        <div>你好，react</div>
      </div>
    );
  }
}

class component 逻辑代码分散

我们在学习代码的第一天，就应该知道高内聚、低耦合这六字箴言。设计组件也是一样的，我们应当考虑代码的高可复用性。然而在class组件中，我们实现一个功能，就不得不把相同业务的一些逻辑分散到各个生命周期中，就显得逻辑分散，比如我们设置一个定时器，就要考虑在合适的生命周期里面初始化定时器，以及销毁定时器等显的逻辑很分散

react hooks 逻辑复用更加便捷

Class组件逻辑复用一般使用的都是HOC和Render Props。但这两者虽然都可以实现逻辑复用，但是并没有让组件和代码变得好用和优美起来，这二者都会存在的一个问题是，逻辑的复用会导致嵌套层级过深，形成嵌套地狱。使用class组件，表单组件、国际化、Redux等混在一块形成一长串的高阶组件的形式，就很恶心

3、hooks初探

以下代码完成一个简单的点击+1的功能

// 引入对应的要使用的hooks
import React, { useState } from 'react';

// 导出一个函数
export default function MobileFooter() {
  // 使用引入的hooks定义一个状态，并暴露出初始状态，和修改状态的方法
  const [num, setNum] = useState(1)
  return (
    <div>
      {/* 每次点击+1 */}
      <button onClick={() => setNum(num + 1)}>+1</button>
      {/* 展示num的值 */}
      <div>{num}</div>
    </div>
  );
}