react-dom.js_学习React.js基础-面向初学者
react-dom.js
Today I am going to highlight the basics of the world of React. If you have just started your journey in ReactJS, then I would say you have landed in the right place. In this article, I have tried to cover the basics of React in a very simple manner. I hope at the end of article you will know the fundamental concepts of React.
今天，我将重点介绍React世界的基础知识。 如果您刚刚开始使用ReactJS，那么我会说您来对地方了。 在本文中，我试图以一种非常简单的方式介绍React的基础知识。 我希望在文章结尾，您将了解React的基本概念。
Let’s start.
开始吧。
ReactJS —一个强大的库 (ReactJS — A powerful library)
As you might have already read in many places, React is a library for making web and mobile UI. It was developed by Facebook.
您可能已经在很多地方读过，React是一个用于制作Web和移动UI的库。 它是由Facebook开发的。
ReactJS is component driven. Everything is a component which is responsible for some functionality. You write small, small components and then combine them together to form big components. This makes the code more readable and understandable. The features that make React powerful and beautiful are:
ReactJS是组件驱动的。 一切都是负责某些功能的组件。 您编写小的组件，然后将它们组合在一起以形成大型组件。 这使代码更具可读性和可理解性。 使React功能强大且美观的功能包括：
It uses the virtual DOM concept instead of the real DOM.
它使用虚拟DOM概念而不是真实DOM。
Code readability because of JSX. The use of JSX makes you feel like you’re writing web apps (gives a look to JavaScript like HTML).
由于JSX，代码具有可读性。 JSX的使用使您感觉就像在编写Web应用程序一样(像HTML这样JavaScript)。
It also uses SSR (SSR helps in SEO).
它还使用SSR(SEO中的SSR帮助)。
These are the things which you might have read about but you will get to understand and feel when you go through this tutorial. So, let’s dive into the concept of the virtual DOM (I would say this is the main feature which makes React more beautiful).
这些是您可能已经阅读的内容，但是当您阅读本教程时，您将了解并感受到。 因此，让我们深入探讨虚拟DOM的概念(我想这是使React更漂亮的主要功能)。
ReactJS虚拟DOM (ReactJS Virtual DOM)
The virtual DOM is a copy of the real DOM. Unlike the real DOM, the virtual DOM does the minimum amount of DOM manipulation to keep components up-to-date. It only updates the part which has been updated.
虚拟DOM是真实DOM的副本。 与真实DOM不同，虚拟DOM进行的DOM操作量最少，以使组件保持最新。 它仅更新已更新的零件。
DOM manipulation is very easy. Here is a visual demonstration of how the virtual DOM works:
DOM操作非常容易。 这是虚拟DOM的工作方式的直观展示：
- The virtual DOM is a copy of the real DOM. 虚拟DOM是真实DOM的副本。
2. When data changes in a component, the entire UI is re-rendered in the virtual DOM.
2.当组件中的数据更改时，整个UI将在虚拟DOM中重新呈现。
3. Then the comparison between the real DOM and the virtual DOM takes place.
3.然后在真实DOM和虚拟DOM之间进行比较。
4. Once the calculation is done, the real DOM is updated with the things that are changed.
4.计算完成后，将使用更改的内容更新实际DOM。
We’ve been talking about one of the great features of React — that is the virtual DOM but wait! What was the JSX in the second feature (above points on feature)? You might have wondered what it was, what was its relation to React, and how it gives us the feel of writing web apps...
我们一直在谈论React的一大功能-虚拟DOM，但请耐心等待！ 第二个功能(功能之上)的JSX是什么？ 您可能想知道它是什么，它与React的关系是什么，以及它如何带给我们编写Web应用程序的感觉...
Now this time let’s dive into the JSX pool.
现在，这次让我们进入JSX池。
JSX (JSX)
Before moving ahead, let’s have a look at the below code:
在继续之前，让我们看一下下面的代码：
class FirstComponent extends React.Component {
render() {
return (
<span className='customSize'>My First Component</span>
);
}
}class FirstComponent extends React.Component {
render() {
return (
React.createElement('span',{className: 'customSize'}, 'My First Component')
);
}
}In the first example, the render function looks like it’s returning HTML code but this is JSX. The first example is a JSX version of the second one. JSX is a JavaScript extension that gives your JS code an HTML look.
在第一个示例中，render函数看起来像正在返回HTML代码，但这是JSX。 第一个示例是第二个示例的JSX版本 。 JSX是一个JavaScript扩展，使您的JS代码具有HTML外观。
If you look at the second example, React.createElement is used for creating a react element to represent the react component. The second argument can be null or empty if no props or attributes are needed for the element. The third argument defines what should be inside of it (like any other React element, say <image>, with attribute ‘src’).
如果看第二个示例，则React.createElement用于创建一个react元素来表示react组件。 如果元素不需要道具或属性，则第二个参数可以为null或为空。 第三个参数定义其中应该包含的内容(就像其他任何具有属性'src'的React元素，例如<image>一样)。
If you look at the above two blocks of code, you will find the first one more familiar as it gives an HTML feel. JSX also increases code readability. Let’s have a look at another example, without JSX and with JSX to get a feel for the code readability.
如果查看以上两个代码块，您会发现第一个代码块更加熟悉，因为它具有HTML的感觉。 JSX还提高了代码的可读性。 让我们看另一个没有JSX和JSX的示例，以了解代码的可读性。
ReactJS without JSX:
没有JSX的ReactJS：
React.createElement("div", null,
React.createElement("img", {src: "image.jpg", alt: "Random photo"}),
React.createElement("h3", null, "Hello React"));ReactJS with JSX version:
带有JSX版本的ReactJS：
<div>
<img src="image.jpg" alt="Random photo" />
<h3>Hello React</h3>
</div>By looking at the above example, you can understand what I was saying regarding code readability. How easy it is to read code with JSX, right? I think this is enough on JSX and I hope now you are able to better understand the power of JSX in the React world.
通过查看上面的示例，您可以了解我所说的有关代码可读性的内容。 用JSX读取代码有多容易，对吗？ 我认为这在JSX上就足够了，我希望现在您能够更好地了解JSX在React世界中的强大功能。
Note — Browsers are not able to read JSX. So, we have to transpile it to JavaScript using JSX transformers (say babel) so that the browser can understand.
注— 浏览器无法读取JSX。 因此，我们必须使用JSX转换器(例如babel)将其转换为JavaScript，以便浏览器可以理解。
Now we know what JSX is. But I would like you to go to the previous picture where I wrote that React is all about components. It is component driven. As components are the building blocks of React, let’s explore them.
现在我们知道了JSX。 但是，我希望您能回到上一张图片，其中我写道React是关于组件的。 它是组件驱动的。 由于组件是React的基石，让我们对其进行探索。
ReactJS Heart-组件 (ReactJS Heart - Components)
Well, you might have come across the below code of how to create components during your research on React:
好吧，您可能在研究React时遇到了以下有关如何创建组件的代码：
class MyStatefulComponent extends React.Component {
state = {
title: ''
}
componentDidMount() {
console.log('Component mounted')
}
render() {
return <div>{this.props.name}</div>;
}
}If you write your component in the above way, it is called a Class/ Stateful/Container component. If you think that this is the only way of creating components, think again. Yes, there is another way of creating your component which results in functional / stateless/presentational components. Before moving ahead, let’s see how functional components are written:
如果您以上述方式编写组件，则将其称为Class / Stateful / Container组件。 如果您认为这是创建组件的唯一方法，请再考虑一遍。 是的，还有另一种创建组件的方法，可以生成功能性/无状态/演示性组件。 在继续之前，让我们看一下如何编写功能组件：
const MyStatelessComponent = props => <div>{props.name}</div>;Now, you might wonder what’s the difference between the two and how you should choose which type to create. So, let’s dive into the Stateful and Stateless component pool.
现在，您可能想知道两者之间有什么区别，以及如何选择要创建的类型。 因此，让我们深入了解有状态和无状态组件池。
Stateless (or presentational or functional) components are those components that don’t have any state (don’t know about state? No worries, I explain it in a later part). They are used for presentation like how you want your component to look.
无状态(或表示性或功能性)组件是不具有任何状态(不了解状态？不用担心，我将在后面的部分中解释)的那些组件。 它们用于演示，例如您希望组件的外观。
A component is a plain JavaScript function which takes a prop as an argument and returns a React element (see above example). Its name is self explanatory — it has no state. It has no lifecycle methods (like componentDidMount method etc. which you might have read during your research on React tutorials).
组件是一个纯JavaScript函数，它以prop作为参数并返回React元素(请参见上面的示例)。 它的名字不言自明-它没有状态。 它没有生命周期方法(例如componentDidMount方法等，您可能在研究React教程时可能已经阅读过)。
Stateful (or container or class) components are those components which have state — a source of data (you can call this.setState inside it), lifecycle methods (can use to make an API call). It is a JavaScript class that extends your React component which means React creates instances of it. React initialize the component class in order to use lifecycle methods, for initializing the state and more.
有状态(或容器或类)组件是具有状态的组件-数据源(可以在其中调用this.setState)，生命周期方法(可以用于进行API调用)。 这是一个扩展您的React组件JavaScript类，这意味着React会创建它的实例。 React初始化组件类以便使用生命周期方法，用于初始化状态等。
Wait… now you might wonder which one is better, and what to choose? You can answer this question if you have this question in your mind on how to separate the logical part from the presentational one. Yes, it is strange that one question answers another question, but you will soon get why I said this.
等等...现在您可能想知道哪个更好，该选择什么呢？ 如果您有关于如何将逻辑部分与表示部分分开的想法，可以回答此问题。 是的，一个问题回答了另一个问题很奇怪，但是您很快就会明白我为什么这么说。
As you might have seen in other React tutorials, they use class for creating their components. They put the logical as well as presentational parts in the same component which makes that component more complicated and bulky.
正如您在其他React教程中可能已经看到的那样，它们使用类来创建其组件。 他们将逻辑部分和表示部分放在同一组件中，这使该组件更加复杂和庞大。
So, if you want to separate your logical from presentational components, then the component class is best suited for logical stuff like fetching data from the API or data changes. On the other hand, if your component is focused on presentational/functional things, the component should look good.
因此，如果您想将逻辑组件与表示性组件分开，则组件类最适合逻辑组件，例如从API提取数据或数据更改。 另一方面，如果您的组件专注于表示/功能性事物，则该组件应该看起来不错。
In short, I would say use both. Use the component class when you need one of the things (lifecycle methods, state) and for presentation, use a functional component.
简而言之，我会说两者都使用。 当您需要其中一种(生命周期方法，状态)并且为演示而使用功能组件时，请使用组件类。
That’s all about components.
这就是组件。
Now, we have a picture of how we can write components, but I have not told you how we can manage data in them. I think without data, components would be useless. So, we will have a look at how we can manage a component’s data (like fetching data from an API, React ‘state’ story, setting the state and so on).
现在，我们了解了如何编写组件，但是我没有告诉您如何管理组件中的数据。 我认为没有数据，组件将毫无用处。 因此，我们将看看如何管理组件的数据(例如从API提取数据，React“状态”故事，设置状态等)。
Let’s start.
开始吧。
道具 (Props)
‘Prop’ is shorthand for properties, and this is the one source of data in our component. It can be used to pass data to different components. Wait! I would like you to go back where I told you about presentational and class components. I told you to use presentational components to manage how your component should look, and container components for handling data and all that. Correct!
“ Prop”是属性的简写，这是组件中数据的一种来源。 它可以用于将数据传递到不同的组件。 等待！ 我希望您回到我曾介绍过有关演示和课堂组件的地方。 我告诉过您使用表示性组件来管理组件的外观，并使用容器组件来处理数据等等。 正确！
So the ‘prop’ is the one which we can use to make the connection between these two types of components. Yes, you can use props for passing data from a container component to a presentational component, where the presentational component will render the view with your dynamic data. Please have a look at the below code to better understand:
因此，“ prop”是我们可以用来在这两种类型的组件之间建立连接的组件。 是的，您可以使用道具将数据从容器组件传递到表示组件，在该组件中，表示组件将使用您的动态数据呈现视图。 请看下面的代码以更好地理解：
Like the above way (using props — ‘btnText’), you can separate the logical part from the presentational part. The other feature of props is that they are read only, i.e. they are immutable. They are not going to modify inside the component in which they are passed. The data flow is also unidirectional — which gives us one way data binding (unlike Angular).
与上述方式一样(使用道具-'btnText')，您可以将逻辑部分与表示部分分开。 道具的另一个特征是它们是只读的，即它们是不可变的。 它们不会在传递它们的组件内部进行修改。 数据流也是单向的，这为我们提供了一种数据绑定的方式(与Angular不同)。
But, there might be cases where we want to change the data (like in some event by the user and so on). Hence, for this case, ‘State’ comes into the React market. Let’s dive into it.
但是，在某些情况下，我们可能想要更改数据(例如，在某些情况下，用户可能会更改)。 因此，在这种情况下，“状态”进入了React市场。 让我们开始吧。
州 (State)
As I told you, props are immutable whereas state is for mutable data — that is data that will change in response to certain events. So, if you want to change your data value, then store it in the state. State are objects that store your component’s data. To give a better picture of how state is defined and how to use it, here is an example:
正如我告诉您的那样，道具是不可变的，而状态是用于可变数据的-可变数据会响应某些事件而改变。 因此，如果要更改数据值，则将其存储在状态中。 状态是存储组件数据的对象。 为了更好地了解如何定义状态以及如何使用状态，下面是一个示例：
class LoginContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
userName: "",
};
}
onFilluserName = event => {
this.setState({
userName: event.target.value,
});
}
render() {
return (
<div>
<input value={this.state.userName} onChange= {this.onFilluserName}
</div>
);
}
}You can see from the above example that state represents objects where your component’s data are stored. They are initialized inside a constructor. You can access the state using ‘this.state’. This is the way of using state for rendering your data in your component.
您可以从上面的示例中看到状态代表存储组件数据的对象。 它们在构造函数中初始化。 您可以使用“ this.state”访问状态。 这是使用状态在组件中呈现数据的方式。
But, I told you that the thing which makes state the heart of your components is its mutable behaviour. Yes, now the point comes as to how we can change the state’s property. The answer is using ‘this.setState’ (please have a look at the above example). Using this.setState, we have changed our data value when the user types.
但是，我告诉您，使状态成为组件核心的是其可变的行为。 是的，现在的关键是如何更改国家的财产。 答案是使用“ this.setState”(请看上面的例子)。 使用this.setState，我们在用户键入时更改了数据值。
In short, props and state are both sources of data, but their usage and behaviour is different. Whenever there is a case where your data may change, use ‘state’ for that — else ‘prop’ is good choice.
简而言之，道具和状态都是数据的来源，但是它们的用法和行为是不同的。 每当您的数据可能更改时，请使用“状态”，否则使用“ prop”是个不错的选择。
That’s all about the basics of the React world. I hope you have a better understanding of the basics.
这就是React世界的基础知识。 希望您对基础有所了解。
There is a very important part of a class component that I haven’t discussed: lifecycle methods. Yes, lifecycle methods are another critical part of ReactJS, but what they are and why they’re important will be in my next article!
我没有讨论过的类组件的一个非常重要的部分：生命周期方法。 是的，生命周期方法是ReactJS的另一个关键部分，但是它们的意义以及为什么重要的原因将在我的下一篇文章中！
Thanks for reading.
谢谢阅读。
react-dom.js