介绍

在本文中，您将探索React Hooks，这是 React 最新版本 16.8 中的一项新功能。React Hooks 是函数，作为状态和生命周期方法的模块化替代品。React Hooks 允许您构建基于函数的组件，而不是类组件。

先决条件

要完成本教程，需要了解 React。要了解有关 React 的更多信息，请查看如何在 React系列中编码。

分析useState()方法

在类组件中，您可以将 React 导入index.js文件并创建类对象的实例JustAnotherCounter。您将添加一个状态和一个函数来更新属性count：

import React, { Component } from 'react';

class ScoreCounter extends Component {
  state = {
    count: 0
  };

  setCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>

        <button onClick={this.setCount}>Count Up To The Moon</button>
      </div>
    );
  }
}

在您的render生命周期方法中，您将返回状态中保存的值和通过每次单击调用您的函数的按钮。

让我们将您的ScoreCounter类组件作为功能组件进行比较。

使用 React Hooks，您可以index.js使用更少的代码行将状态和生命周期方法压缩到文件中的功能组件中。导入useState解构对象：

 import React, { useState } from 'react';

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

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>Count Up To The Moon</button>
    </div>
  );
}

该useState()方法将您的状态对象分解为一个数组，并为其元素分配调用hook的值。第一个元素是状态，而第二个元素是作为.setState()方法运行的函数。您传递给useState()方法的参数作为初始状态值，这里的数字0作为您的计数器。您可以传入任何数据类型，例如数组、对象、字符串和数字作为初始状态值。

每次单击按钮时，该setCount()函数都会将您的状态作为参数传递给1。

现在，您的ScoreCounter功能组件支持更少的语法以提高代码可读性。

您还可以useState()在同一函数中多次使用该方法。在您的index.js文件中，导入useState并声明功能组件Login：

import React, { useState } from 'react';

function Login() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  return (
    <div className="login">
      <form>
        <label>
            Username: <input value={username} onChange={event => setUsername(event.target.value)}/>
            <br />
            Password: <input value={password} onChange={event => setPassword(event.target.value)}/>
          </label>
        <button>Submit</button>
      </form>
    </div>
  );
}

的Login功能部件采用useState()方法多次，以定义和设置的形式的用户名和密码，以及轮廓逻辑为每个input字段。

了解了useState()，让我们考虑其他 React Hook 方法。

使用useEffect()方法

反应钩介绍了useEffect()替换类组件的生命周期方法的方法componentDidMount，componentDidUpdate以及componentWillUnmount。该方法还允许在您的功能组件中产生副作用，例如更改文档对象模型中的内容和获取数据。useEffect()将在每个组件渲染后运行。

让我们将类的生命周期方法调用与功能组件进行比较。

在您的index.js文件中，导入useEffect到您的ScoreCounter组件中：

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

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

  useEffect(() => {
    console.log(count); 
    document.title = `Your new score is ${count}`;
  });

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>Count Up To The Moon</button>
    </div>
  );
}

在这里，useEffect()会产生登录控制台以检查 中的初始状态值count和更新文档对象模型的副作用。

由于useEffect()每次组件呈现时都会运行，因此您可以设置第二个参数，一个数组，以存储每个实例并在值更改时调用该方法。

在您的index.js文件中，应用一个空数组作为您的useEffect()方法的第二个参数：

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

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

  useEffect(() => {
    console.log(count); 
    document.title = `Your new score is ${count}`;
  }, []); 
}

每次渲染到您的ScoreCounter组件时，该useEffect()方法都会将 的每个实例存储count在数组中，如果该值与之前的调用不同，则更新组件。在一次调用中，useEffect()结合了componentDidMount和componentDidUpdate生命周期方法中的功能。

要模拟componentWillUnmount生命周期方法，请useEffect()在index.js文件中的方法中返回一个函数：

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

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

  useEffect(() => {
    console.log(count); 
    document.title = `Your new score is ${count}`;

    return () => console.log(`Component is unmounted`);
  }, []); 
}

通过声明和返回一个匿名函数，该useEffect()方法在一次调用中卸载一个组件，这里使用 aconsole.log来检查它的状态。

为了获取数据，通过fetch内useEffect()从外部API获取信息。

在您的index.js文件中，导入useState和useEffect. 声明一个GitHubUsers功能组件，并fetch在 的主体内传入useEffect：

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

function GitHubUsers() {
  const [user, setUsers] = useState([]);

  useEffect(() => {
    fetch('https://api.github.com/users')
      .then(response => response.json())
      .then(data => {
        setUsers(data); // set users in state
      });
  }, []); 

注意第二个参数设置为空数组。这是通知useEffect()运行一次。该useEffect()方法将调用fetch以调用GitHub API并将响应设置为 JSON 对象。

调用成功后，在GitHubUsers组件中包含 return 语句以遍历数据并输出 GitHub 用户信息：

  return (
    <div className="section">
      {users.map(user => (
        <div key={user.id} className="card">
          <h5>{user.login}</h5>
        </div>
      ))}
    </div>
  );
}

该useEffect()方法在一次调用中获取类组件的所有三个生命周期方法中的功能，以登录控制台、更新文档对象模型并从外部 API 获取数据。

结论

该useState()和useEffect()方法都很强大增加的阵营库。现在使用 React Hooks，您可以在更短的代码行中使用状态和生命周期方法最大化您的功能组件。

有关 React Hooks 的更多信息，请查看如何使用 React Components 上的 Hooks文章管理状态。