005-React 组件简介

React Components 简介

component 意为组件、零件，React带给我们的并不是像jQuery那样的众多方便方法，而是一个全新的概念——组件化，我们的网站（或者 Web App）可以分化成一个个组件，就像现在修高楼一样，先把各种龙骨在工厂生产好，再组装。例如，一个网站有导航栏，主体，我们就把这两个东西分开，不在一个html中全部写完，而是分开“制作”，甚至主体中的文章有标题栏和正文，我们也可以将其组件化。

你问组件化有什么好处，至少在我们学习的过程中，没有好处，甚至会加大学习成本，但是试想，在一个大型项目，是不是组件化后更能检测出问题和BUG呢，毕竟不需要在一个庞大的页面中寻找错误了。

第一个 React 组件

做一些小改变

开始写组件之前，我们先将之前的index.html中的JSX部分分离，以方便后续步骤：
Step1：在public目录下新建app.jsx文件；
Step2：将原index.html中的JSX代码移动到进app.jsx；
Step3：将index.html的<script>标签修改为：<script type="text/babel" src="app.jsx"></script>;
修改完成后，index.html文件应该如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>React-1</title>
  <script src="https://unpkg.com/react@latest/dist/react.js"></script>
  <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
  <div id="app"></div>
  <script type="text/babel" src="app.jsx"></script>
</body>
</html>

我们新建的app.jsx应该如下：

ReactDOM.render(
  <h1>Hello React</h1>,
  document.getElementById("app")
);

React.createClass();

现在我们开始编写第一个React组件，React组件并不是由什么神奇的技巧变成的，而是通过调用React.createClass();方法，生成一个组件，并且将其赋给一个变量，而那个变量就代表了我们的组件，（注意：React.createClass();中的React是React众多模块的一个，它有很多方法给我们使用，与我们之前使用的ReactDOM模块等同。） 例如我们在app.jsx中这样写：

var Words = React.createClass({
  render:function(){
    return (
      <div>
        <h1>Hello React Component</h1>
      </div>
    );
  }
});
ReactDOM.render(
  <Words/>,
  document.getElementById("app")
);

我们使用React.createClass();创建了一个组件，我们想让这个组件有内容，只需要在此方法中返回一个对象（Object），这个对象中使用render成员，并且给这个成员赋一个方法，这个方法使用JSX返回一些内容。这样后，这个组件会准备渲染(render)一个<div><h1>Hello React</h1></div> ，这就是一个小组件，虽然没用，但是能体现React组件的思想。然后我们把这些都赋给一个变量var Words。

接着我们在ReactDOM.render()中使用这个组件，非常简单，只需要使用<Words/>这样既代表Words组件。我们在终端中使用node server.js，开启服务器监听3000端口，出现图图示则第一个组件创建成功！

window-8.png

现在我们在React.createClass();中添加一个<p>标签：

var Words = React.createClass({
  render:function(){
    return (
      <div>
        <h1>Hello React Component</h1>
        <p>This is a paragraph</p>
      </div>
    );
  }
});

刷新浏览器，出现如下：

window-9.png

我们并没有在

ReactDOM.render(
  <Words/>,
  document.getElementById("app")
);

中添加任何内容，而页面却渲染了p标签的内容，这是因为我们在React.createClass();的render方法中添加了，而我们在渲染<Words/>组件时，内容就会自动被渲染。这就是组件的好处，我们要修改页面的内容或者功能时，只需要在相应的组件中修改，这样能大大提高我们的效率，虽然在这个很小的项目中还看不出来。

在 React.createClass(); 中需要注意的地方

创建组件中的render成员方法中，只允许返回一个根标签，你不能返回多个根标签。

//正确，只有一个根标签<div>
var Words = React.createClass({
  render:function(){
    return (
      <div>
        <h1>Hello React Component</h1>
        <p>This is a paragraph</p>
      </div>
    );
  }
});

//错误，根标签不唯一
var Words = React.createClass({
  render:function(){
    return (
        <h1>Hello React Component</h1>
        <p>This is a paragraph</p>
    );
  }
});

如果我们非要渲染两个标签的内容，那么我们只需要将他们放进一个<div>标签即可；

005-React 组件简介