元素或组件的最小构造块是什么?

react组件由简单的html元素组成。但react组件的最小元素是react组件本身。 react组件实际上是一个具有字段{type:…、state:…、props:…、children:…}的对象,其中子对象将由其他子树对象(react元素)组成。此对象用于计算组件重新提交时(状态或道具发生更改时)dom中的差异,并使用更改推送对象,忽略未更改的对象。

反应 都是关于组件的。当你有复杂的 多姆 (DOM由元素组成)React的方法是将复杂的DOM分解成粒度更小的组件。

粒度越细,你做的就越多 反应 方法(这是一种最佳实践)。

来到“ 组件是最小的构建块吗? “我们不能那样说,我们可以这样说” React是关于组件的 "

这取决于我们如何创建粒度组件,这使得它易于重用和维护。

创建颗粒组件并不总是意味着只使用一个元素创建组件。

颗粒成分?

import React from 'react';

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

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

export default welcome;

我可以称之为粒度组件,但我们也可以讨论此代码中的免责声明部分,免责声明也可以在其他地方使用,因此识别这些片段并将其移动到自己的组件中始终是一种良好的做法,以便我们获得 反应

我们不能将一个组件称为最小的构建块,但我们可以将HTML分解为适当的、结构良好的组件 组件树 去拿最小的。

元素 和 组件 React中有不同的东西,您阅读的文档解释了其中的第一个,即 要素 .

元素 :

元素是简单的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元素,描述屏幕上应显示的内容

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