Javascript 反应组分和反应元素之间的差异

反应成分和反应元素之间的区别是什么？文档中提到了这两种方法，但没有详细说明，有些方法需要组件、其他元素……

为了进一步详细说明答案，React元素没有任何方法，原型上也没有任何内容。这也让他们很快

“ReactElement是DOM元素的轻量级、无状态、不可变的虚拟表示”——

react组件

render（）

函数返回后台react元素的DOM树（这是虚拟DOM btw）。涉及到一些复杂的映射和差异逻辑，但基本上这些React元素映射到DOM元素

您还可以直接创建元素

React.createElement（arg）

，其中arg可以是html标记名，也可以是React组件类。

React Elements React元素只是一个普通的老JavaScript

对象

，没有自己的方法。它基本上有四个属性：

• 类型

  ，表示HTML标记或引用React组件的

  字符串

• 键

  ，用于唯一标识React元素的

  字符串

• ref

  ，用于访问底层DOM节点或React组件实例的引用）

• 道具

  （属性

  对象

  ）

React元素不是React组件的实例。它只是一个简单的“描述”，描述了要创建的React组件实例（或取决于

类型
HTML标记）的外观

描述React组件的React元素不知道它最终呈现到哪个DOM节点——这种关联是抽象的，将在呈现时解析

React元素可能包含子元素，因此能够形成元素树，表示虚拟DOM树

React组件和React组件实例
自定义React组件可以通过
React.createClass
创建，也可以通过扩展
React.Component
（ES2015）创建。如果一个React组件被实例化，它需要一个
props
对象
，并返回一个实例，称为React组件实例

React组件可以包含状态，并且可以访问React生命周期方法。它必须至少有一个
render
方法，该方法在调用时返回一个React元素（-tree）。请注意，您自己从不构造反组件实例，而是让它为您创建反应。
 < P> A<代码>反应元素< /代码>是您认为是一个基本的HTML（DOM是精确的）元素。这只是一种创建元素的方法，而不使用备受争议的jsx格式

 A<代码>反应组件是你可以考虑的对象。它有自己的方法，支持
React生命周期
，并且通常不可用（至少还没有发现任何重用，欢迎使用示例）。它必须具有渲染功能

React类
就是您所称的类。功能方面的
React类
和
React组件
是相同的。只有语法才是真正的变化，因为
React组件
基于
ES6语法
。另一个主要的变化是，除非使用箭头函数，否则将不再支持默认的函数绑定<代码>混合元素
从ES6起不再受支持

React元素

-它是一个简单的对象，描述DOM节点及其属性。它是一个不可变的描述对象，不能对其应用任何方法

例如

这里有三种相关的东西，它们各自的名字：

• 组成部分
• 组件实例
• 元素

这有点令人惊讶，因为如果您习惯了其他UI框架，您可能会认为只有两种类型，大致对应于类（如

Widget

）和实例（如

newwidget（）

）。事实并非如此；组件实例与元素不同，它们之间也不存在一对一的关系。为了说明这一点，请考虑此代码：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    console.log('This is a component instance:', this);
  }

  render() {
    const another_element = <div>Hello, World!</div>;
    console.log('This is also an element:', another_element);
    return another_element;
  }
}

console.log('This is a component:', MyComponent)

const element = <MyComponent/>;

console.log('This is an element:', element);

ReactDOM.render(
  element,
  document.getElementById('root')
);

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
类MyComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
log（'这是一个组件实例：'，This）；
}
render（）{
const另一个元素=你好，世界！；
log（'这也是一个元素：'，另一个_元素）；
返回另一个_元素；
}
}
log（'这是一个组件：'，MyComponent）
常量元素=；
log（'这是一个元素：'，元素）；
ReactDOM.render(
元素，
document.getElementById（'root'））
);

在上述代码中：

• MyComponent

  （类本身）是一个组件

• 元素

  是一个元素。它不是MyComponent的一个实例；相反，它只是对要创建的组件实例的描述。它是一个具有

  键

  、

  道具

  、

  ref

  和

  类型

  属性的对象。这里，

  key

  和

  ref

  是

  null

  ，

  props

  是空对象，

  type

  是

  MyComponent

• 当呈现

  元素

  时，会创建

  MyComponent

  的实例（在上面的示例中，会从其构造函数中记录自身）

• 另一个_元素

  也是一个元素，它有

  键

  、

  参考

  、

  道具

  和

  类型

  属性，就像

  元素

  一样-但这次

  类型

  的值是字符串

  div

React团队的博客文章详细探讨了React为何具有这三个不同概念的设计原因，我在博客中写道

const SignIn = () => (
  <div>
   <p>Sign In</p>
   <button>Continue</button>
   <button color='blue'>Cancel</button>
  </div>
);

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    console.log('This is a component instance:', this);
  }

  render() {
    const another_element = <div>Hello, World!</div>;
    console.log('This is also an element:', another_element);
    return another_element;
  }
}

console.log('This is a component:', MyComponent)

const element = <MyComponent/>;

console.log('This is an element:', element);

ReactDOM.render(
  element,
  document.getElementById('root')
);

const element = React.createElement(
  'div',
  {id: 'login-btn'},
  'Login'
)

{
  type: 'div',
  props: {
    children: 'Login',
    id: 'login-btn'
  }
}

<div id='login-btn'>Login</div>

function Button ({ onLogin }) {
  return React.createElement(
    'div',
    {id: 'login-btn', onClick: onLogin},
    'Login'
  )
}

const element = React.createElement(
  'div',
  {id: 'login-btn'},
  'Login'
  )

{
  type: 'div',
  props: {
    children: 'Login',
    id: 'login-btn'
  }
}

<div id='login-btn'>Login</div>

// MyComponent.js
import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return (
      <div>This is my component.</div>
    );
  }
}

export default MyComponent;

// MyOtherComponent.js
import React, { Component } from 'react';
import MyComponent from './MyComponent';

class MyOtherComponent extends Component {
  render() {
    return (
      <div>
        <div>This is my other component.</div>
        <MyComponent />
      </div>
    );
  }
}

export default MyOtherComponent;

<MyComponent myProp="This is passed as a prop." />

class MyComponent extends Component {
  render() {
    const {myProp} = this.props;
    return (
      <div>{myProp}</div>
    );
  }
}

class MyComponent extends Component {
  render() {
    const {myState} = this.state || {};
    const message = `The current state is ${myState}.`;
    return (
      <div>{message}</div>
    );
  }
}

class MyComponent extends Component {
  // Executes after the component is rendered for the first time
  componentDidMount() {
    this.setState({myState: 'Florida'});
  }

  render() {
    const {myState} = this.state || {};
    const message = `The current state is ${myState}.`;
    return (
      <div>{message}</div>
    );
  }
}

function Button ({ addFriend }) {
  return React.createElement(
    "button",
    { onClick: addFriend },
    "Add Friend"
  )
}

function User({ name, addFriend }) {
  return React.createElement(
    "div",
    null,
    React.createElement(
      "p",
      null,
      name
    ),
    React.createElement(Button, { addFriend })
  )
}

function Button ({ addFriend }) {
  return {
    type: 'button',
    props: {
      onClick: addFriend,
      children: 'Add Friend'
    }
  }
}

function User ({ name, addFriend }) {
  return {
    type: 'div',
    props: {
      children: [
        {
          type: 'p',
          props: {
            children: name
          }
        },
        {
          type: Button,
          props: {
            addFriend
          }
        }
      ]
    }
  }
}