什么是React中的组件

 

组件就是页面上的一部分。如图，左边是一个网页。右边是对应的一个组件图。我们可以把一个大的网页拆分成很多小的部分。比如标题部分，对应一个组件，就是标题组件。搜索部分，对应的组件就是搜索组件。而这个搜索组件我们可以进一步的拆分，是由input框和button组成的。所以还可以继续把搜索组件拆分成小的组件。一个是input组件，一个是button组件。页面上很多区域也可以拆分成组件，所以页面就被拆分成了很多个组件。一个页面很复杂，有时候很难编写，但当我们把他拆分成组件的时候，再来维护这些小组件的时候就比较简单了。这就是我们前端组件化的概念。

 

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

比如在index.js这个入口文件中, import App from './App';就是一个组件，打开这个组件

import React, { Component } from 'react';
class App extends Component {
　　render() {
　　　　return (
　　　　　　<div className="App">
　　　　　　　　hello world
　　　　　　</div>
　　　　);
　　}
}
export default App;

这就是一个最基础的react组件的定义，那么我们看react组件是如何被定义的。这个{Component}呢，比较难懂，这个是es6的结构赋值，我可以把他去掉，就等价于下面这个

import React from 'react';
class App extends React.Component {
　　render() {
　　　　return (
　　　　　　<div className="App">
　　　　　　　　hello world
　　　　　　</div>
　　　　);
　　}
}
export default App;

当我们定义一个react组件的时候，我们看是怎么定义的，首先我们通过es6的写法定义了一个类。这个类继承了React下面的Component这个类。所以当一个类继承了React，Component这个类的时候，他就是一个react的组件了。所以当要去定义一个组件的时候，只要继承这个React下面Coponent这个类就可以了。接着往下看，这下面有个render方法，这个方法需要返回一个内容。我们说组件是页面的一部分，那么这个组件的内容由render函数决定，render函数返回什么，那么这个组件就返回什么内容。然后我们通过export default这种语法导出出去。

我们再回到index。我们知道App是一个组件，在项目中引入了这个组件，接下来我们看ReactDOM.render在做什么，ReactDOM是一个第三方的模块，他又一个方法叫做render，这个方法可以把一个组件挂载到一个节点上。这里我们把App组件挂载到id为root的一个节点上。咋一看我们没有用到React，为什么要引入呢，我们把他删除再看一下，会提示Failed to compile。编译失败，那为什么会编译失败呢。我们看下面使用App的时候，不是直接用App，而是用html标签的形式一样包裹起来。那么这种语法呢叫做jsx的语法，如果在项目中使用jsx这样的语法，那么就一定要对应的文件里引入React，不引入React是没法去编译这种jsx的语法的。那么回过头来，我App.js没有用到jsx语法，但是不引入依然会提示Failed to compile。我们看render里面的标签，<div></div>，这个不就是html标签么，实际上不是的，在React中，render函数里面这些标签其实也是jsx的语法