React Hooks API

1. useState

import { useState } from "react";
function App() {
  // 数组里的第一项是sate里的变量，第二项是修改state的函数
  // useState里的值就是count的初始值
  const [count, setCount] = useState(0);
  const add = () => {
    setCount(count + 1);
  };
  return (
    <div>
      <div>{count}</div>
      <div>
        <button onClick={add}>+1</button>
      </div>
    </div>
  );
}
ReactDOM.render(<App />, document.querySelector("#root"));

等价于

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0
    };
  }
  setCount = () => {
    this.setState({
      count: this.state.count + 1
    });
  };
  render() {
    return (
      <div>
        <div>{this.state.count}</div>
        <button onClick={this.setCount}>+1</button>
      </div>
    );
  }
}

复杂的state

import { useState } from "react";
function App() {
  const [count, setCount] = useState(0);
  const [user, setUser] = useState({
    name: "lifa",
    age: 18,
    habits: ["小改改", "明星"]
  });
  const add = () => {
    setCount(count + 1);
  };
  const minus = () => {
    setCount(count - 1);
  };
  const addNum = () => {
    setUser({
      ...user,
      age: user.age + 1,
      habits: [...user.habits, "Lifa"]
    });
  };
  const minusNum = () => {
    const newHabits = user.habits.splice(1, 1);
    setUser({
      ...user,
      age: user.age - 1,
      habits: newHabits
    });
  };
  return (
    <div>
      <div>{count}</div>
      <button onClick={add}>+1</button>
      <button onClick={minus}>-1</button>
      <div>
        {user.name}, {user.age} <br />
        {user.habits.join(",")}
      </div>
      <button onClick={addNum}>变大</button>
      <button onClick={minusNum}>减少</button>
      <div />
    </div>
  );
}

注意：useState只能放在函数组件内部，不能单独拿出来

2. UseEffect

官方文档解释：Effect Hook 可以让你在函数组件中执行副作用操作

什么叫副作用：
就是一个函数里依赖的东西不知道是哪里来的，那么这个未知的东西就有可能改变你函数的结果，也就是副作用

比如：

function f1(){
  console.log(1)
}
fucntion f2(a, b) {
  return a+ b
}

上面的f1函数里的console就是一个未知的，当我们执行f1函数的时候会打印出1，但这不是必然的，因为console不是函数内部的东西，所以我们可以修改它

console.log = function(){}
f1()

这时候我们再次执行f1就不会打印出1，所以我们每次执行的结果都是未知的，也就是所谓的副作用，而f2函数里所有的代码都是函数内部的，不管怎么运行返回的都是你两个参数的和

案例：

<div id="output"></div>

- index.js
import { useState, useEffect } from "react";
function App() {
  const [count, setCount] = useState(0);
  const [user, setUser] = useState({
    name: "lifa",
    age: 18,
    habits: ["小改改", "明星"]
  });
  useEffect(() => {
    document.querySelector("#output").innerText = count;
  });
  const add = () => {
    setCount(count + 1);
  };
}

上面代码中的#output也是一个未知的不属于函数内部的，所以也是有副作用的，所以我们就可以把它放在useEffect里