react 组件引用组件_了解React组件。

react 组件引用组件

React is a frontend UI library for designing user interfaces of web applications.

React是用于设计Web应用程序用户界面的前端UI库。

When writing a React application, it is very necessary you understand the concept of React components and what they actually do. React has made these components very easy to create and very much reusable in any case.

在编写React应用程序时，非常有必要了解React组件的概念及其实际作用。 React使这些组件非常易于创建，并且在任何情况下都非常可重用。

Now lets jump into Components, shall we?

现在，让我们进入组件，对吧？

什么是React组件？ (What are React Components?)

React components are independent units that make up a React app. It can also be seen as building blocks that evaluates to a full React application. You would definitely be using components a lot, trust me. In fact, you cannot build a React application without creating components, it’s impossible. Imagine building a house without blocks or building a car without it’s various parts, that is very impossible. These components must be put together to build a React application. They make up different part of the UI and also let you control all these parts independently.

React组件是组成React应用程序的独立单元。 它也可以看作是评估完整React应用程序的构建块。 相信我，您肯定会大量使用组件。 实际上，如果不创建组件就无法构建React应用程序，这是不可能的。 想象一下建造没有障碍的房屋或建造没有各个部分的汽车，那是不可能的。 必须将这些组件放在一起才能构建React应用程序。 它们构成了UI的不同部分，还使您可以独立控制所有这些部分。

const myFirstComponent = () => <h1>Yes! I wrote a component</h1>

The above is a very simple function component that will display the h1 child to the browser. Mind you, the element that is being returned by the component above is not HTML. It is called JSX. Visit https://reactjs.org/docs/introducing-jsx.html for better understanding of JSX

上面是一个非常简单的功能组件，它将向浏览器显示h1子级。 请注意，上述组件返回的元素不是HTML。 它称为JSX。 访问https://reactjs.org/docs/introducing-jsx.html，以更好地了解JSX

组件类型 (Types of Components)

In React, there are basically two types of components. These two types of components are:

在React中，基本上有两种类型的组件。 这两种类型的组件是：

1. Class components
   类组件
2. Functional components
   功能组件

I will start by explaining the class component.

我将从解释类组件开始。

类组件(有状态) (Class Components (stateful))

The class component is said to be stateful as it tends to implement some kind of logic and also manage any local state in the component. It also accepts lifecycle methods.

据说类组件是有状态的，因为它倾向于实现某种逻辑并且还管理组件中的任何局部状态。 它还接受生命周期方法。

A simple class component in react.

react中的一个简单的类组件。

州 (state)

React state can be seen as an instance of properties that affects the behavior of the UI when rendered to the browser. It handles data that changes overtime, which means it is mutable. The state is basically an object that holds some kind of data that affects the UI at anytime. This state can only be written in a class component.

可以将React状态看作是属性的实例，这些属性在呈现给浏览器时会影响UI的行为。 它处理随时间变化的数据，这意味着它是可变的。 状态基本上是一个对象，其中包含随时会影响UI的某种数据。 此状态只能写在类组件中。

A class component with state.

具有状态的类组件。

The above code shows that on every keypress on the form input, the component re-renders and changes the UI state.

上面的代码显示，在表单输入上的每次按键操作上，组件都会重新呈现并更改UI状态。

Lifecycle methods

生命周期方法

Lifecycle methods simply explains the all round period of the component from when it was rendered to when it was destroyed, probably as a result of leaving page or deleting something. Just like a cooking process or lifecycle, components has its own lifecycle. The three major ones are:

生命周期方法只是解释了从呈现组件到销毁组件的整个周期，这可能是由于离开页面或删除某些内容导致的。 就像烹饪过程或生命周期一样，组件也有自己的生命周期。 三个主要的是：

1. When the component mounts
   组件安装时
2. When the component updates
   组件更新时
3. When the component unmounts.
   卸载组件时。

componentDidMount

componentDidMount

This method is called once. It is fired immediately the component has been rendered. You can use this method to fetch data from an API and also render the data after the component has been mounted. You can use it to fetch any information or data you want to have immediately the component is rendered.

该方法被调用一次。 组件被渲染后立即触发。 您可以使用此方法从API提取数据，也可以在安装组件后呈现数据。 您可以使用它来获取您想要立即呈现的任何信息或数据。

componentDidMount() {
       console.log('I run immediately the component is rendered')
  }

The above code will log “I run immediately the component is rendered” to the console immediately the component is rendered.

上面的代码将在组件呈现后立即将“我立即运行组件呈现”记录到控制台。

componentDidUpdate

componentDidUpdate

This method is called when there’s a change in the state of a rendered component. This method accepts two arguments which are the previous props and the previous state.

当呈现的组件的状态发生变化时，将调用此方法。 此方法接受两个参数，即先前的道具和先前的状态。

componentDidUpdate(prevProps, prevState) {
  if (prevState.colors !== this.state.colors) {
    console.log('colors has changed.')
  }
}

Basically, componentDidUpdate is called based on a condition that is to be met, which is a comparison between the previous state and current state. If there is a change from previous state to current state, the method will run, but if no change has occurred in the state, the method won’t be called.

基本上，componentDidUpdate是根据要满足的条件调用的，该条件是先前状态与当前状态之间的比较。 如果从先前状态更改为当前状态，则该方法将运行，但是如果状态未发生任何更改，则不会调用该方法。

componentWillUnmount

componentWillUnmount

This method is called when the component is being removed from the DOM. It is the last method you call in a component’s lifecycle. Basically, you call this guy to run immediately before the component is destroyed and in this method, you can do some cleanup that regards to the component before it unmounts.

从DOM中删除组件时，将调用此方法。 这是您在组件生命周期中调用的最后一个方法。 基本上，您称这个家伙在组件销毁之前立即运行，并且在这种方法中，您可以在卸载之前对组件进行一些清理。

componentWillUnmount(){alert('This component is about to be unmounted.');}

In the above snip, we can see that the user is getting a warning from componentWillUnmount before the component is destroyed. Basically, componentWillUnmount holds the activity that will be carried before the component is dismantled from the DOM.

在上面的代码片段中，我们可以看到在销毁组件之前，用户正在从componentWillUnmount获得警告。 基本上，componentWillUnmount包含在从DOM上拆下组件之前将要进行的活动。

功能组件(我没有状态) (Functional Components (I am without state))

Also known as stateless component is a component that only takes in props and renders elements (JSX) to the UI. A functional component cannot manage state, making it impossible for it to implement any form of logic that might affect the state of the UI being rendered. It is basically a Javascript function returning an element.

也称为无状态组件是仅接受道具并将元素(JSX)呈现给UI的组件。 功能组件无法管理状态，因此无法实现可能影响呈现的UI状态的任何形式的逻辑。 基本上，这是一个返回元素的Javascript函数。

Function Component in React.

React中的功能组件。

The code above shows a function component that takes in an input element and a props which is basically passing information from another component. Apart from the fact that a function component returns JSX and accepts props, We can also say that function component is used only when we have no plan to make use of state and lifecycle methods in the component. BUT! let’s not write this guy off yet, he has his own super powers which he uses to effect changes to the UI.

上面的代码显示了一个功能组件，该组件接受一个输入元素和一个道具，而道具基本上是从另一个组件传递信息。 除了功能组件返回JSX并接受道具这一事实外，我们还可以说仅当我们不打算在组件中使用状态和生命周期方法时才使用功能组件。 但！ 让我们不要再撇掉这个家伙了，他拥有自己的超级能力，可以用来对UI进行更改。

Function component uses what is known as Hooks to effect changes to UI. Hooks lets you hook into React state in a function component with useState and also tap into lifecycle method with useEffect. Hooks makes it possible for logic to be applied in a function component. It is a very important tool in React function components.

功能组件使用所谓的“ 挂钩”来实现对UI的更改。 钩可以给你提供与useState功能成分React状态，也挖掘到与useEffect生命周期的方法。 挂钩使将逻辑应用于功能组件成为可能。 它是React函数组件中非常重要的工具。

使用状态 (UseState)

UseState hook basically does in function component what a state and setState would do in class component, which is manipulating the UI.

UseState钩子基本上在功能组件中执行状态和setState在类组件(用于操纵UI)中所做的事情。

use of useState in a function component

在功能组件中使用useState

The code above shows how React uses useState to manage state in a function component. In the array destructuring seen above, ‘state’ is the initial condition of the UI and we need to update that at every keypress made in the input element which re-renders the UI and also changes the state of the UI at every re-render. I came to realize that useState does a better job at managing state (just my opinion). I believe so because it just use less code to do the same thing that the class component does with setState.

上面的代码显示了React如何使用useState来管理功能组件中的状态。 在上面看到的数组结构分解中，“状态”是UI的初始条件，我们需要在输入元素中进行的每次按键更新时重新进行更新，以重新呈现UI并在每次重新呈现时更改UI的状态。 我意识到useState在管理状态方面做得更好(只是我的看法)。 我相信是因为它只使用较少的代码即可完成类组件对setState所做的操作。

useEffect (useEffect)

Another hook we will look at is the useEffect hook. It has some kind of similarity with the the lifecycle methods of the class component. This hook is basically a function that holds another function that will run after the the UI has been rendered, just like componentDidMount would do. It also does it with less code, unlike lifecycle methods that involves componentDidMount, componentDidUpdate and componentWillUnmount just to do what only useEffect will do.

我们将要看到的另一个钩子是useEffect钩子。 它与类组件的生命周期方法具有某种相似性。 这个钩子基本上是一个函数，其中包含另一个将在呈现UI后运行的函数，就像componentDidMount那样。 它也用更少的代码来完成它，这与生命周期方法不同，后者涉及componentDidMount，componentDidUpdate和componentWillUnmount只是为了执行only useEffect会做的事情。

useEffect here will run immediately the UI is rendered. The array at the end makes it run once and never run again at every re-render, but without the array, useEffect continues to run each time the UI re-renders. An API can also be fetched with useEffect hook. When the UI renders, the useEffect is triggered, which allows the API to retrieve any form of data it is meant to retrieve.

useEffect在此处将立即运行，呈现UI。 最后的数组使它一次运行，并且在每次重新渲染时都不再运行，但是如果没有该数组，则每次UI重新渲染时useEffect都会继续运行。 也可以使用useEffect挂钩获取API。 呈现UI时，将触发useEffect，它允许API检索要检索的任何形式的数据。

In React, you can create your own custom hooks, which gives you the freedom to use hooks as you please. Note that React Hooks can only be used in React function component.

在React中，您可以创建自己的自定义钩子，这使您可以随意使用钩子。 注意，React Hooks只能在React函数组件中使用。

These two components mentioned in this article can be used, based on what you are building. It’s very necessary you learn how to use the two of them as a React developer.

根据您要构建的内容，可以使用本文提到的这两个组件。 您非常有必要学习如何将两者用作React开发人员。

With that being said, go and React!

话虽这么说，然后去做React！

翻译自: https://medium.com/swlh/understanding-react-components-21b431ce342

react 组件引用组件