react context_如何使用Context API开发React超能力-CSDN博客

react context

Hey everyone! ❤️

嘿大家！ ❤️

This time I’m going to show how to use the Context API in React.

这次，我将展示如何在React中使用Context API。

Context provides a way to pass data through the component tree without having to pass props down manually along every level.

上下文提供了一种通过组件树传递数据的方法，而不必沿着每个级别手动传递道具。

React typically works with a top-down (parent to child) flow of data. This works very well in a cascade of props, always giving the virtual DOM ability to check it and trigger re-renderings when they’re needed.

React通常与自顶向下(父级到子级)数据流一起工作。这在一系列道具中效果很好，始终为虚拟DOM提供检查它并在需要时触发重新渲染的功能。

We also have local state inside each stateful component to manage changes allowing the user to change data that is propagated via props.

我们还在每个有状态组件内部都有本地状态，以管理更改，从而允许用户更改通过prop传播的数据。

When we want to abstract a little bit more, we can use Redux to abstract state or props to an “external” store, a single source of truth — if you haven’t read my article about How to get the ball rolling with Redux in ten minutes, feel free to do it!

当我们想进一步抽象时，我们可以使用Redux将状态或道具抽象到“外部”商店，这是一个单一的事实来源—如果您还没有阅读我的文章《如何使Redux滚滚而来》，十分钟，随便吧！

Even with all these tools in the tool belt it can be cumbersome to handle some type of data (props, state, whatever) inside our application.

即使使用工具带中的所有这些工具，在我们的应用程序中处理某些类型的数据(属性，状态等)也很麻烦。

Imagine current authenticated user info, themes, locale️ or even language related data.

试想一下，当前已验证用户信息 ，主题 ，locale️ØR 偶数咒骂r ELA 特德数据。

This is information that is considered to be “global” in a tree of React components. Once you change this info, all the application should re-render to get up-to-date with it.

这是在React组件树中被视为“全局”的信息。 更改此信息后，所有应用程序都应重新渲染以获取最新信息。

Context is designed to share data that can be considered “global”.

上下文旨在共享可以视为“全局”的数据。

So, to understand this, let’s get our hands dirty! If you want you can pull my GitHub repo here and play a bit with these things we’re going to do:

因此，要了解这一点，让我们动手吧！ 如果您愿意，可以在这里获取我的GitHub存储库，并尝试使用以下方法：

01.弄脏我们的手 (01. Getting Our Hands Dirty)

Let’s build an App, which has a Dashboard.

让我们构建一个带有仪表板的应用程序。

Inside the Dashboard there’s a Widget which renders a Themed Button.

仪表板内部有一个呈现主题按钮的小部件。

The Themed Button allows the user to change the App Theme.

主题按钮允许用户更改应用程序主题。

Something like this:

像这样：

So, let’s start with our App component:

因此，让我们从我们的App组件开始：

This component has a state, a changeTheme method and a render which renders the <Dashboard /> Component.

该组件具有状态， changeTheme方法和呈现<Dashboard />组件的呈现器。

Dashboard Component receives props and renders a Widget Component passing the changeTheme and theme props.

仪表板组件接收道具并渲染一个通过changeTheme和theme道具的Widget组件。

Widget Component receives props from its parent and renders a Button passing into it changeTheme and theme props.

Widget Component从其父级接收道具，并渲染一个将changeTheme和主题道具传递给它的Button。

The Button receives the props from its parent and finally makes use of it rendering a button with a className that depends on the theme that was chosen by the user.

Button从其父级接收道具，最后利用它呈现一个className的按钮，该className取决于用户选择的主题。

The Button also allows the user to switch the theme from red to blue and vice-versa. That’s why it has an onClick handler which triggers the changeTheme method passed top down from App Component -> Dashboard -> Widget -> Button.

该按钮还允许用户将主题从红色切换为蓝色，反之亦然。 这就是为什么它具有onClick处理程序，该处理程序触发从App Component-> Dashboard-> changeTheme > Button自上而下传递的changeTheme方法的原因。

As you see everyone, this is a lot of props, a lot of complexity, a lot of repeated code, a lot of ?.

如大家所见，这是很多道具，很多复杂性，很多重复代码，很多？

So, at this moment, you’re asking how can we avoid this? How can we abstract all these theme things and make our code cleaner?

所以，此刻，您在问我们如何避免这种情况？ 我们如何抽象所有这些主题内容并使代码更整洁？

The answer for this is making use of the Context API provided by React!!

答案是利用React提供的Context API！

02.实施上下文API (02. Implementing the Context API)

Okay, first things first.

好吧，第一件事。

Let’s take all the theme related complexity outside of our main App Component.

让我们将所有与主题相关的复杂性带到我们的主要App组件之外。

To do this we’ve started by creating a ThemeContext using the React.createContext().

为此，我们ThemeContext使用React.createContext()创建一个ThemeContext 。

Then we’ve created a stateful component called ThemeProvider which will handle the state, the changeTheme method which is specific to this theming concern.

然后，我们创建了一个名为ThemeProvider的有状态组件，该组件将处理状态，即特定于此主题问题的changeTheme方法。

In the render method we’ll return the <ThemeContext.Provider> with the value props which self-contains whatever we want to propagate. This Component will embrace the { this.props.children } using the render props pattern.

在render方法中，我们将返回带有value props的<ThemeContext.Provider>，它包含我们想要传播的内容。 该组件将使用render props模式包含{this.props.children}。

By the way, if you want to know more about the render props pattern don’t miss my article about it here.

顺便说一句，如果您想了解有关渲染道具模式的更多信息，请不要在这里错过我关于它的文章。

This way we can inject into everything that the <ThemeProvider /> embraces the value props with our state and changeTheme method.

这样，我们就可以通过state和changeTheme方法将<ThemeProvider />包含值道具的所有内容注入。

Okay, next step is to clean all the props ? we’ve passed in our top down parent to child flow and, very important, to wrap the return of our App Component in our <ThemeProvider/> component — this will give “context” to our App ?.

好吧，下一步是清理所有道具吗？ 我们已经将自上而下的父级传递给子流，并且非常重要的是，将App组件的返回包装在<ThemeProvider />组件中–这将为我们的App提供“上下文”？

It’s so much cleaner now, everyone! ❤️ I’m so happy with this! ?

大家都好干净！ ❤️我对此很满意！ ？

Let’s focus on our Button Component:

让我们关注按钮组件：

Well, here we’ve just connected the <ThemeContext.Consumer> Component and inside of it we’ve passed a function to be rendered as a child with the context.

好了，在这里，我们已经连接了<ThemeContext.Consumer>组件，并且在其中传递了一个函数，该函数将作为上下文的子对象呈现。

For those of you who aren’t aware this <> </> notation is the same as doing<React.Fragment>;</React.Fragment>.

对于那些不知道此<> </>表示法的人来说，与执行<React.Fragment>; </ React.Fragment>相同。

03.结论 (03. Conclusion)

I had so much fun with this, everyone! We’ve been able to encapsulate all the theming logic inside a proper component called <ThemeProvider>.

所有人，我对此非常开心！ 我们已经能够将所有主题逻辑封装在称为<ThemeProvider>的适当组件中。

We’ve injected the context where we needed it. In this case it was in the <App> Component but it could be done anywhere above the place we want to consume the data.

我们在需要的地方注入了上下文。 在这种情况下，它位于<App>组件中，但可以在我们要使用数据的位置上方的任何位置进行。

In the end, we’ve consumed the data at the required point. In this case it was in a Button Component.

最后，我们在所需的点使用了数据。 在这种情况下，它位于按钮组件中。

We’ve cleaned our app from all the top-down props flow.

我们已经清除了所有自上而下道具流的应用程序。

It’s a win-win, my friends! ?

我的朋友，这是双赢！ ？

Thank you very much, and always remember to “Be Strong and Code On!” ?

非常感谢，永远记住“坚强并编码！” ？