Hook是React 16.8的新增特性。它可以让你在不写class的情况下使用state以及其他特性

State Hook

import React, { useState } from 'react';

function HelloHooks() {
  // 声明一个叫 “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就是一个hooks。通过函数组件调用它来给组件内部一个state。React在重复渲染的时候保留这个state。

useState 只需要一个参数，就是初始state。它会返回一对值：

1. 当前的state
2. 更新当前值的函数

声明多个state hook

function ExampleWithManyStates() {
  // 声明多个 state 变量！
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  // ...
  /* 数组结构写法并不属于hooks api。
  * 当然也可以这样写
  * const ageVariable = useState(42)
  * const age = ageVariable[0];
  * const setAge = ageVariable[1];
  */
}

Effect hook

Effecthook可以在函数式组件中执行副作用操作

useEffect hook可以看作class组件中的三个声明周期函数分别是

1. componentDidMount
2. componentDidUpdate
3. componentWillUnmount

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });
  return <>
    <button onClick={() => setCount(count + 1)}><button />
  </>
}

useEffect 没有任何参数的情况下就是 componentDidMount 与 componentDidUpdate的合成副作用

在react class组件中，经常会有这样的场景。在组件挂载(componentDidMount)的时候开启一个轮询任务或者状态订阅，通常会在组件卸载(componentWillUnmount)的时候去清除它。

class写法：

import  React from 'react';

class demo extends React.Component {
  state = {
    dataSource: []
  }
  getList() {
    //  获取数据
  }
  componentDidMount() {
    this.getList()
    this.timer = window.setInterval(() => {
      this.getList()
    }, 3000)
  }
  componentDidUnmount() {
     window.clearInterval(this.timer);
  }
  render() {
    // dom
  }
}

function写法:

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

function demo() {
  let timer;
  const [list, setList] = useState([]);

  const getList = () => {
    // 获取数据
  }
  // 第一次请求
  useEffect(() => {
    getList();
  }, [])
  // 30s后开始轮询
  useEffect(() => {
      timer = window.setInterval(() => {
      getList();
    }, 30000)
    return () => window.clearInterval(timer); // 此处一定要return出一个
   }, [])
  
  return (
     // <>dom</>
  )
}

useEffect的可以接受2个参数

1. 副作用执行的动作(函数)
2. 触发副作用执行的依赖

• 当useEffect第二项为一个空数组时，初始化调用后便不再执行
• 当没有第二个参数时，组件挂载与任何state的更新都会触发副作用
• useEffect返回一个函数，在组件卸载时进行
• useEffect 第二个参数中有 state或者props，则state或props更新才会触发副作用

写完代码后控制台会报出这样的warning

每次渲染后，从React Hook Useffect内部对“timer”变量的指定将丢失。要随时间保留该值，请将其存储在useRef挂钩中，并将可变值保留在“.current”属性中。

修复此问题请参考React hooks之useRef。