1. 简介

Hook是React16.8的新增特性,hook必须要在函数组件中使用，但是hook对于使用vue的同学来和vue是很多的共同点的，让我们来看一下hook都有什么特性：

使用usesState维护状态
useEffect代替生命周期（componentDidMount、componentDidUpdate 和 componentWillUnmount）
其他 Hook

2. 基本语法

对于我们的基本开发，使用usesState和useEffect基本能完成基础开发，让我们看一下基本的用法：

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

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("初始化");
    return () => {
        console.log("结束");
    }
   }, []);
   
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

2.1. useState

useState用于维护状态，如在vue中data的定义的变量，改变变量的方式必须使用setCount函数，如setCount(count + 1)，用于驱动视图，基本用法如下：

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

function Example() {
  const [count, setCount] = useState(0);
   
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

点击按钮时，使用setCount对count进行自增，视图中的count同时会更新。

2.2. useEffect

useEffect中合成了componentDidMount、componentDidUpdate 和 componentWillUnmount三个生命周期，其中基本使用用法如下：

useEffect(() => {
  console.log("初始化");
  return () => {
      console.log("结束");
  }
}, []);

useEffect支持传入两个参数，其中第一个是需要执行的回调函数，第二个是非必传参数，类型是数组。回调函数支持返回一个函数，当组件卸载时执行。第二个数组参数用于依赖监听，当数组中的变量更新时，触发useEffect的回调函数。

3. 实践应用

3.1. 请求数据

初始化请求数据（useEffect的第二个参数需要传入一个空数组，保证只执行一次）：

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

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 在这里进行数据请求
    axios.get().then(res=>{}).catch(err=>{}).finally(()=>{});
   }, []);
   
  return (
    <></>
  );
}

监听请求数据。有时候我们有这样的需求，当父组件传如的参数，如id，改变时我们就需要请求数据。在vue中我们使用watch来监听id的变化来进行数据请求，在react hook的参考写法如下：

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

function Example(props) {
  const [count, setCount] = useState(0);

  // 依赖props.id，当props.id变化时执行回调函数
  useEffect(() => {
    // 在这里进行数据请求
    axios.get().then(res=>{}).catch(err=>{}).finally(()=>{});
   }, [props.id]);
   
  return (
    <></>
  );
}

3.2. 全局资源的开启与关闭

在vue中，我们常在mounted这个生命周期进行一些全局资源的开启，如dom的事件绑定，定时器的开启等，同时需要在beforeDestroy中将开启的资源给关闭，在react hook的参考写法如下：

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

function Example(props) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 开启来定时器
    let timer = setInterval(() => {
    	console.log("执行");
    }, 5000);
    // 返回的函数中清除定时器
    return () => {
        clearImmediate(timer)
    }
}, []);
   
  return (
    <></>
  );
}

上面的例子中，我们使用useEffect的回调函数中开启了定时器（也可以是事件绑定等），然后return的函数中清除了定时器。return的函数将在组件卸载时执行。

vue技术栈上手react hook