Question

在React JS https://www.urionlinejudge.com.br/judge/en/problems/view/1837中，提到元素是ReactJS的最小构建块。

但是，还创建了组件，以便创建Elements。例如，

const element = <Welcome name="Sara" title="Mara"/>;

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

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

因此，Component（这里是Welcome函数组件）是帮助创建Element的最小构建块。那么，这是否意味着组件是最小的构建块？令人困惑。请澄清。

Answer 1

react组件由简单的html元素组成。但是反应组件的最小元素是反应组件本身。一个React组件实际上是一个具有{type：...，state：...，props：....，children：....，}字段的对象，其中子元素将由其他子树对象（react元素）组成。此对象用于计算重新渲染组件（状态或道具发生更改）时的dom差异，并使用更改推动对象，而忽略不变的对象。

Answer 2

反应都是关于组件的。当您具有复杂的 DOM （DOM由元素组成）时，这是React的一种方法，可以将复杂的DOM分解为更细的较小组件。

粒度越细，您执行的方式就越反应（这是React的最佳实践）。

谈到“ 组件是最小的构建块吗？”，我们不能这样说，我们可以说“ 所有与组件有关” < / p>

取决于我们我们创建粒状组件的能力如何，这使得它易于重用和维护。

创建细化组件并不总是意味着仅使用一个元素即可创建组件。

颗粒成分？

import React from 'react';

const welcome = (props) => (
    <div>
        <p>props.welcomeMessage</p>

        <h3>Disclaimer</h3>
        <p>props.disclaimerMessage</p>
    </div>
);

export default welcome;

我可以称其为精细组件，但我们也可以在代码的Disclaimer部分进行辩论，Disclaimer也可以在其他地方使用，因此识别这些片段并将其移入自己的组件中始终是一个好习惯，这样我们就可以反应

的全部好处

我们不能将组件称为最小的构建块，但是可以将HTML分解为结构正确的组件树以获取最小的组件。

Answer 3

元素和组件在React中是不同的东西，您阅读的文档首先解释了 element 。

元素：

元素是纯JavaScript对象，用于描述应如何呈现UI。

如果您使用的是JSX，则描述元素看起来与编写HTML非常相似。

// The `<div />` is JSX for creating a React *Element*
const element = <div>Foo</div>;

组件：

组件与元素是分开的。如Components and Props doc中所述，组件是“类似于JavaScript函数”和“返回描述应该在屏幕上显示的内容的React元素”。

React组件返回描述应该在屏幕上显示什么的React Elements

// This is a React *Component*: a Function that returns a React *Element*.
function MyComponent() {
  return <div>Foo</div>;
}

// You can also implement a React *Component* by extending `React.Component`
// and implementing a `render` method.
class YourComponent extends React.Component {
  render() {
    return <div>Foo</div>;
  }
}

什么是ReactJS的最小构建块-元素或组件？

3 个答案: