react转跳

Often times, the inability to debug a certain error stems from not understanding some foundational concept.

通常，无法调试某些错误是由于不了解某些基本概念而引起的。

You can say the same thing if you don’t understand some more advanced concepts because you lack the knowledge of certain fundamentals.

如果您不了解某些更高级的概念，因为您缺乏某些基本知识，那么您可以说同样的话。

In this article, I hope to explain what I consider some of the most important foundational React concepts you need to understand.

在本文中，我希望解释一下我认为您需要了解的一些最重要的基础React概念。

These concepts aren’t particularly technical. There are lots of other articles that cover those — things like props, state, context, setState , and so on.

这些概念不是特别技术。 还有许多其他文章涵盖这些内容，例如props ， state ， context ， setState等。

However, in this article I’ll focus on some more conceptual knowledge that forms the basis of most technical things you’ll do in React.

但是，在本文中，我将重点介绍一些更多的概念性知识，这些知识构成您将在React中进行的大多数技术工作的基础。

Ready?

准备？

React是如何在后台运行的 (How React works under the hood)

One of the first things everyone learns in React is how to build components. I’m pretty sure you learned that too.

每个人在React中学习的第一件事就是如何构建组件。 我很确定您也了解了这一点。

For example:

例如：

// functional component function MyComponent() {  return <div> My Functional Component </div> }// class based component class MyComponent extends React.Component {  render() {     return <div> My Class Component </div>   }}

Most components you write will return some elements:

您编写的大多数组件都将返回一些元素：

function MyComponent() {  return <span> My Functional Component &lt;/span> //span element}class MyComponent extends React.Component {  render() {     return <div> My Class Component &lt;/div> //div element  }}

Under the hood, most components return a tree of elements.

在内部，大多数组件都返回一棵元素树。

Now, you must also remember that components are like functions that return values based on their props and state values.

现在，你还必须记住，组件是一样的功能，基于它们的返回值props和state值。

Consequently, whenever the props or state values of a component change, a new tree of elements is rendered.

因此，每当props或state ，分量变化的值，元素的一个新的树被渲染。

If the component is a class-based component, the render function is invoked to return the tree of elements.

如果组件是基于类的组件，则调用render函数以返回元素树。

class MyComponent extends React.Component {    render() {    //this function is invoked to return the tree of elements  }}

If the component is a functional component, its return value yields the tree of elements.

如果组件是功能组件，则其返回值将生成元素树。

function MyComponent() {     // the return value yields the tree of elements   return <div>

</div>}

Why is this important?

为什么这很重要？

Consider a component, <MyComponent /> which takes in a prop as shown below:

考虑的成分， <MyComponent />这需要in如下所示的道具：

<MyComponent name='Ohans'/>

When this component is rendered, a tree of elements is returned.

呈现此组件时，将返回元素树。

What happens when the value of name changes?

name值更改时会发生什么？

<MyComponent name='Quincy'/>

Well, a new tree of elements is returned!

好了，返回了新的元素树！

Okay.

好的。

Now, React has in its custody two different trees — the former and the current element tree.

现在，React拥有两个不同的树-前者树和当前元素树。

At this point, React then compares both trees to find what exactly has changed.

在这一点上，React然后比较两棵树以找出确切的变化。

Most times the entire tree hasn’t changed. Just some updates here and there.

大多数时候，整个树都没有改变。 这里和那里只是一些更新。

Upon comparing these two trees of elements, the actual DOM is then updated with the change in the new element tree.

通过比较这两个元素树，然后使用新元素树中的更改来更新实际DOM。

Easy, huh?

容易吧？

This process of comparing two trees for changes is called “reconciliation”. It’s a technical process, but this conceptual overview is just great for understanding what goes on under the hood.

比较两棵树的变化的过程称为“对帐”。 这是一个技术过程 ，但是此概念性概述仅适用于了解幕后情况。

仅React更新什么是必要的。 真正？ (React Only Updates What’s Necessary. True?)

When you get started with React, everyone’s told how awesome React is — particularly how it just updates the essential part of the DOM being updated.

当您开始使用React时，每个人都会被告知React是多么的出色-尤其是它如何更新正在更新的DOM的基本部分。

Is this completely true?

这是真的吗？

Yes it is.

是的。

However, before React gets to updating the DOM, remember that under the hood — it had first constructed the element tree for the various components and did the essential “diffing” before updating the DOM. In other words, it had compared the changes between the previous and current element trees.

但是，在React开始更新DOM之前，请记住，在幕后-它首先为各种组件构建了元素树，并在更新DOM之前做了必要的“区分”。 换句话说，它已经比较了先前元素树和当前元素树之间的变化。

The reason I re-iterate this is, if you’re new to React you may be blind to the performance ditches dug in your app because you think React just updates the DOM with what’s necessary.

我再次重申的原因是，如果您是React的新手，那么您可能对应用程序中挖掘的性能缺陷视而不见，因为您认为React只是根据需要更新了DOM。

While that is true, the performance concerns in most React apps begin with the process before the DOM is updated!

确实如此，但大多数React应用程序中的性能问题都始于DOM更新之前的过程！

浪费的渲染与视觉更新 (Wasted Renders vs. Visual Updates)

No matter how small, rendering a component element tree takes some time (no matter how minute). The time for rendering gets larger as the component element tree increases.

不管多么小，渲染组件元素树都需要一些时间(无论多么微小)。 渲染时间随着组成元素树的增加而变大。

The implication of this is that in your app you do not want React re-rendering your component element tree if it is NOT important.

这意味着如果您的应用程序不重要，则您不希望React对其组件元素树进行重新渲染。

Let me show you a quick example.

让我给你看一个简单的例子。

Consider an app with a component structure as shown below:

考虑具有以下组件结构的应用程序：

The overall container component, A receives a certain prop. However, the sole reason for this is to pass the props down to component D.

整个容器组件A接收特定的道具。 但是，这样做的唯一原因是将道具传递到组件D

Now, whenever the prop value in A changes, the entire children elements of A are re-rendered to compute a new element tree.

现在，只要在道具值A改变，整个子元素A都重新绘制到计算新的元素树。

By implication, the components B and C are also re-rendered even though they haven’t changed at all! They have not received any new props!

言下之意，即使组件B和C完全没有变化，它们也将被重新渲染！ 他们还没有收到任何新道具！

This needless re-rendering is what is termed a “wasted” render.

这种不必要的重新渲染就是所谓的“浪费”渲染。

In this example, B and C need not re-render, but React doesn’t know this.

在此示例中， B和C不需要重新渲染，但是React不知道这一点。

There are many ways to deal with such issue, and I cover that in my recent article, How to Eliminate React Performance Issues.

有很多方法可以解决此类问题，我在最近的文章“ 如何消除React性能问题”中对此进行了介绍。

Moving forward, consider the application below:

展望未来，请考虑以下应用程序：

I call this app Cardey.

我称这个应用为Cardey 。

When I click the button to change the user’s profession, I can choose to highlight updates to the DOM as shown below:

当我单击按钮以更改用户的职业时，我可以选择突出显示对DOM的更新，如下所示：

And now I see what’s been updated in the DOM.

现在，我看到DOM中已更新的内容。

This is a representation of the visual updates to the DOM. Note the green flash around the “I am a Librarian” text.

这是对DOM的可视更新的表示。 请注意“我是图书馆员”文字周围的绿色闪烁。

This is great, but I am concerned about React’s initial rendering of the component element tree.

这很棒，但是我担心React对组件元素树的初始呈现。

So, I could choose the check that as well.

因此，我也可以选择支票。

Upon doing this, I see what components are actually re-rendered when I hit that button.

完成此操作后，当我按下该按钮时，我将看到实际重新渲染了哪些组件。

Do you see how the visual updates to the DOM and react’s render updates are different?

您是否看到DOM的视觉更新和react的渲染更新有何不同？

The large user card was re-rendered but just the small text region was updated.

重新渲染了大用户卡，但仅更新了小文本区域。

This is important.

这个很重要。

结论 (Conclusion)

I believe you now have a more intuitive understanding how what happens under the hood in your React components.

我相信您现在可以更直观地了解React组件的幕后情况。

Actually, a lot more happens than I have discussed here. However, this is a good start.

实际上，发生的事情比我这里讨论的要多得多。 但是，这是一个好的开始。

Go build great apps!

去构建出色的应用程序！

Are you learning React/Redux at the moment? If yes, I have a really great book series on Redux. Some say it’s one of the best tech books they ever read!

您目前正在学习React / Redux吗？ 如果是的话，那么我在Redux上有非常不错的书系列 。 有人说这是他们读过 的最好的技术书之一 ！

翻译自: https://www.freecodecamp.org/news/these-react-fundamentals-you-skip-may-be-killing-you-7629fb87dd4a/

react转跳