6. React Hooks

今天我们来学习下最近才出的新的API，「React Hooks」。

还是直接做一个「Counter」需求来说明。

（1）「useState」

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

import "./styles.css";

function App() {
  const [count, setCount] = useState(0);
  const add = () => {
    setCount(count + 1);
  };
  return (
    <div className="App">
      <div>{count}</div>
      <button onClick={add}>+1</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

在我们之前的写法中，我们使用class类，然后里面的「this.state」来保存一些变量，但是此处直接把需要的变量结合「useState」来实现，比如「const [count, setCount] = useState(0)」中count就是声明的变量，setCount就是改变这个变量的函数，0就是count的默认值。这样我们可以直接使用「函数」而不是「class类」。

我们试试把「const [count, setCount] = useState(0)」放在函数外。

const [count, setCount] = useState(0);
function App() {
  
  const add = () => {
    setCount(count + 1);
  };
  return (
    <div className="App">
      <div>{count}</div>
      <button onClick={add}>+1</button>
    </div>
  );
}

这样会报错，所以「useState」只能放在函数里使用。

那么我们把「count」和「setCount」换个名字试试。

function App() {
  const [x, y] = useState(0);
  const add = () => {
    y(x + 1);
  };
  return (
    <div className="App">
      <div>{x}</div>
      <button onClick={add}>+1</button>
    </div>
  );
}

我们发现仍然可以顺利运行。所以从「useState」中声明一个值和修改这个值的函数，只要顺序正确，名字可以任意命名。

（2）useEffect
首先我们来说明一个概念，「副作用」（Side Effect）。「副作用」（Side Effect）就是指函数或者表达式的行为依赖于外部世界。

看不懂？我们用代码来举例下。（可能有些不准确）

function f1() {
    console.log(1);
}

function f2(a, b) {
    return a + b;
}

上面两个函数，f1就引用了外部的函数「console.log」,这会有不确定性，比如有人改写了「console.log」，就会对f1产生影响。但是f2就不会有这个影响，所以往往f2这样的模式也称为「纯函数」。

然后我们来使用「useEffect」。

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

  useEffect(() => {
    document.querySelector("#output").innerText = `${count}`;
  });

  const add = () => {
    setCount(count + 1);
  };
  return (
    <div className="App">
      <div id="output" />
      <div>{count}</div>
      <button onClick={add}>+1</button>
    </div>
  );
}

注意：useEffect需要自己引用。暂时没有深入，可以多深入了解文档。