useState

useState是react中用来管理state的工具，见如下例子。

常规写法

import React, { Component } from "react";
class App extends Component {
  state = { count: 0 };
  setCount = count => {
    this.setState({ count: count });
  };
  render() {
    const { count } = this.state;
    const setCount = this.setCount;
    return (
      <div>
        <span className="badge badge-secondary m-2">{count}</span>
        <button
          className="btn btn-primary btn-sm m-2"
          onClick={() => setCount(count + 1)}
        >
          增加
        </button>
      </div>
    );
  }
}

export default App;

简化写法

import React, { useState } from "react";
const App = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <span className="badge badge-secondary m-2">{count}</span>
      <button
        className="btn btn-primary btn-sm m-2"
        onClick={() => setCount(count + 1)}
      >
        增加
      </button>
    </div>
  );
};

export default App;

解释

导入useState
import { useState } from "react";
定义变量名和修改变量的方法名以及变量初始值
const [count, setCount] = useState(0);
count是我们定义的state变量，setCount是我们定义的一个方法，这个方法用来修改count的值，0代表count变量的初始值是0。

在render函数中使用变量名和方法

注意方法后面跟一个参数，就是变量要变成的值

useEffect

useEffect用于当状态修改后执行回调函数的。例如当搜索值变化后执行后台搜索的任务。

useEffect的第一个参数是一个函数，代表要执行的方法，第二个参数是可选参数（数组）。当没有第二个参数时每一次渲染都执行函数，如果是一个空数组，那么只有组件第一次渲染的时候执行。

这个数组可以放一些变量名，代表当某些变量变了以后执行函数

每一次渲染都执行

import React, { useState, useEffect } from "react";
const App = () => {
  const [count, setCount] = useState(0);
  const [count2, setCount2] = useState(0);
  //每一次渲染都执行
  useEffect(() => {
    console.log("useEffect running");
  });//没有第二个参数
  return (
    <div>
      <span className="badge badge-secondary m-2">{count}</span>
      <button
        className="btn btn-primary btn-sm m-2"
        onClick={() => setCount(count + 1)}
      >
        增加
      </button>
      <br />
      <span className="badge badge-secondary m-2">{count2}</span>
      <button
        className="btn btn-primary btn-sm m-2"
        onClick={() => setCount2(count2 + 1)}
      >
        增加
      </button>
    </div>
  );
};

export default App;

我们使用useEffect注册了一个箭头函数。目前的作用是当所有数据值发生变化以后执行箭头函数（数据值发生变化指的是我们点击按钮以后触发的count或者count2增加1，render函数执行）。如下

1.gif

只有组件加载后执行

//第一次组件渲染执行
useEffect(() => {
  console.log("useEffect running");
}, []);//第二个参数是一个空数组

2.gif

指定值变化后执行

const [count, setCount] = useState(0);
const [count2, setCount2] = useState(0);
//只有count变量变化以后执行
useEffect(() => {
  console.log("useEffect running");
}, [count]);//第二个参数有一个count值

3.gif