react-dom.js_＃100DaysOfCode第40天：React.js的呼吸-基础-CSDN博客

react-dom.js

Hello, World!

你好，世界！

Today, I will be taking another intermission from the current project I am working on to go over the basics of React.js. I realized that I have never really touched on the fundamentals of React. And so, today I will be going over concepts such as the following:

今天，我将从正在进行的当前项目中再次探访一下React.js的基础知识。我意识到我从未真正接触过React的基础知识。因此，今天我将讨论以下概念：

What is a React component?
什么是React组件？
ReactDOM rendering
ReactDOM渲染
Class vs Functional Components
类与功能组件
JSX
JSX
State
州

什么是React？ (What is React?)

React is a JavaScript library used to build user interfaces. It is known for being modular by letting users compose complex UIs from small and isolated pieces of code called “components”.

React是用于构建用户界面JavaScript库。通过让用户从称为“组件”的小而孤立的代码段组成复杂的UI，它以模块化而闻名。

In the picture above, we can separate the current user-interface into several different components. We have the Logo component, a WordBox for users to type in, a SearchButton to run the Google search, and a LuckyButton to automatically go to the first result of the search.

在上图中，我们可以将当前用户界面分为几个不同的组件。我们具有徽标组件，供用户键入的WordBox，用于运行Google搜索的SearchButton和用于自动转到搜索结果的LuckyButton。

A React component is then individual code that represents a page; each component is a JavaScript function that returns a piece of code that represents a part of the website. And so, to build a page inside a website, we call these functions in a certain order, put together the results, and show it to the user via the browser. Something like building LEGO.

这样，React组件就是代表一个页面的单个代码。每个组件都是一个JavaScript函数，该函数返回代表网站一部分的一段代码。因此，要在网站内构建页面，我们将按一定顺序调用这些函数，将结果汇总在一起，然后通过浏览器显示给用户。就像建造乐高积木一样。

Let’s create a component! For this example, our component will be called OurFirstComponent. Here is the code:

让我们创建一个组件！在此示例中，我们的组件将称为OurFirstComponent 。这是代码：

const OurFirstComponent = () => {
  return (
    //Stuff to make
  )
};

Inside the //Stuff to make part of the code, we will be using JSX — JavaScript XML. JSX allows users to write HTML code inside their JavaScript components, which is usually an illegal move.

在//Stuff to make ，我们将使用JSX — JavaScript XML。 JSX允许用户在其JavaScript组件内编写HTML代码，这通常是非法的举动。

Now, whenever we call our OurFirstComponent component, we will render the JSX code embedded inside. To do this, we will be using a function called ReactDOM:

现在，无论何时调用OurFirstComponent组件，我们都将渲染嵌入其中的JSX代码。为此，我们将使用一个名为ReactDOM的函数：

ReactDOM.render(<OurFirstComponent />, placeWeWantToPlace);

The first parameter for ReactDOM is the component we want to render, while the second is the location in which we want to render our component. The value of placeWeWantToPlace is usually document.getElementById('root');.

ReactDOM的第一个参数是我们要渲染的组件，而第二个参数是我们要渲染组件的位置。 placeWeWantToPlace的值通常为document.getElementById('root'); placeWeWantToPlace 。

将组件放在一起 (Putting Components Together)

This is where the React magic happens. You can usually write code like the following:

这就是React魔术发生的地方。通常，您可以编写如下代码：

const OurFirstComponent = () => {
  return(
    <p>My name is Cold Brew Code</p>
  )
};//export OurFirstComponent

and merge it with another component:

并将其与另一个组件合并：

function Container(){
  return(
    <h1>Hello, World</h1>
    <OurFirstComponent />
  )
};

Now, you can just render Container and it will automatically bring OurFirstComponent with it.

现在，您只需渲染Container ，它将自动将OurFirstComponent它。

ReactDOM.render(<Container />, document.getElementById('root'));

This is how pages are built using React — by nesting components inside of each other.

这就是使用React构建页面的方式-通过相互嵌套组件。

类组件 (Class Components)

In the code snippets above, we have been writing components as functions, which are usually called as functional components. However, ever since ES6, people have begun to write components as JavaScript classes, which are called as class components.

在上面的代码段中，我们将组件编写为函数，通常将其称为功能组件 。但是，从ES6开始，人们就开始将组件编写为JavaScript类，这些类称为类组件 。

class Container extends React.Component {
  render(){
    return(
      <h1>Hello, World</h1>
      <OurFirstComponent />
    )
  }
};

When using Class Components, you must include a render() function. The render function will return the JSX part of the component. To call another component, you can use the same method as you would in functional components: <AClassComponent />.

使用类组件时，必须包含render()函数。 render函数将返回组件的JSX部分。要调用另一个组件，可以使用与功能组件相同的方法： <AClassComponent /> 。

Here’s a Pro-Tip:

这是一个专业提示：

You should use functional components over class components because they’re easier to read unless you need a component that has states.

应该使用功能组件而不是类组件，因为除非您需要具有状态的组件，否则它们更易于阅读。

在JSX中使用JavaScript (Utilizing JavaScript in JSX)

You can also use JavaScript variables inside your JSX code like the following:

您还可以在JSX代码中使用JavaScript变量，如下所示：

class Container extends React.Component {
  render(){
    const greeting = "Hello, World!";
    
    return(
      <h1>{ greeting }</h1>
      <OurFirstComponent />
    );
  }
}

You can also call functions inside your JSX!

您还可以在JSX内部调用函数！

class Container extends React.Component{
  render(){
    const addNumbers = (x, y) => {
      return x+y;
    };
 
    return(
      <p>The sum is: { addNumbers(6, 9) }</p>
      <OurFirstComponent />
    );
  }
}

组件状态 (The Component’s State)

Class components can store data about their current state. This information can be saved inside the component’s state, which is stored in a JavaScript object.

类组件可以存储有关其当前状态的数据。此信息可以保存在组件的state ，该state存储在JavaScript对象中。

In the code below, we have an object representing our component’s state. It has a key of isMusicPlaying which has a value of false. This object is assigned this.state in the constructor method, which is called when the class is first used.

在下面的代码中，我们有一个表示组件状态的对象。它具有isMusicPlaying key ，其value false 。在constructor方法中为该对象分配this.state ，该方法在首次使用该类时被调用。

class Container extends React.Componoent{
  constructor(props){
    super(props);
 
    this.state = {
      isMusicPlaying: false
    };
  }  render(){
    return(
      <PlayButton />
    )
  }
};

The constructor method of a React component always needs to be called alongside super(props).

React组件的constructor方法总是需要与super(props)一起调用。

Now, a component’s state can update your UI based on certain events. In this example, we will use state to change the play button from isMusicPlaying: false to isMusicPlaying: true. In other words, we are changing the state of an arbitrary music player from paused to playing. So, when the user clicks on the button, the state should update and these changes should also be reflected on the UI.

现在，组件的state可以根据某些事件更新您的UI。在此示例中，我们将使用状态将播放按钮从isMusicPlaying: false更改为isMusicPlaying: true 。换句话说，我们正在将任意音乐播放器的状态从暂停更改为播放。因此，当用户单击按钮时，状态应更新，并且这些更改也应反映在UI上。

We can use a conditional operator to determine the value of a component’s state. A conditional operator takes three operands: a condition followed by a question mark, then an expression to execute if the condition is true, followed by a colon if the expression is false.

我们可以使用条件运算符来确定组件状态的值。条件运算符采用三个操作数：条件后跟问号，如果条件为true，则执行表达式；如果表达式为false，则后跟冒号。

const Container extends React.Component {
  constructor(props){
    super(props);    this.state = {
      isMusicPlaying: false
    };
  }  render(){
    const status = this.state.isMusicPlaying ? 'Playing' : 'Paused';    return(
      <h1>{ status }</h1>
      <PlayButton />
    );
  }
}

In the render function, the this keyword is always referring to the component within.

在render函数中， this关键字始终引用其中的组件。

结论 (Conclusion)

Being able to self learn these kinds of things is really helpful, albeit being scary the first time (the thought of approaching a foreign concept is uncomfortable!) Nevertheless, we must always push ourselves to find the first principles in any subject.

能够自我学习这些东西确实是有帮助的，尽管这是第一次使人感到恐惧(对待异国情调的想法很不舒服！)然而，我们必须始终推动自己在任何学科中找到首要原则。