react hook使用

什么是Hook？

Hook 是 React 16.8 的新增特性。

Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的js函数（就是让你可以用到类组件中的state和生命周期等函数）。

Hook 使你在无需修改组件结构的情况下复用状态逻辑。

Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据） ，而并非强制按照生命周期划分。

使用规则

Hook 不能在 class 组件中使用，只能在函数组件中使用。

Hook必须写在函数的最顶层，不要在循环，条件或嵌套函数中使用。

Hook只在 React 函数中使用，不要在普通的 JavaScript 函数中使用。

useState

如果你在编写函数组件并意识到需要向其添加一些 state，以前的做法是必须将其它转化为 class。现在你可以在现有的函数组件中使用 Hook。
useState 是允许你在 React 函数组件中添加 state 的 Hook。

首先你需要引入
import React, { useState } from 'react';
其次，使用useState方法来添加state，方法的参数，可以是变量、对象或者是函数，这个参数将作为state的初始值，如果是函数，函数的返回值作为初始值。返回一个数组，数组的值为当前state和更新state的函数。

const [count, setCount] = useState(0);声明一个state变量count，并初始化为0（当前状态），也生成了一个让你更新count 变量的方法setCount。

class示例

class Example extends React.Component {
   
  constructor(props) {
   
    super(props);
    this.state = {
   
      count: 0
    };
  }

  render() {
   
    return (
      <div>
        <p>You clicked {
   this.state.count} times</p>
        <button onClick={
   () => this.setState({
    count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

类组件是通过调用this.setSatete()改变state的值。

Hook示例

import React, {
    useState } from 'react';

function Example() {
   
  // 声明一个叫 "count" 的 state 变量  
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {
   count} times</p>
      <button onClick={
   () => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

组件中想要更改state变量count，只能通过useState返回对应的set方法。

useEffect & useLayoutEffect

useEffect

对比类组件的生命周期函数，可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

useEffect，第一个参数是回调函数，第二个参数是依赖项数组。数组的内容会进行上一次和当前的对比，例如在 componentDidUpdate 中添加对 prevProps 或 prevState 的比较逻辑，在数组内容改变后执行回调函数。
注意： 组件每次渲染会默认执行一次useEffect，如果不传第二个参数，那只要组件有state发生改变，就会触发回调函数；如果参数传一个空数组，那只会在初始化执行一次回调函数。另外，如果return返回了一个函数，那组件在每次重新渲染的时候，都会先执行该函数再调用回调函数。

Effect Hook 可以让你在函数组件中执行副作用操作，数据获取，设置订阅以及手动更改 React 组件中的 DOM 都属于副作用。
副作用，分为需要清除的和不需要清除的。

无需清除的

比如发送网络请求、手动变更DOM、记录日志等。只需要在useEffect中的方法里写清要处理的逻辑即可，表示每次DOM更新渲染后都会执行useEffect里的方法。

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

需要清除的

比如订阅外部数据源等。

官方文档中的例子，假设我们有一个 ChatAPI 模块，它允许我们订阅好友的在线状态。

class代码

以下是我们如何使用 class 订阅和显示该状态：

class FriendStatus extends React.Component {
   
  constructor(props) {
   
    super(props);
    this.state = {
    
        isOnline: null 
    };