How to use elements, components, instances and nodes in React

This time I will show you how to use elements, components, instances and nodes in React. What are the precautions for using elements, components, instances and nodes in React. Here are practical cases. , let’s take a look.

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 rendering effect of this part of the DOM. Generally we create React elements through JSX syntax, for example:

const element = <h1 className=&#39;greeting&#39;>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 such as h1, p, p 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 internally based on 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 needs to be responsible for "someone", 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>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>Hello, {this.props.name}</h1>;
 }
}

In fact, for components defined using a class, the render method is the only required method. Other components The Lifecycle 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, 老干部'
 }
}

这个结构中只包含DOM节点，React是知道如何渲染的。如果这个结构中还包含其他组件节点，React 会重复上面的过程，继续解析对应组件返回的React 元素，直到返回的React 元素中只包含DOM节点为止。这样的递归过程，让React 获取到页面的完整DOM结构信息，渲染的工作自然就水到渠成了。

另外，如果仔细思考的话，可以发现，React 组件的复用，本质上是为了复用这个组件返回的React 元素，React 元素是React 应用的最基础组成单位。

实例 (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, 'MyComponent', element];
 return arr;
}
// 错误，不是合法的React节点
function MyComponent(props) {
 const obj = { a : 1}
 return obj;
}

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

JS怎样操作改变radio的状态

bootstrap table怎样设置为高度百分比

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