获得完整访问权限
测验

React Node、React Element 和 React Component 之间有什么区别？

主题
React
在GitHub上编辑

TL;DR

React Node 是 React 中的任何可渲染单元，例如元素、字符串、数字或 null。React Element 是一个描述要渲染内容的不可变对象，使用 JSX 或 React.createElement 创建。React Component 是一个返回 React Element 的函数或类，支持创建可重用的 UI 片段。

React node

一个 React Node 是 React 渲染系统中最基本的单元。它可以是一个 React 元素、一个字符串、一个数字、一个布尔值或 null。 基本上，任何可以在 React 中渲染的东西都是一个 React Node。

const stringNode = 'Hello, world!';
const numberNode = 123;
const booleanNode = true;
const nullNode = null;
const elementNode = <div>Hello, world!</div>;

React element

一个 React Element 是一个不可变的纯对象，表示您希望在屏幕上看到的内容。它包括类型（例如 HTML 标签的字符串或 React 组件）、props 和 children。React 元素是使用 JSX 语法或 React.createElement 创建的。

const element = <div className="greeting">Hello, world!</div>;


// 使用 React.createElement
const element = React.createElement(
  'div',
  { className: 'greeting' },
  'Hello, world!',
);

React component

一个 React Component 是一个可重用的 UI 片段，它可以接受输入（props）并返回描述 UI 的 React 元素。 有两种类型的组件：函数组件和类组件。

  • 函数组件：这些更简单，只是将 props 作为参数并返回 React 元素的函数。

    function Welcome(props) {
      return <h1>Hello, {props.name}</h1>;
    }

  • 类组件：这些是扩展 React.Component 的 ES6 类，并且必须具有返回 React 元素的 render 方法。

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

延伸阅读

在GitHub上编辑