什么是react组件

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

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

原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。