反应组分与反应元素的区别

Question

React Component和React Element有什么区别？文档提到了两个但没有详细说明,一些方法需要组件,其他元素......

Answer 1

这里涉及三种相关的事情,有自己的名字:

• 组件
• 组件实例
• 分子

这有点令人惊讶,因为如果你习惯了其他UI框架,你可能会认为只有两种东西,大致对应于类(如Widget)和实例(如new Widget()).在React中并非如此; 组件实例是不一样的东西作为要素,也没有在它们之间的一对一的关系.为了说明这一点,请考虑以下代码:

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')
);

在上面的代码中:

• MyComponent(类本身)是一个组件
• element是一个元素.这不是一个例子MyComponent; 相反,它只是要创建的组件实例的描述.这是一个对象key,props,ref和type属性.在这里,key并且ref有null,props是一个空的对象,type是MyComponent.
• 获取渲染时,会创建一个gets 实例MyComponent(并在上面的示例中,从其构造函数中记录自己)element.
• another_element也是一个元素,并有key,ref,props和type属性,就像element做-但这次的值type是字符串"div".

React团队的博客文章React Components,Elements和Instances中详细探讨了React具有这三个不同概念的设计原因,我建议阅读.

最后,应该注意的是,虽然官方文档严格使用术语"组件"来引用函数或类,而"组件实例"引用实例,但其他来源不一定遵守这个术语; 在GitHub上阅读Stack Overflow答案或讨论时,您应该会看到"组件"使用(错误地)表示"组件实例".

Answer 2

为了进一步详细说明答案,React Element在原型上没有任何方法,也没有任何方法.这也使它们变得快速.

"ReactElement是DOM元素的轻量级,无状态,不可变的虚拟表示" - https://facebook.github.io/react/docs/glossary.html#react-elements

react组件render()函数返回幕后反应元素的DOM树(这是虚拟DOM btw).有一些复杂的映射和差异逻辑,但基本上这些React元素映射到DOM元素.

您还可以直接创建元素,React.createElement(arg)其中arg可以是html标记名称或React Component类.

Answer 3

反应元素

React Element只是一个Object没有自己方法的普通旧JavaScript .它基本上有四个属性:

• type,String表示HTML标记或引用React组件的引用
• key,a String用于唯一标识React元素
• ref,访问底层DOM节点或React组件实例的引用)
• props(属性Object)

React Element不是React Component的实例.它只是一个简化的"描述",说明如何创建React组件实例(或依赖于typeHTML标记).

描述React组件的React元素不知道它最终呈现的DOM节点 - 这个关联是抽象的,并且在渲染时将被解析.

React Elements可以包含子元素,因此能够形成表示Virtual DOM树的元素树.

React组件和React组件实例

自定义React组件React.createClass由扩展创建React.Component(ES2015).如果实例化React组件,则它需要a props Object并返回一个实例,该实例称为React Component Instance.

React组件可以包含状态,并且可以访问React Lifecycle方法.它必须至少有一个render方法,在调用时返回React元素(-tree).请注意,您永远不会自己构建React组件实例,但让React为您创建它.

Answer 4

React 元素与 React 组件

反应元素

• React Element 是从组件返回的内容。它是一个虚拟地描述组件所代表的 DOM 节点的对象。
• 对于函数组件，此元素是函数返回的对象。
• 对于类组件，元素是组件的渲染函数返回的对象。电阻
• React 元素不是我们在浏览器中看到的。它们只是内存中的对象，我们无法更改它们的任何内容。
• React 元素可以具有type除原生 HTML 元素之外的其他属性。

我们知道以下几点：

• react 元素描述了我们希望在屏幕上看到的内容。

更复杂的说法是：

• React 元素是 DOM 节点的对象表示。

_在这里进行区分很重要，因为元素不是我们在屏幕上看到的实际内容，而是对象表示是呈现的内容。

React 在这些方面做得很好：

• React 可以在没有太多开销的情况下创建和销毁这些元素。JS 对象是轻量级和低成本的。
• React 可以将一个对象与之前的对象表示进行比较，以查看发生了什么变化。
• React 可以更新实际的 DOM，特别是它检测到的变化发生的地方。这有一些性能优势。

我们可以使用该createElement方法创建 DOM 节点（又名 React 元素）的对象表示。

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

这里createElement接受三个参数

1. 标签名称（例如 div、span 等）
2. 我们希望元素具有的任何属性
3. 元素的子元素的内容（例如读取的文本Login）

该createElement调用返回一个对象

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

当它被渲染到 DOM 时（使用ReactDOM.render），我们将有一个新的 DOM 节点，如下所示：

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

哈扎！

通常，React 是从组件优先的方法中教授的，但是理解元素优先可以平滑过渡到组件。

反应组件

组件是一个函数或一个类，它可以选择接受输入并返回一个 React 元素。

• React 组件是一个模板。一个蓝图。全局定义。这可以是函数或类（带有渲染函数）。

• 如果 react 将类或函数视为第一个参数，它会检查它呈现的元素，给定相应的 props 并继续这样做，直到不再createElement有将类或函数作为第一个参数的调用.

• 当 React 看到一个具有函数或类类型的元素时，它会与该组件协商以了解它应该返回哪个元素，给定相应的 props。

• 在此过程结束时，React 将拥有 DOM 树的完整对象表示。这整个过程在 React 中称为 reconciliation，每次触发setState或ReactDOM.render调用。

基于类的组件

类语法是定义 React 组件最常见的方法之一。虽然比函数式语法更冗长，但它以生命周期钩子的形式提供了更多的控制。

• 我们可以渲染同一组件的多个实例。
• 实例是在基于类的组件中使用的“this”关键字。
• 不是手动创建的，而是在 React 内存中的某个地方。

创建类组件

// 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." />

道具可以通过 this.props

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>
    );
  }
}

基于函数的组件

• 没有实例。
• 可以多次渲染，但 React 不会将本地实例与每个渲染相关联。
• React 使用函数的调用来确定要为函数呈现什么 DOM 元素。

和 createElement

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 })
  )
}

什么createElement回报

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
          }
        }
      ]
    }
  }
}

这里我们有一个Button组件，它接受一个onLogin输入并返回一个 React 元素。

• 该Button组件接收一个onLogin方法作为其属性。
• 为了将它传递给我们的 DOM 对象表示，我们将它作为第二个参数传递给 createElement，就像我们对id属性所做的一样。

Answer 5

React Element- 它是一个简单的对象，它描述了一个 DOM 节点及其你可以说的属性或属性。它是一个不可变的描述对象，您不能对其应用任何方法。

例如——

<button class="blue"></button>

React Component- 它是一个接受输入并返回 React 元素的函数或类。它必须保持对 DOM 节点和子组件实例的引用。

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

Answer 6

组件是用于创建元素的工厂。