react 渲染道具_道具钻进React

react 渲染道具

This article will cover two topics:

本文将涵盖两个主题：

• What is props drilling?
  什么是道具钻Kong？
• How to sidestep props drilling
  如何回避道具钻Kong

什么是道具钻探？ (What is Props Drilling?)

First, let’s recap what we know about the props concept. Props are the data we pass or can access, from the top-level components to any number of child components on our website. Take a look at this diagram:

首先，让我们回顾一下我们对道具概念的了解。 道具是我们通过或可以访问的数据，从顶层组件到我们网站上任意数量的子组件。 看一下这个图：

Diagram 1. 图1。

Props drilling (also known as threading) is illustrated in Diagram 2:

道具钻探(也称为穿线)如图2所示：

Diagram 2.

图2。

Props drilling (threading) refers to the process of passing data from the parent component to the exact child component. But, in between, other components owning the props just to pass it down the chain.

道具钻探(线程)是指将数据从父组件传递到确切的子组件的过程。 但是，在这两者之间，拥有道具的其他组件只是将其沿链向下传递。

So, what’s the link between props drilling and our data?

那么，道具钻探和我们的数据之间有什么联系？

Well, Leo has been nominated 7 times for the Oscars, and he only won for his role in the movie “The Revenant.” However, in the React.js world, his name is the props you pass to more than one level even they don’t need it until it reaches the one where you use props in.

好吧，利奥(Leo)已获得7项奥斯卡金像奖提名，而他只是因为在电影《亡魂记》中的角色获胜。 但是，在React.js世界中，他的名字是您传递到多个级别的道具， 即使他们不需要它，直到它到达您在其中使用道具的道具为止。

You can see the code at this link.

您可以在此 链接中 查看代码 。

如何回避道具钻探。 (How to Sidestep Props Drilling.)

There are several solutions to avoid props drilling:

有几种解决方案可以避免道具钻Kong：

• React context API.
  React上下文API。
• Composition.
  组成。
• Render props.
  渲染道具。
• HOC.
  HOC。
• Redux or MobX.
  Redux或MobX。

通过使用React Context API进行钻探来避免道具 (Avoid Props By Drilling Using React Context API)

First, you need to initialize the context. You can do that in the js file or in the top of the parent component: const MyContext = React.createContext() ;

首先，您需要初始化上下文。 您可以在js文件中或父组件顶部执行此操作： const MyContext = React.createContext() ;

After that, move on to create your provider and use the context in it. Then, we need to use the context and warp the component with it which injects the context argument in it.

之后，继续创建您的提供程序并在其中使用上下文。 然后，我们需要使用上下文并使用它扭曲组件，从而在其中注入上下文参数。

Afterward, it is pretty straightforward. You can use the context in the same way you used props.

之后，这非常简单。 您可以像使用道具一样使用上下文。

Note: You can see the code here.

注意：您可以在 此处 查看代码 。

Congratulations, you did it!

恭喜，您做到了！

2.避免按组成钻取道具 (2. Avoid Props Drilling By Composition)

Simply, to compose the react component, you have to divide the component to containers and presenters — stateful and stateless. Then you pass the data as props to children.

简而言之，要组成react组件，您必须将该组件分为有状态的容器和无状态的容器。 然后，您将数据作为道具传递给孩子。

So, the main component will be like this:

因此，主要组成部分将如下所示：

And the list of movies components will contain all the components, like this:

电影组件列表将包含所有组件，如下所示：

Here, pass the props to the Revenant component:

在这里，将道具传递到Revenant组件：

You can find the full code here.

您可以在此处找到完整的代码。

Thanks for reading!

谢谢阅读！

• Composition Vs Inheritance

  组成与继承

• React Composition Patterns From The Ground U

  从地面React合成图案

• Avoid Prop Drilling In React With Context API

  避免使用Context API在React中进行钻探

翻译自: https://medium.com/better-programming/props-drilling-in-react-12da084aaf51

react 渲染道具