react 生命挂钩

In this blog post, we are going to learn -

在这篇博客中，我们将学习-

1. What React hooks are
   什么是React钩子
2. How to use hooks for state management
   如何使用挂钩进行状态管理

Before we start working with hooks, let us take a brief moment to talk about state management.

在开始使用钩子之前，让我们花一点时间讨论状态管理。

State management is managing data that flows between our application components. It could be data flowing inside one component (local state) or data flowing between multiple components (shared state). We need to manage state because sometimes components need to talk to each other through a reliable source of information. In Redux, this reliable source of information is called the store.

状态管理正在管理在我们的应用程序组件之间流动的数据。 它可以是在一个组件内部流动的数据(本地状态)，也可以是在多个组件之间流动的数据(共享状态)。 我们需要管理状态，因为有时组件需要通过可靠的信息源相互通信。 在Redux中，这种可靠的信息源称为存储。

第1部分：React钩子-什么和为什么 (Part 1: React hooks - the what and why)

什么是钩子？ (What are hooks?)

Hooks are functions that lets you access state without using a class component. Hooks are a more natural way of thinking about React. Instead of thinking of what lifecycle methods to use, you can now write components thinking about how and when your data needs to be used.

挂钩是使您无需使用类组件即可访问状态的函数。 钩子是思考React的一种更自然的方式。 现在，您无需考虑使用哪种生命周期方法，而可以编写考虑如何以及何时使用数据的组件。

React hooks were introduced in October 2018 and released in February 2019. It is now available with React 16.8 and higher. React hooks became highly popular as soon as they were introduced.

React钩子于2018年10月引入，并于2019年2月发布。它现在可用于React 16.8及更高版本。 引入后，React钩子就变得非常流行。

为什么React钩子如此受欢迎？ (Why are React hooks so popular?)

1. No boilerplate: To use hooks, you don't need to import any new libraries or write any boilerplate code. You can simply start using hooks out of the box in React 16.8 and up.
   没有样板：使用钩子，不需要导入任何新库或编写任何样板代码。 您可以在React 16.8及更高版本中直接使用开箱即用的钩子。
2. No need to use class components to use state: Traditionally, if you were using a functional component and decided that this component needs React state, you would have to convert it into a React class component. With the addition of hooks, you can use React state inside a functional component.
   无需使用类组件来使用状态：传统上，如果您使用功能组件并确定该组件需要React状态，则必须将其转换为React类组件。 通过添加钩子，可以在功能组件内部使用React状态。

3. More logical way of thinking of React: You no longer have to think about when React mounts a component and what you should do in componentDidMount and remember to clean it up in componentWillUnmount. Now you can think more directly about how data is consumed by your component. React takes care of handling the mounting and cleanup functions for you.

   您再也不用去想阵营坐骑当一个组件，哪些是你应该做的：发生React的思维更合乎逻辑的方式componentDidMount记得把它清理干净的componentWillUnmount 。 现在，您可以更直接地考虑组件如何使用数据。 React会为您处理安装和清理功能。

有哪些常见的钩子？ (What are some common hooks?)

1. useState (1. useState)

useState is used to set and update state like this.state in a class component.

useState用于在类组件中设置和更新类似this.state状态。

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

2. useEffect (2. useEffect)

useEffect is used to carry out a function that does side effects. Side effects could include things like DOM manipulation, subscriptions, and API calls.

useEffect用于执行产生副作用的功能。 副作用可能包括诸如DOM操作，订阅和API调用之类的事情。

useEffect(() => {document.title = 'New Title' 
});

3. useReducer (3. useReducer)

useReducer works similar to how a reducer works in Redux. useReducer is used when state is more complex. You can actually use useReducer for everything you do with useState. It gives a dispatch function in addition to a state variable.

useReducer的工作方式与Redux中reducer的工作方式类似。 当状态更复杂时使用useReducer。 实际上，您可以将useReducer用于useState的所有操作。 除了状态变量外，它还提供了调度功能。

const [ state, dispatch ] = useReducer(reducer, initialArg, init);

4. useContext (4. useContext)

useContext is similar to the context API. In the context API, there is a Provider method and Consumer method. Similarly, with useContext, the closest Provider method is used to read data.

useContext与上下文API相似。 在上下文API中，有一个Provider方法和Consumer方法。 类似地，对于useContext，最接近的Provider方法用于读取数据。

const value = useContext(MyContext);

For more detailed explanation of how each of these work, read the official docs.

有关这些功能的更多详细说明，请阅读官方文档 。

第2部分：如何使用挂钩进行状态管理 (Part 2: How to use hooks for state management)

With React 16.8, you can use hooks out of the box.

使用React 16.8，您可以直接使用钩子。

We are going to build an application to make a list of songs. Here is what it will do -

我们将构建一个应用程序来制作歌曲列表。 这是它的作用-

1. Fetch a GraphQL API for a list of a songs and render it on the UI.
   提取GraphQL API以获得歌曲列表，并将其呈现在UI上。
2. Have the ability to add a song to the list.
   可以将歌曲添加到列表中。
3. When the song gets added to the list, update the list on the frontend and store data on the backend.
   当歌曲被添加到列表中时，在前端更新列表并将数据存储在后端。

By the way, all the code is available on my GitHub. To see this in action, you can go to this CodeSandbox.

顺便说一下，所有代码都可以在我的GitHub上找到 。 要查看实际效果，可以转到此CodeSandbox 。

We are going to use the GraphQL API with this app, but you can do the following steps with a REST API as well.

我们将在此应用程序中使用GraphQL API，但您也可以使用REST API执行以下步骤。

步骤0：主要要点 (Step 0: Main gist)

The main idea here is that we are going to use context to pass data down to our components. We will be using hooks, useContext and useReducer, to read and update this state. We will be using useState to store any local state. For doing side effects such as calling an API, we are going to use useEffect.

这里的主要思想是我们将使用context将数据向下传递到我们的组件。 我们将使用钩子useContext和useReducer来读取和更新此状态。 我们将使用useState来存储任何本地状态。 为了产生诸如调用API的副作用，我们将使用useEffect 。

Let's get started!

让我们开始吧！

步骤1：设定内容 ( Step 1: Set up context)

import { createContext } from 'react';const Context = createContext({songs: []
});export default Context

步骤2：初始化您的状态。 称这个initialState (Step 2: Initialize your state. Call this initialState)

We are going to use this context from to initialize our state:

我们将使用from的上下文来初始化我们的状态：

const initialState = useContext(Context);

步骤3：使用useReducer设置reducers (Step 3: Setup reducers using useReducer)

Now we are going to set up reducers with an initialState with useReducer in App.js:

现在，我们将在App.js中使用useReducer设置带有initialState的reduceors：

const [ state, dispatch ] = useReducer(reducer, initialState);

步骤4：找出哪个是顶层组件。 (Step 4: Figure out which is the top level component.)

We will need to set up a Context Provider here. For our example, it will be App.js. Also, pass in the dispatch returned from useReducer here so that children can have access to dispatch:

我们将需要在此处设置一个上下文提供程序。 对于我们的示例，它将是App.js 另外，在此处传递useReducer返回的调度，以便子代可以访问调度：

<Context.Provider value={state,dispatch}>// children components<App /><Context.Provider value={state,dispatch}>

步骤5：现在使用useEffect挂钩连接API (Step 5: Now hook up the APIs using the useEffect hook)

const {state, dispatch} = useContext(Context);useEffect(() => {if(songs) {dispatch({type: "ADD_CONTENT", payload: songs});}}, [songs]);

步骤6：更新状态 (Step 6: Update state)

You can use useContext and useReducer to receive and update global application state. For local state like form components, you can use useState.

您可以使用useContext和useReducer来接收和更新全局应用程序状态。 对于表单组件之类的本地状态，可以使用useState 。

const [artist, setArtist] = useState("");const [lyrics, setLyrics] = useState("");

And that's it! State management is now set up.

就是这样！ 现在建立了状态管理。

Did you learn anything new? Have something to share? Tweet me on Twitter.

你学到新东西了吗？ 有东西要分享？ 在Twitter上发给我。

翻译自: https://www.freecodecamp.org/news/hooks-and-graphql/

react 生命挂钩