React入门 8：React Hooks API

Attention：Hooks are a new addition in React 16.8.

所以使用 Hooks 时要注意一下 React 的版本哦。

Basic Hooks

• useState
• useEffect
• useContext

1. CodeSandBox的使用

使用 CodeSandBox 可以在线创建 React 应用。

小技巧：

• 创建了 React 应用后，需修改版本号时可直接在 package.json 里修改，并保存，就会自动加载了。
• 命令行面板上 输入 npm info react versions 可查询 React 版本。

2. useState 的使用

首先要引入 useState:

import {useState} from "react"

useState 的使用：

const [state, setState] = useState(initialState);

其中，state表示state的值；setState表示更新 state 的函数；useState返回一个数组，数组的第一项表示state的值；initialState表示 state 的初始值。

示例代码：

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

  const add = ()=>{
    setCount(count + 1)
  }

  const minus = ()=>{
    setCount(count - 1)
  }

  return (
    <div className="App">
      <div>
        <span className="value">{count}</span>
      </div>
      <button onClick={add}>加1</button>
      <button onClick={minus}>减1</button>
    </div>
  );
}

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

原本函数组件是没有状态的，但自从有了 Hooks，函数组件可以有状态了。

3. useState的更多例子

function App() {
  const [user, setUser] = useState({
    name: "janice",
    age: 18,
    hobbies: ["reading", "game", "coding", "basketball"]
  });

  const addHobbies = () => {
    let newHobbies = Math.random();
    setUser({
      ...user,
      hobbies: [...user.hobbies, newHobbies]
    });
  };

  const delHobbies = () => {
    user.hobbies.splice(1, 1);
    setUser({
      ...user,
      hobbies: user.hobbies
    });
  };

  return (
    <div className="App">
      <div>
        {user.name} , {user.age}
      </div>
      <div>{user.hobbies.join(" , ")}</div>
      <button onClick={addHobbies}>增加爱好</button>
      <button onClick={delHobbies}>删除爱好</button>
    </div>
  );
}

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

4. useEffect的使用

使用 useEffect 处理副作用，下面举例说明一下什么是副作用：

function f1() {}       // f1是没作用的函数

function f2() {         // f2是有副作用的函数
    console.log(1)
}

function f3(a, b) {   // f3是纯函数，又称没有副作用的函数
    return a + b
}

• 在 函数 f2 中，依赖了 console.log(1), 依赖的东西可能会被修改，有可能会产生意外的结果。
  依赖了不知从哪来的东西的函数就是有副作用的函数。
• 函数 f3 是纯函数，又称没有副作用的函数，即不依赖外部不知从哪来的东西。

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

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

  //把有副作用的函数放在useEffect里
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}