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

作者: 至此
发布时间: 2024-12-13 12:09:52 (1月前)
转自：

8 条回复

0#
回复此人
757461156 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 一个的<strong> 元件 </强> 是一个简单的对象，用DOM节点或其他组件描述您想要在屏幕上显示的内容。元素可以在其道具中包含其他元素。创建React元素很便宜。一旦创建了一个元素，它就永远不会发生变异。 React元素的对象表示如下， </p> <pre> <code> const element = React.createElement( 'div', {id: 'login-btn'}, 'Login' ) </code> </pre> <P> 上面的createElement返回如下对象， </p> <pre> <code> { type: 'div', props: { children: 'Login', id: 'login-btn' } } </code> </pre> <P> 最后使用ReactDOM.render渲染到DOM，如下所示， </p> <pre> <code> <div id='login-btn'>Login</div> </code> </pre> <P> 而a 的<strong> 零件 </强> 可以用几种不同的方式声明。它可以是一个带有render（）方法的类。或者，在简单的情况下，可以将其定义为函数。在任何一种情况下，它都将props作为输入，并返回一个元素树作为输出。 JSX最后被编译为createElement。 </p> <pre> <code> function Button ({ onLogin }) { return React.createElement( 'div', {id: 'login-btn', onClick: onLogin}, 'Login' ) } </code> </pre> </DIV>

编辑
1#
回复此人
木木 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 组件是用于创建元素的工厂。 </p> </DIV>

编辑
2#
回复此人
北极星微控 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 一个 <code> React Element </code> 你会认为是一个基本的html（dom to be precise）元素。它只是一种创建元素而不使用备受争议的jsx格式的方法。 </p> <P> 一个 <code> React Component </code> 是你可以考虑作为一个对象。它有它的方法，支持 <code> React lifecycles </code> 并且通常是不可用的（至少还没有找到任何重用，欢迎举例）。它必然需要一个渲染功能。 </p> <P> 一个 <code> React Class </code> 就是你所说的课程。功能明智 <code> React Class </code> 和 <code> React Component </code> 是一样的只有语法才是真正的变化 <code> React Component </code> 是根据 <code> ES6 syntax </code> 。另一个主要变化是除非使用箭头函数，否则不再支持函数的默认绑定。 <code> Mixins </code> 也不再受支持 <code> ES6 </code> 。 </p> </DIV>

编辑
3#
回复此人
与之 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <H1> 反应元素 </H1> <P> React Element只是一个普通的旧JavaScript <code> Object </code> 没有自己的方法。它基本上有四个属性： </p> <UL> <LI> <code> type </code> ，一个 <code> String </code> 表示HTML标记或引用React组件的引用 </LI> <LI> <code> key </code> ，一个 <code> String </code> 唯一地标识React元素 </LI> <LI> <code> ref </code> ，访问底层DOM节点或React组件实例的引用） </LI> <LI> <code> props </code> （属性 <code> Object </code> ） </LI> </UL> <P> React Element不是React Component的实例。它只是一个简化的“描述”React组件实例（或取决于 <code> type </code> 要创建的HTML标记应该是这样的。 </p> <P> 描述React组件的React元素不知道它最终呈现的DOM节点 - 这个关联是抽象的，并且在渲染时将被解析。 </p> <P> React Elements可以包含子元素，因此能够形成表示Virtual DOM树的元素树。 </p> <H1> React组件和React组件实例 </H1> <P> 自定义React组件由。创建 <code> React.createClass </code> 或通过扩展 <code> React.Component </code> （ES2015）。如果实例化React组件，则需要a <code> props </code> <code> Object </code> 并返回一个实例，称为React Component Instance。 </p> <P> React组件可以包含状态，并且可以访问React Lifecycle方法。它必须至少有一个 <code> render </code> 方法，在调用时返回React元素（-tree）。请注意，您永远不会自己构建React组件实例，但让React为您创建它。 </p> </DIV>

编辑
4#
回复此人
取之 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> <code> React Element </code> - 这是一个简单的对象，它描述了一个DOM节点及其可以说的属性或属性。它是一个不可变的描述对象，您不能在其上应用任何方法。 </p> <P> 例如 - </p> <pre> <code> <button class="blue"></button> </code> </pre> <P> <code> React Component </code> - 它是一个接受输入并返回React元素的函数或类。它必须保持对其DOM节点和子组件实例的引用。 </p> <pre> <code> const SignIn = () => ( <div> <p>Sign In</p> <button>Continue</button> <button color='blue'>Cancel</button> </div> ); </code> </pre> </DIV>

编辑
5#
回复此人
無口君 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 有 <EM> 三 </EM> 这里涉及的相关事物，有自己的名字： </p> <UL> <LI> 组件 </LI> <LI> 组件实例 </LI> <LI> 分子 </LI> </UL> <P> 这有点令人惊讶，因为如果你习惯了其他UI框架，你可能会认为只有两种东西，大致对应于类（比如 <code> Widget </code> ）和实例（如 <code> new Widget() </code> ）。在React中并非如此;组件实例是 <EM> 不 </EM> 与元素相同的东西，它们之间也没有一对一的关系。为了说明这一点，请考虑以下代码： </p> <pre> <code> 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') ); </code> </pre> <P> 在上面的代码中： </p> <UL> <LI> <code> MyComponent </code> （该 <EM> 阶级本身 </EM> ）是一个组件 </LI> <LI> <code> element </code> 是一个元素。它的 <EM> 不 </EM> 一个例子 <code> MyComponent </code> ;相反，它只是要创建的组件实例的描述。这是一个对象 <code> key </code> ， <code> props </code> ， <code> ref </code> 和 <code> type </code> 属性。这里， <code> key </code> 和 <code> ref </code> 是 <code> null </code> ， <code> props </code> 是一个空对象，和 <code> type </code> 是 <code> MyComponent </code> 。 </LI> <LI> 一个 <EM> 例 </EM> 的 <code> MyComponent </code> 在何时创建（并在上面的示例中，从其构造函数中记录自己） <code> element </code> 得到了。 </LI> <LI> <code> another_element </code> 也是一个元素，并且有 <code> key </code> ， <code> ref </code> ， <code> props </code> 和 <code> type </code> 属性就像 <code> element </code> 确实 - 但这一次的价值 <code> type </code> 是字符串 <code> "div" </code> 。 </LI> </UL> <P> React团队的博客文章详细探讨了React具有这三个不同概念的设计原因 <a href="https://facebook.github.io/react/blog/2015/12/18/react-components-elements-and-instances.html" rel="noreferrer"> <EM> 反应组件，元素和实例 </EM> </A> ，我建议阅读。 </p> <P> 最后，应该注意的是，虽然官方文档严格使用术语“组件”来引用函数或类，而“组件实例”引用实例，但其他来源不一定遵守这个术语;在GitHub上阅读Stack Overflow答案或讨论时，您应该会看到“组件”使用（错误地）表示“组件实例”。 </p> </DIV>

编辑
6#
回复此人
昵称不能为空 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 将Component视为一个类，将Element视为一个实例。而已！ </p> </DIV>

编辑

登录后才能参与评论