一、认识hook

这里概念取自coderwhy

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

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

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

所以，在Hook出现之前，对于上面这些情况我们通常都会编写class组件。 但是class组件依然存在很多的问题：

复杂组件变得难以理解：

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

难以理解的class：

很多人发现学习ES6的class是学习React的一个障碍。
比如在class中，我们必须搞清楚this的指向到底是谁，所以需要花很多的精力去学习this；
虽然我认为前端开发人员必须掌握this，但是依然处理起来非常麻烦；

组件复用状态很难：

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

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

简单总结一下hooks：

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

Hook的使用场景：

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

牢记

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

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

Demo类组件和函数组件

类组件Demo.jsx

jsx 复制代码

import React, { PureComponent } from 'react'

export class Demo extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      message: "我是测试Demo组件"
    }
  }
  changeMessage(){
    this.setState({
      message:"我是修改后的数据内容"
    })
  }
  render() {
    const { message } = this.state
    return (
      <>
        <h1>{message}</h1>
        <button onClick={e=>this.changeMessage()}>类组件修改文本</button>
      </>
    )
  }
}

export default Demo

函数组件 DemoFun.jsx

jsx 复制代码

import React, { useState } from 'react'
import     from 'prop-types'

function DemoFun(props) {
  const [message,setMessage]=useState("我是使用Hook组件");
  function changeMessage(){
    setMessage("我是修改后的")
  }
  return (
    <>
      <h1>{message}</h1>
      <button onClick={e=>setMessage("setMessage")}>Hook数据显示内容处理箭头函数</button>
      <button onClick={changeMessage}>Hook数据显示内容处理普通调用</button>
    </>
  )
}

DemoFun.propTypes = {}

export default DemoFun

App.jsx

jsx 复制代码

import React, { PureComponent } from 'react'
import Demo from './Demo'
import DemoFun from './DemoFun'

export class App extends PureComponent {
  render() {
    return (
      <div>
        <Demo/>
        <DemoFun/>
      </div>
    )
  }
}
 
export default App

二、使用Hooks

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

2.1useState使用

useState 是一个 React Hook，它允许你向组件添加一个状态变量。

scss 复制代码

const [state, setState] = useState(initialState)

参数：初始化值，如果不设置为undefined

返回值：数组，包含两个元素

使用数组解构来命名状态变量，例如 [something, setSomething]。

2.2 useEffect

允许你将组件与外部系统同步。

不要随意在你的组件中使用 Effect 。记住，Effect 通常用于暂时"跳出" React 代码并与一些外部系统进行同步。这包括浏览器 API、第三方小部件，以及网络等等。如果你想用 Effect 仅根据其他状态调整某些状态，那么你可能不需要 Effect。

scss 复制代码

useEffect(setup, dependencies?)

2.2.1 useEffect基本使用

在组件的顶层调用 useEffect 来声明一个 Effect：

示例

jsx 复制代码

import { useState, useRef, useEffect } from 'react';

function VideoPlayer({ src, isPlaying }) {
  const ref = useRef(null);

  if (isPlaying) {
    ref.current.play();  // 渲染期间不能调用 `play()`。 
  } else {
    ref.current.pause(); // 同样，调用 `pause()` 也不行。
  }

  return <video ref={ref} src={src} loop playsInline />;
}

export default function App() {
  const [isPlaying, setIsPlaying] = useState(false);
  return (
    <>
      <button onClick={() => setIsPlaying(!isPlaying)}>
        {isPlaying ? '暂停' : '播放'}
      </button>
      <VideoPlayer
        isPlaying={isPlaying}
        src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
      />
    </>
  );
}

此时执行发现会进行报错，因此我们需要进行修改

当第一次调用 VideoPlayer 时，对应的 DOM 节点甚至还不存在！如果连 DOM 节点都没有，那么如何调用 play() 或 pause() 方法呢！在返回 JSX 之前，React 不知道要创建什么 DOM。

解决办法是 使用 useEffect 包裹副作用，把它分离到渲染逻辑的计算过程之外：

修改后

jsx 复制代码

//other code
  useEffect(() => {
    if (isPlaying) {
      ref.current.play();
    } else {
      ref.current.pause();
    }
  });
//other code

把调用 DOM 方法的操作封装在 Effect 中，你可以让 React 先更新屏幕，确定相关 DOM 创建好了以后然后再运行 Effect。

当 VideoPlayer 组件渲染时（无论是否为首次渲染），都会发生以下事情。首先，React 会刷新屏幕，确保 <video> 元素已经正确地出现在 DOM 中；然后，React 将运行 Effect；最后，Effect 将根据 isPlaying 的值调用 play() 或 pause()。

由此可知

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

`提示`

Effect 会在每次渲染后执行，而以下代码会陷入死循环中 ：因为我们每次都进行了修改count，但是每次更新数据该组件都会进行刷新所以要注意非必要就不要使用Effect

jsxEffect 复制代码

import React, { useEffect, useState } from 'react'

export default function Demo() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    setCount(count + 1);
  });
  return (
    <div>{count}</div>
  )
}

2.2.2 清除useEffect ，添加清理（cleanup）函数

这里我们使用一个模拟连接到聊天服务器来分析如何使用此案例

jsx 复制代码

import { useEffect } from 'react';
//可以抽离出去
export function createConnection() {
  // 真实的实现会将其连接到服务器，此处代码只是示例
  return {
    connect() {
      console.log('✅ 连接中......');
    },
    disconnect() {
      console.log('❌ 连接断开。');
    }
  };
}
export default function ChatRoom() {
  useEffect(() => {
    const connection = createConnection();
    connection.connect();
  });
  return <h1>欢迎来到聊天室！</h1>;
}

这里发现执行后频繁切换显示组件内容会发现"✅ 连接中......"打印多次，会进行网络堆积

为了解决这个问题，可以在 Effect 中返回一个 清理（cleanup） 函数。

jsx 复制代码

useEffect(() => {
    const connection = createConnection();
    connection.connect();
    return () => {
      connection.disconnect();
    };
});

重复挂载组件，可以确保在 React 中离开和返回页面时不会导致代码运行出现问题

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

useEffect可以同时使用多个，一般清除机制常用在以下场景中：控制非 React 组件、订阅事件、、触发动画、获取数据、发送分析报告

2.2.3 useEffect第二个参数关联性能优化

该useEffect在哪些state发生变化时，才重新执行；

jsx 复制代码

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

export default function EffectPerformance() {
  const [count, setCount] = useState(0);
  const [show, setShow] = useState(true);

  useEffect(() => {
    console.log("修改count执行");
  }, [count])
  useEffect(() => {
    console.log("显示隐藏控制");
    return ()=>console.log("卸载时候执行");
    }, [show])
  return (
    <div>
      <h2>当前计数: {count}</h2>
      <button onClick={e => setCount(count + 1)}>增加count +1</button>
      <button onClick={e => setShow(!show)}>切换</button>
    </div>
  )
}

3. useContext

组件中使用共享的Context的方式：移步学习

但是这里useContext 是一个 React Hook，可以让你读取和订阅组件中的 context。

`useContext(SomeContext)`

在组件的顶层调用 useContext 来读取和订阅context

javascript 复制代码

import { useContext } from 'react';



function MyComponent() {

  const theme = useContext(ThemeContext);

  // ...

使用示例

其他常用Hooks可以参考React 内置 Hook -- React 中文文档 (docschina.org)

React Hooks解析

一、认识hook

Demo类组件和函数组件

二、使用Hooks

2.1useState使用

参数：初始化值，如果不设置为undefined

返回值：数组，包含两个元素

2.2 useEffect

2.2.1 useEffect基本使用

提示

2.2.2 清除useEffect ，添加清理（cleanup）函数

2.2.3 useEffect第二个参数关联性能优化

3. useContext

useContext(SomeContext)

`提示`

`useContext(SomeContext)`