by Bill Girten

比尔·吉尔滕(Bill Girten)

使用Typescript的巧妙React上下文技巧- 不是 Redux (Clever React context tricks using Typescript — not Redux)

by Bill Girten, Martin Maza, and Alison Stuart

由Bill Girten ，Martin Maza和Alison Stuart 撰写

TLDR; Leverage React’s Context API as a light and powerful alternative to Redux.

TLDR； 利用React的Context API作为Redux的轻便而强大的替代方案。

Let’s face it: when we first started to play with React, it was like a sugar rush. Just create a .jsx file, add a couple of dependencies, and Wham-O! — lightning-quick pages.

让我们面对现实：当我们第一次开始使用React时，就像是抢糖。 只需创建一个.jsx文件，添加几个依赖项，然后Wham-O！ —快速的页面。

That’s when the excitement begins.

那就是兴奋开始的时候。

Next thing you know, you feel limitless as you engineer the presentation layer of your application at jet-speed. Then you get this crazy idea to make an AJAX call to some microservice and manage the state of the app.

接下来您会知道，在以极快的速度设计应用程序的表示层时，您会感到无穷无尽。 然后，您会得到这个疯狂的主意，以对某些微服务进行AJAX调用并管理应用程序的状态。

That’s when the pain begins…

那是痛苦开始的时候……

So you search Al Gore’s amazing Internet and find out the go-to solution to manage the app’s state is Dan Abramov’s Redux. Now you’re learning about Actions, Reducers and Stores and diving into ImmutableJS just so you can manage state. After you mapStateToProps, your React component is typically engaged in what is popularly termed “prop drilling”.

因此，您搜索Al Gore令人惊叹的Internet并找到管理该应用程序状态的最佳解决方案是Dan Abramov的Redux 。 现在，您将学习有关操作，缩减器和存储的知识，并深入了解ImmutableJS ，以便您可以管理状态。 mapStateToProps之后，您的React组件通常会参与通常称为“ 道具钻探 ”的活动。

Initially, you’re okay with passing down properties from parent to child and, at times, to grandchild. However, as the application becomes more complex you notice that sometimes you are passing some properties through the component tree that are not used by a given descendant component.

最初，您可以将属性从父级传递到子级，有时还传递给孙子。 但是，随着应用程序变得越来越复杂，您会注意到有时您会通过组件树传递某些给定后代组件未使用的属性。

Now what?!? You want to be able to manage the app’s state, but you want to do so without passing properties through the hierarchy. It’s time for some clever tricks.

怎么办？！？ 您希望能够管理应用程序的状态， 但是却希望不通过层次结构传递属性。 现在是时候进行一些技巧了。

React Context API如何提供帮助 (How the React Context API helps)

Facebook released the Context API in React v16.3 as a mechanism to pass the app’s assets through a Provider to any child component listening as a Consumer. This eliminates the “prop drilling” paradigm. Imagine: at any level, a parent component could define its own state (including methods) and provide them directly to any participating consumer. Additionally, you can set state by using the methods passed in by the Context’s Provider.

Facebook的发布做出Reactv16.3作为一种机制，通过提供任何子组件监听作为一个消费者通过应用程序的资产上下文API。 这消除了“道具钻探”范式。 想象一下：在任何级别，父组件都可以定义其自己的状态(包括方法)，并将其直接提供给任何参与的使用者。 此外，您可以使用上下文提供者传递的方法来设置状态。

We’ll show you how to do this in the example below.

我们将在下面的示例中向您展示如何执行此操作。

Let’s Roll!

来吧！

bgirten/clever-React-Context-tricksnew React Context experimments. Contribute to bgirten/clever-React-Context-tricks development by creating an account on…github.com

bgirten / clever-React-Context会触发 新的React Context实验。 通过在… github.com 上创建一个帐户为bgirten / clever-React-Context-tricks开发做出贡献

We begin by creating an “initial” State object which will be passed from the App component to the child components. Notice that this initialState also includes methods. This approach provides the capability of defining methods only once, so you can reuse them more easily.

我们首先创建一个“初始”状态对象，该对象将从App组件传递到子组件。 请注意，此initialState还包括方法。 此方法仅提供一次定义方法的功能，因此您可以更轻松地重用它们。

Pass the initial State into the App component and provide a Context. Every component enclosed in the MyContext.Provider tag will have the capability of consuming the context (which in this case includes the initial state of the App component).

将初始状态传递到App组件中并提供上下文。 MyContext.Provider标记中包含的每个组件都具有使用上下文的能力(在这种情况下，该上下文包括App组件的初始状态)。

Bypass the “prop drilling” from the child component to grandchild component.

从子组件到孙组件绕过“辅助钻探”。

The local method handleFetchEvent provides the capability to execute the method passed by the context (in this case, updateStats). The component’s render method fires off due to this.setState.

本地方法handleFetchEvent提供了执行上下文传递的方法的能力(在本例中为updateStats)。 由于this.setState，组件的render方法将触发。

On line 21, we consume the incoming Context.Provider, allowing us to access all those members and methods defined in the App component’s initial state.

在第21行，我们使用了传入的Context.Provider，从而允许我们访问App组件的初始状态中定义的所有那些成员和方法。

Even though methods can be passed from higher levels of the DOM tree, we can also invoke re-rendering of the DOM by simply calling the setState method directly for a given React component.

即使可以从更高级别的DOM树中传递方法，我们也可以通过直接为给定的React组件直接调用setState方法来调用DOM的重新渲染。

And here we have the loaded application. Thanks for following along — you can find more awesome content from these authors at:

在这里，我们有已加载的应用程序。 感谢您的关注-您可以在以下位置找到这些作者的更多精彩内容：

Alison’s Github, Martin’s Github, and Bill’s Github

艾莉森的Github， 马丁的Github和比尔的Github

翻译自: https://www.freecodecamp.org/news/clever-react-context-tricks-using-typescript-not-redux-7e2b9c7e5bf6/