React hooks的使用（一）基础的Hook

（1）useState

useState定义的是一个本组件内使用的状态，跟类组件的state是一样的含义；官方文档上的说明是：

const [state, setState] = useState(initialState);

其中state是你定义的状态名，根据自己的需要定义，可以是a，b，c任意，setState是定义的改变这个状态的方法，initialState是初始值，可以是数字、数组、字符串、对象等等，如果不知道该定义什么数据类型也可以为null。示例代码：

import { useState } from 'react';
function App () {
  const [count, setCount] = useState(10);

  return (
    <div>
      <span>count：{count}</span>
      <div>
        <button onClick={() => setCount(prevCount => prevCount - 10)}>-</button>
        <button onClick={() => setCount(prevCount => prevCount + 10)}>+</button>
      </div>
    </div>
  );
}

export default App;

更新state状态时，如果要用到先前的state，则在setState中可以获取到上一个state的状态，如示例中的prevCount

（2）useEffect

useEffect本身是一个函数，你可以把它看成class组件的生命周期函数。它接收两个参数，第一个参数是一个函数，所有的异步操作都放在里面。第二个参数是一个数组，类似一个监听器，只要数组发生变化，就会重新执行useEffect。第二个参数可以不传，这样每次组件渲染的时候都会执行一次useEffect；如果为空数组，则useEffect只会执行一次，类似class的componentDidMount。例如要实现一个倒计时功能：

import { useState, useEffect } from 'react';
function App () {
  const [count, setCount] = useState(60);

  useEffect(() => {
    const timeout = setTimeout(() => {
      setCount(count => count - 1)
    }, 1000);
  }, [count])

  return (
    <div>
      <span>倒计时：{count}</span>
    </div>
  );
}

export default App;

上述代码每次count发生变化就会重新执行useEffect，所以会重新执行延时器。但是每次执行都会重新定义一个延时器，可能会影响性能，这个时候可以在useEffect中加个返回值。

useEffect()允许返回一个函数，在组件卸载时执行该函数，清除useEffect。实际上每次执行useEffect之前，都会执行一次清除函数，把上一次的useEffect清除。（并不是每个useEffect都需要清除，具体看实际需求）

所以上述示例代码可以改成：

import { useState, useEffect } from 'react';
function App () {
  const [count, setCount] = useState(60);

  useEffect(() => {
    const timeout = setTimeout(() => {
      if (count > 0) {
        setCount(count => count - 1);
      }
    }, 1000);

    return () => {
      clearTimeout(timeout);
    }
  }, [count])

  return (
    <div>
      <span>倒计时：{count}</span>
    </div>
  );
}

export default App;

需要注意的是，useEffect可以写多个，如果有多个没有关联的逻辑代码或者不相关的功能，不要在一个useEffect中操作。

（3）useContext

如果需要在组件之间共享状态，可以使用useContext()。

比如有A、B两个组件，这两个组件用到了父组件中的相同的状态，那么就可以用到useContext。

首先要使用React Context API，在组件外部建立一个 Context。

const TextContext = React.createContext({});

父组件封装代码如下：

function App() {
  return (
    <div>
      <TextContext.Provider value={{
        username: '张三',
      }}>
        <div>
          <A />
          <B />
        </div>
      </TextContext.Provider>
    </div>
  );
}

上面代码中，TextContext.Provider提供了一个 Context 对象，这个对象可以被子组件共享。

子组件中使用useContext()来引入Context对象，从中获取username属性。

完整代码如下：

import React, { useContext } from "react";
const TextContext = React.createContext({});

const A = () => {
  const { username } = useContext(TextContext)
  return (
    <div>
      <h1>这是A组件</h1>
      <p>{username}</p>
    </div>
  )
}

const B = () => {
  const { username } = useContext(TextContext)
  return (
    <div>
      <h1>这是B组件</h1>
      <p>{username}</p>
    </div>
  )
}

function App() {
  return (
    <div>
      <TextContext.Provider value={{
        username: '张三',
      }}>
        <div>
          <A />
          <B />
        </div>
      </TextContext.Provider>
    </div>
  );
}

export default App;

上述代码是父子组件代码在同一个js文件中，实际上我们通常会在不同js文件中使用，则在使用React Context API创建Context对象的代码应该改成：

export const TextContext = React.createContext({});

在需要用到该Context的文件中引入TextContext

import { TextContext } from '../App';

然后子组件中同样是用useContext引入TextContext

const A = () => {
  const { username } = useContext(TextContext)
  return (
    <div>
      <h1>这是A组件</h1>
      <p>{username}</p>
    </div>
  )
}

和前面两个钩子一样，useContext也可以创建多个，具体看个人需求。

以上就是React hooks中的基础Hook，学会这三个Hook已经能够满足实际工作中大部分需求了。

官网文档：https://zh-hans.reactjs.org/docs/hooks-reference.html#basic-hooks