React 中的组件语法

Question

我是 React 的初学者，只是关于组件的一些问题假设我有一个组件：

function HelloWorld() {
    return React.createElement('div', {}, 'Hello World!')
}

所以我的问题是：

1-HelloWorld是组件名称，不是吗？

2-然后我有下面的代码：

ReactDOM.render(
    <HelloWorld/>, document.querySelector('#root')
); 

<ComponentName/>的语法是什么？ 让渲染函数像这样不是更明智吗：

ReactDOM.render(
    HelloWorld(), document.querySelector('#root')
); 

Answer 1

ReactDOM.render的语法

：

ReactDOM.render( <Component />, id of DOM element where component will render ); 

在 React 中，有 2 种类型的组件：

• 1(功能组件(也称为无状态组件(
• 2(类组件(也称为有状态组件(

功能组件示例：

function HelloWorld() {
    return React.createElement('div', {}, 'Hello World!')
}
or 
const HelloWorld=()=>{
    return (<div>HelloWorld</div>);
}
export default HelloWorld;

类组件示例：

class HelloWorld extends React.Component{
   render(){
      return (<div>HelloWorld</div>);
   }
}

所以像这样传递组件：

ReactDOM.render(
    HelloWorld(), document.querySelector('#root')
); 

不正确的方式，在 React 中使用组件作为<ComponentName />

所以这就是为什么你必须像这样通过：

ReactDOM.render(
        <HelloWorld/>, document.querySelector('#root')
 ); 

Answer 2

1 - 不，这将是您正在创建的div标签的内容(又名"子项"(。那是<div>Hello World!</div>.

2 - 不确定您指的是什么ComponentName。该代码段获取 HelloWorld React 组件并将其挂载到 DOM 上，DOM 也会启动协调过程。

此外，JSX 的目的是尽可能拥有类似于 HTML 的语法糖。是的，你的建议基本上是幕后发生的事情(从伪代码的角度来看(，但会破坏使用 JSX 的目的。

Answer 3

当 react 构建你的应用程序并运行时，它将类似于你给出的最后一个示例。

React 将所有组件编译为

React.createElement('htmlTag' || someOtherComponent(), ...);

因此，很多人发现使用 JSX sintax 编写组件更加简单和高效，只需使用 build 命令来编译和捆绑代码。