Detailed interpretation of elements, components, instances and nodes in React

This article mainly introduces the elements, components, instances and nodes in React. Now I will share it with you and give you a reference.

The React in-depth series provides an in-depth explanation of the key concepts, features and patterns in React, aiming to help everyone deepen their understanding of React and use React more flexibly in their projects.

Elements, components, instances and nodes in React are four closely related concepts in React, and they are also four concepts that can easily confuse React beginners. Now, veteran cadres will introduce these four concepts in detail, as well as the connections and differences between them, to satisfy the curiosity of students who like to chew words and get to the bottom of things (veteran cadres are one of them).

Element

React element is actually a simple JavaScript object. A React element corresponds to a part of the DOM on the interface, describing the structure and structure of this part of the DOM. Rendering effect. Generally we create React elements through JSX syntax, for example:

const element = <h1 id="Hello-nbsp-world">Hello, world</h1>;

element is a React element. During the compilation process, the JSX syntax will be compiled into a call to React.createElement(). It can also be seen from the function name that the JSX syntax returns a React element. The compiled result of the above example is:

const element = React.createElement(
 'h1',
 {className: 'greeting'},
 'Hello, world!'
);

Finally, the value of element is a simple JavaScript object similar to the following:

const element = {
 type: 'h1',
 props: {
  className: 'greeting',
  children: 'Hello, world'
 }
}

React elements can be divided into two categories: DOM type elements and An element of component type. DOM type elements use DOM nodes like h1, p, p, etc. to create React elements. The previous example is a DOM type element; component type elements use React components to create React elements, for example:

const buttonElement = <Button color=&#39;red&#39;>OK</Button>;

buttonElement is A component type element, its value is:

const buttonElement = {
 type: 'Button',
 props: {
  color: 'red',
  children: 'OK'
 }
}

For DOM type elements, because they directly correspond to the DOM nodes of the page, React knows how to render. However, for component type elements, such as buttonElement, React cannot directly know what kind of page DOM the buttonElement should be rendered into. In this case, the component itself needs to provide DOM node information that React can recognize. The specific implementation method will be discussed when introducing the component. Detailed introduction.

With the React element, how should we use it? In fact, in most cases, we will not use React elements directly. React will automatically render the final page DOM based on the React elements. To be more precise, React elements describe the structure of React's virtual DOM, and React will render the real DOM of the page based on the virtual DOM.

Component (Component)

React component should be the most familiar concept in React. React uses the idea of ​​components to split the interface into reusable modules. Each module is a React component. A React application is composed of several components, and a complex component can also be composed of several simple components.

React components are closely related to React elements. The core function of React components is to return React elements. You may have questions here: shouldn't React elements be returned by React.createElement()? But the call of React.createElement() itself also requires a "person" to be responsible, and the React component is this "responsible person". The React component is responsible for calling React.createElement() and returning the React element for React to internally render it into the final page DOM.

Since the core function of a component is to return React elements, the simplest component is a function that returns React elements:

function Welcome(props) {
 return <h1 id="Hello-nbsp-props-name">Hello, {props.name}</h1>;
}

Welcome is a component defined with a function. If a component is defined using a class, the work of returning the React element is specifically borne by the render method of the component, for example:

class Welcome extends React.Component {
 render() {
  return <h1 id="Hello-nbsp-this-props-name">Hello, {this.props.name}</h1>;
 }
}

In fact, for components defined using a class, the render method is the only required method. Other components The life cycle methods are just for rendering and are not required.

Now consider the following example:

class Home extends React.Component {
 render() {
  return (
   <p>
    <Welcome name=&#39;老干部&#39; />
    <p>Anything you like</p>
   </p>
  )
 }
}

Home component uses the Welcome component, and the returned React element is:

{
 type: 'p',
 props: {
  children: [
   {
    type: 'Welcome',
    props: {
     name: '老干部'
    }
   },
   {
    type: 'p',
    props: {
     children: 'Anything you like'
    }
   }，
  ]
 }
}

For this structure, React knows how to render type = 'p' and type = 'p' nodes, but I don't know how to render the node with type='Welcome'. When React finds that Welcome is a React component (the judgment is based on the fact that the first letter of Welcome is capitalized), it will return according to the Welcome component. The React element determines how the Welcome node is rendered. The React element returned by the Welcome component is:

{
 type: 'h1',
 props: {
  children: 'Hello, 老干部'
 }
}

This structure only contains DOM nodes, and React knows how to render. If this structure also contains other component nodes, React will repeat the above process and continue to parse the React elements returned by the corresponding components until the returned React elements only contain DOM nodes. This recursive process allows React to obtain the complete DOM structure information of the page, and the rendering work will naturally come naturally.

In addition, if you think about it carefully, you can find that the reuse of React components is essentially to reuse the React elements returned by this component. React elements are the most basic unit of React applications.

Instance

这里的实例特指React组件的实例。React 组件是一个函数或类，实际工作时，发挥作用的是React 组件的实例对象。只有组件实例化后，每一个组件实例才有了自己的props和state，才持有对它的DOM节点和子组件实例的引用。在传统的面向对象的开发方式中，实例化的工作是由开发者自己手动完成的，但在React中，组件的实例化工作是由React自动完成的，组件实例也是直接由React管理的。换句话说，开发者完全不必关心组件实例的创建、更新和销毁。

节点 (Node)

在使用PropTypes校验组件属性时，有这样一种类型：

MyComponent.propTypes = { 
 optionalNode: PropTypes.node,
}

PropTypes.node又是什么类型呢？这表明optionalNode是一个React 节点。React 节点是指可以被React渲染的数据类型，包括数字、字符串、React 元素，或者是一个包含这些类型数据的数组。例如：

// 数字类型的节点
function MyComponent(props) {
 return 1;
}

// 字符串类型的节点
function MyComponent(props) {
 return 'MyComponent';
}

// React元素类型的节点
function MyComponent(props) {
 return <p>React Element</p>;
}

// 数组类型的节点，数组的元素只能是其他合法的React节点
function MyComponent(props) {
 const element = <p>React Element</p>;
 const arr = [1, &#39;MyComponent&#39;, element];
 return arr;
}

// 错误，不是合法的React节点
function MyComponent(props) {
 const obj = { a : 1}
 return obj;
}

最后总结一下，React 元素和组件的概念最重要，也最容易混淆；React 组件实例的概念大家了解即可，几乎使用不到；React 节点有一定使用场景，但看过本文后应该也就不存在理解问题了。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

通过JS中利用FileReader如何实现上传图片前本地预览功能

根据select标签设置默认选中的选项方法该怎么做？

原生JavaScript中如何实现todolist功能

The above is the detailed content of Detailed interpretation of elements, components, instances and nodes in React. For more information, please follow other related articles on the PHP Chinese website!