📌  相关文章
📜  React Hooks

📅  最后修改于: 2020-12-19 08:48:17             🧑  作者: Mango

反应钩

挂钩是React 16.8版本中引入的新功能。它使您无需编写类即可使用状态和其他React功能。挂钩是从功能组件“挂钩” React状态和生命周期功能的函数。它在类内部不起作用。

挂钩是向后兼容的，这意味着它不包含任何重大更改。而且，它不会取代您对React概念的了解。

何时使用挂钩

如果您编写了一个函数组件，然后想要向其添加一些状态，则之前需要先将其转换为类。但是，现在您可以通过在现有函数组件内部使用挂钩来做到这一点。

钩子规则

挂钩类似于JavaScript函数，但是使用它们时需要遵循这两个规则。挂钩规则可确保组件中的所有有状态逻辑在其源代码中均可见。这些规则是：

1.仅在顶层调用挂钩

不要在循环，条件或嵌套函数中调用Hook。挂钩应始终在React函数的顶层使用。此规则可确保每次渲染组件时都以相同的顺序调用Hook。

2.仅从React函数调用挂钩

您不能从常规JavaScript函数调用Hook。相反，您可以从React函数组件中调用Hook。挂钩也可以从自定义挂钩中调用。

React Hooks的前提条件

  • 节点版本6或更高版本
  • NPM 5.2或更高版本
  • 用于运行React App的Create-react-app工具

React Hooks安装

要使用React Hooks，我们需要运行以下命令：

$ npm install react@16.8.0-alpha.1 --save
$ npm install react-dom@16.8.0-alpha.1 --save

上面的命令将安装支持React Hooks的最新React和React-DOM alpha版本。确保package.json文件列出了React和React-DOM依赖项，如下所示。

"react": "^16.8.0-alpha.1",
"react-dom": "^16.8.0-alpha.1",

钩子状态

钩子状态是在React应用中声明状态的新方法。 Hook使用useState()功能组件来设置和检索状态。让我们通过以下示例了解Hook状态。

App.js

import React, { useState } from 'react';

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

  return (
    

      
You clicked {count} times

      
    

  );
}
export default CountApp;

输出：

在上面的示例中，useState是Hook，需要在函数组件内部调用以向其添加一些本地状态。 useState返回一对，其中第一个元素是当前状态值/初始值，第二个元素是允许我们更新它的函数。之后，我们将从事件处理程序或其他地方调用此函数。 useState与类中的this.setState相似。没有钩子的等效代码如下所示。

App.js

import React, { useState } from 'react';

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

        
You clicked {this.state.count} times

        
      

    );
  }
}
export default CountApp;

钩效应

效果挂钩使我们可以在函数组件中执行副作用(动作)。它不使用类组件中可用的组件生命周期方法。换句话说，效果挂钩等效于componentDidMount()，componentDidUpdate()和componentWillUnmount()生命周期方法。

副作用具有大多数Web应用程序需要执行的常见功能，例如：

  • 更新DOM，
  • 从服务器API获取和使用数据，
  • 设置订阅等

让我们通过以下示例了解挂钩效应。

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

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

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    

      
You clicked {count} times

      
    

  );
}
export default CounterExample;

上面的代码基于先前的示例，具有一个新功能，该功能将文档标题设置为自定义消息，包括单击次数。

输出：

在React组件中，有两种类型的副作用：

  • 无需清理的效果
  • 清理效果

无需清理的效果

它在useEffect中使用，它不会阻止浏览器更新屏幕。它使应用程序响应速度更快。不需要清除效果的最常见示例是手动DOM突变，网络请求，日志记录等。

清理效果

某些效果需要在DOM更新后进行清理。例如，如果我们要建立对某些外部数据源的预订，那么清理内存很重要，这样就不会引起内存泄漏。当组件卸载时，React执行内存清理。但是，我们知道，效果会为每种渲染方法运行，而不仅仅是一次。因此，React还可以在下次运行效果之前清除先前渲染的效果。

定制钩

自定义Hook是JavaScript函数。自定义挂钩的名称以“ use”开头，可以调用其他挂钩。自定义的Hook就像常规函数，开头的“ use”一词表明该函数遵循Hooks的规则。构建自定义挂钩可以使您将组件逻辑提取到可重用的函数中。

在下面的示例中，让我们了解自定义挂钩的工作方式。

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

const useDocumentTitle = title => {
  useEffect(() => {
    document.title = title;
  }, [title])
}

function CustomCounter() {
  const [count, setCount] = useState(0);
  const incrementCount = () => setCount(count + 1);
  useDocumentTitle(`You clicked ${count} times`);
  // useEffect(() => {
  //   document.title = `You clicked ${count} times`
  // });

  return (
    

      
You clicked {count} times

      
    

  )
}
export default CustomCounter;

在上面的代码片段中，useDocumentTitle是一个自定义的Hook，它使用一个参数作为文本字符串，即标题。在此挂钩中，我们将调用useEffect挂钩并设置标题(只要标题已更改)。第二个参数仅在标题的本地状态不同于我们传递的标题时才执行该检查并更新标题。

注意：自定义Hook是自然遵循Hooks设计的约定，而不是React功能。

内置挂钩

在这里，我们描述了React中内置的Hook的API。内置的挂钩可以分为两部分，如下所示。

基本挂钩

  • useState
  • useEffect
  • useContext

额外的挂钩

  • useReducer
  • useCallback
  • useMemo
  • useRef
  • useImperativeHandle
  • useLayoutEffect
  • useDebugValue