hooks 是react 16.8 引入的特性，他允许你在不写class的情况下操作state 和react的其他特性。
hooks 只是多了一种写组件的方法，使编写一个组件更简单更方便，同时可以自定义hook把公共的逻辑提取出来，让逻辑在多个组件之间共享。

一、useState

import React, { useState } from "react";

function App() {
  const [count, setCount] = useState(0); // 初始值为基本数据类型
  return (
    <div className="App">
      <button
        onClick={() => {
          setCount(count + 1); // 只能通过暴露的自定义方法修改数据，这里传入一个新数据即可替换源数据
        }}
      >
        +
      </button>
      {count}
      <button
        onClick={() => {
          setCount(count - 1);
        }}
      >
        -
      </button>
    </div>
  );
}

export default App;

useState方法暴露两个可自定义参数，第一个为数据项，第二个为修改此数据的方法名（传入新数据，替换源数据）

配合对象和初始值：

import React, { useState } from "react";
import { cloneDeep } from 'lodash';

function App() {
  const [student, setStudent] = useState(() => { // 初始值为函数返回
    return {name: 'tom', score: 59};
  });
  return (
    <div className="App">
      <p>姓名：{student.name} 分数：{ student.score }</p>
      <button
        onClick={() => {
          // 修改student为及格
          let copyStudent = cloneDeep(student);
          copyStudent.score = 60;
          setStudent(copyStudent);
        }}
      >
        改成及格
      </button>
    </div>
  );
}

export default App;

二、useEffect

相对于useState，useEffect也经常被用到，而且写法更简单

如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

import React, { useEffect } from "react";

function App() {
  useEffect(() => {
    document.title = 'useEffect';
  });

  return (
    <div className="App">
      hello world
    </div>
  );
}

export default App;

组件挂载执行：

第2个参数为空数组时，初始化调用一次之后不再执行，相当于componentDidMount

useEffect(() => {
    console.log('只打印1次')
}, [])

属性更新执行：

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

const [count, setCount] = useState(0); // 初始值为基本数据类型

setTimeout(() => {
  setCount(1)
}, 3000)

function App() {
  useEffect(() => {
    document.title = 'useEffect';
  }, [count]);

  return (
    <div className="App">
      hello world
    </div>
  );
}

export default App;

组件卸载执行：

useEffect(() => {
    console.log('我每次都执行');　　　　　

    // componentWillUnMount
    return () => {
        console.log('clean');
    };
});

除了useState和useEffect官方还提供了其他hook api详细看官方介绍

更新全局store：

useEffect(() => {
}, [
  global.event.id,
  global.timeCell
])

参考链接：

• 官方介绍：https://react.docschina.org/docs/hooks-intro.html