react hook

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

function Demo() {
  // 作用函数
  const [count, setCount] = useState(0);
  // 副作用函数   可以有多个
  // 相当于 componentDidMount 和 componentDidUpdate:
  // 相当于 第一次渲染完成后 和 每次更行渲染完成后
  // 默认情况下，React 会在每次渲染后调用副作用函数 —— 包括第一次渲染的时候
  useEffect(() => {
    const title = `You clicked ${count} times`;
    console.log(title);
    //会在下一次render前或销毁组件前运行 componentWillUnmount
    return () => {
      console.log("清除count副作用");
    };
  });

  const [title, setTitle] = useState("这是标题");
  useEffect(() => {
    console.log(title);
    //会在下一次render前或销毁组件前运行  componentWillUnmount
    return () => {
      console.log("清除title副作用");
    };
  });
  // 注意 useEffect 的return 函数 在第一次渲染完成后 不会执行
  // 在以后（除第一次）每次render前会先执行 return（多个useEffect 会先把所有的return 执行完）
  // 然后再执行 useEffect 中的内容

  return (
    <div>
      <p>this is {title} title</p>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
      <button onClick={() => setTitle("eeeeeeee")}>
        Click me change title
      </button>
    </div>
  );
}

ReactDOM.render(<Demo />, document.getElementById("container"));

注意：

useEffect 第一个参数时一个effectCallback函数，形式为:() => (void | (() => void | undefined))，如果useEffect没有第二个参数，effectCallback会在每次渲染后调用（包括第一次），相当于componentDidMount+componentDidupdate，但是effectCallback往往还会return一个函数,它的角色类似componentWillUnmount,会在下一次render前或销毁组件前运行。

useEffect 第二参数为数组，它的角色有点类似于componentShouldUpdate,一般来说它由state和props中的数据构成，每次render,useEffect会比较这个数组与上次render时是否完全一致，如果一致，effectCallback就不会再次执行。