003|React之Elements&Components

元素

在每一个React制作的页面中，必须有一个根div，如：

<div id="root"></div>

当React代码执行时，通过ReactDOM.render()将React元素或React组件添加进div中，以使得页面被绘制：

const element = <h1>Hello, world</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
); // 第二个参数是要插入的DOM对象

React一旦创建就无法更改，你无法修改它的特性和子元素。通常来说ReactDOM.render()只应该被调用一次。

组件

组件像是一个类，可以创建多个组件实例，每个实例有自己特定的特定属性。
可以通过函数的方式来创建一个组件：

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

只要接受一个props参数的函数都可以是有效的JSX组件。不接受props参数的也可是一个有效的JSX组件，前提是函数内不使用props对象。注意props全部小写，且只读。

我们也可以通过class语法来创建组件：

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

前面看到，JSX表达式可以使用HTML标签，实际上JSX表达式还可以使用组件作为标签。例如，对于上述 Welcome组件，我们可以像下面这样引用：

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

将上述代码组合在一起后，完整代码如下：

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

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

将会输出 Hello Sara。
可以多次使用自定义组件：

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

什么是State？组件中如何处理事件？

好，这一节就到这里。后续我将逐步介绍React技术细节，来慢慢解答上述问题。

想学计算机技术吗？需要1对1专业级导师指导吗？想要团队陪你一起进步吗?欢迎加我为好友！微信号：iTekka。

003|React之Elements&Components

元素

组件

推荐阅读更多精彩内容