React篇(019)-元素和组件有什么区别?

2022-05-12 20:41:38 浏览数 (1)

答案:

一个 *Element* 是一个简单的对象,它描述了你希望在屏幕上以 DOM 节点或其他组件的形式呈现的内容。*Elements* 在它们的属性中可以包含其他 *Elements*。创建一个 React 元素是很轻量的。一旦元素被创建后,它将不会被修改。 React Element 的对象表示如下:

代码语言:javascript复制
const element = React.createElement(
  'div',
  {id: 'login-btn'},
  'Login'
)

上面的 `React.createElement()` 函数会返回一个对象。

代码语言:javascript复制
{
  type: 'div',
  props: {
    children: 'Login',
    id: 'login-btn'
  }
}

最后使用 `ReactDOM.render()` 方法渲染到 DOM:

代码语言:javascript复制
<div id='login-btn'>Login</div>

而一个组件可以用多种不同方式声明。它可以是一个含有 `render()` 方法的类。或者,在简单的情况中,它可以定义为函数。无论哪种情况,它都将 props 作为输入,并返回一个 JSX 树作为输出:

代码语言:javascript复制
 const Button = ({ onLogin }) =>
      <div id={'login-btn'} onClick={onLogin} />

然后 JSX 被转换成 `React.createElement()` 函数:

代码语言:javascript复制
const Button = ({ onLogin }) => React.createElement(
  'div',
  { id: 'login-btn', onClick: onLogin },
  'Login'
)

0 人点赞