React Hooks 新手指南：React Hooks 入门指南🔥🔥

这是一篇 React Hooks 入门指南。阅读本指南需要一些时间，所以不妨泡杯咖啡或者喝点你喜欢的东西。

目录

1. 什么是钩子？
2. 课程有什么问题？
3. React 的状态钩子
4. useState() 的语法是什么？
5. useState() 函数会给我们提供什么？
6. 使用多个状态钩子
7. React 的 Effect Hook
8. 仅当某些内容发生变化时才运行效果钩子

1. 什么是钩子？

Hooks 是 React 16.8 版本中引入的新特性。它允许你在不编写类的情况下使用状态和其他 React 特性。Hooks 是函数组件中“挂钩”到 React 状态和生命周期特性的函数。它不能在类内部使用。

不过别担心，类并没有被移除或不被鼓励。React 的开发者们将会拥有更多编码方式！

2. 课堂教学有什么问题？

React Hooks 的入门介绍中对此有很好的阐述：请查看文档。

课程方面存在一些问题

在组件之间重用有状态逻辑非常困难。

React 本身并没有提供将可复用行为“附加”到组件的方法。而 Hooks 则允许你将状态逻辑从组件中提取出来，以便进行独立测试和复用。Hooks
允许你在不改变组件层级结构的情况下复用状态逻辑。这使得在多个组件之间或与社区共享 Hooks 变得非常容易。

阶级划分既让人困惑，也让机器感到困惑。

简而言之，类有时会让人困惑，而且可以有多种编写方式。深入研究别人的项目，你可能会发现语法和风格选择五花八门。
通过允许将类转换为更小的函数式组件，我们可以进一步将应用程序拆分成更小、更专注的组件。

3. React 的状态钩子

Hook 状态是 React 应用中声明状态的新方式。Hook 使用useState()函数式组件来设置和获取状态。

假设我们有一个这样的组件：

import React from 'react';

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

该组件将统计按钮的点击次数。

借助 React Hooks，我们可以将该类简化为以下函数式组件：

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

注意一下，对于刚开始学习 React 的初学者来说，函数式组件要容易得多。

4. 什么是 useState() 语法

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"  
  const [count, setCount] = useState(0);

调用 `call` 函数会做什么useState？
它声明一个“状态变量”。我们的变量被命名为 `state` count，但我们可以把它命名为任何其他名称，例如 `state` state。

我们应该传递什么useState参数？
Hook 的唯一参数useState()是初始状态。在类中，状态应该是 Object 类型，但在 Hook 中则不一定是 Object 类型。如果只需要一个数字或字符串，我们也可以使用它们。在我们的示例中，`0`0就是初始状态。

方括号是什么意思？

您可能已经注意到，我们在声明状态变量时会使用方括号：

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

这种 JavaScript 语法叫做“数组解构”。它意味着我们创建了两个新变量 acount和setCountb，其中 acount被设置为函数返回的第一个值useState，bsetCount是第二个值。

5. useState() 会给我们带来什么？

useState它给了我们两个变量，我们可以随意命名这两个变量。只需记住：

1. 第一个变量是值。类似于this.state
2. 第二个变量是一个用于更新该值的函数。类似于this.setState

useState 函数的最后一部分是传递给它的参数。useState参数是初始状态值。在我们的计数器示例中，初始值为 0。

6. 使用多个状态钩子

我们甚至可以useState()在同一个函数中多次使用。

function ExampleWithManyStates() {
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);

7. React 的 Effect Hook

Effect Hook允许你在函数组件中执行副作用。它不使用类组件中可用的组件生命周期方法。换句话说，Effects Hook 等同于componentDidMount()组件componentDidUpdate()生命componentWillUnmount()周期方法。

副作用是指你希望应用程序产生的效果，例如：

• 正在获取数据
• 手动更改 DOM（文档标题）
• 设置订阅

每次渲染后都会运行特效，包括第一次渲染。

让我们将类与函数式组件进行比较：

import React, { Component } from 'react';

class Example extends Component {
  componentDidMount() {
    console.log('this is componentDidMount!');
    document.title = 'changeTitle';
  }

  render() {
    return <div>stuff goes here</div>;
  }
}

使用效果钩子时，我们使用useEffect()：

function Example() {
  useEffect(() => {
    console.log('this is useEffect ');
    document.title = 'changeTitle';
  });

  return <div>stuff goes here</div>;
}

8. 仅当某些内容发生变化时才运行效果钩子

由于useEffect()每次组件渲染时都会运行，我们如何才能让它只在组件挂载时运行一次呢？Effect Hook 可以接受第二个参数，即一个数组。它会遍历该数组，只有当数组中的某个值发生变化时才会运行 effect。

componentDidMount：运行一次

// only run on mount. pass an empty array
useEffect(() => {
  // only runs once
}, []);

componentDidUpdate：在更改时运行

// only run if count changes
useEffect(
  () => {
    // run here if count changes
  },
  [count]
);

现在，你已经对 Hooks 及其工作原理有了一些了解。如果你想深入学习 Hooks，应该查阅 React 官方开发者的文档。

如果这对您理解 Hooks 有帮助，请点赞。