上期回顾
-
前文我们讲解了 React 模板 JSX，接着我们继续来看看 React 组件又是如何工作的呢？
-
组件化开发到了今天已经是大家的共识，在 React 中，组件同样也是组成我们整个项目的基本单元。
react 中组件可以将UI切分成一些的独立的、可复用的部件。组件的返回值是一个需要在也页面上显示的 React 元素，也就是说 React 中组件必须有返回值。示例如下：
function Hello (props){
return (<div>
<h1>Hello world</h1>
</div);
}
整个 Hello 就是一个组件，调用的时候，我们 可以直接 调用 <Hello /> 就可以，另外这里要注意，组件的命名必须是首字母大写。
创建组件
在 React 中创建组件有三种方式：
1） 无状态的函数式组件；
2） 基于ES5 的 React.createClass;
3） 基于 ES6 的 extends React.Component；
这三种方式都可以去创建一个 React 组件，但是在实际的使用过程中有什么不同呢？我们具体来看。
函数式组件
函数式组件，是为了创建纯粹的展示组件，也就是说函数式组件一旦创建了就不能修改，除非它的父级修改了才会引起它的修改，这样的好处就是性能较高，内部没有太多的东西，如 state 和 声明周期，当然生命周期和state是什么我们后边再详细说，这里我们先大概了解，这俩东西主要是用来更改组件的内容，以及组件修改后的一系列处理的。
函数式组件的编写方式如下：
function Hello (props[,context]){
return (<div>
<h1>Hello {props.name}</h1>
</div);
}
ReactDOM.render(<Hello name="MiaoV" />, node)
return 中就是我们要显示在页面上的内容，props 是父组件传入的信息，context 是父祖中传入的信息，关于这两项的具体内容我们也放在下篇内容中详细的讲解。
除了上述内容之外，函数式组件还有以下几个特征：
-
组件不会被实例化，而是直接解析成 reactElemnt，整体渲染性能得到提升
-
没有实例化，自然在组件内部我们也不能使用 this
-
组件无法访问生命周期的方法，这个我们已经介绍过
-
组件没有state，只能访问 props
函数式组件由于其优良的性能，个人建议如果一个组件的内部我们不需要控制它进行改变的话，尽量还是使用 函数式组件
React.createClass
React.createClass 是一种基于 ES5 的创建组件的方式。本质就是一个工厂，在 React.createClass(配置对象) 放入我们的配置对象，然后它会帮我们返回一个 React 组件，
示例如下：
let Fn = React.createClass({
render: function(){
return (
<div>
<h1 id="title">Hello React!</h1>
<h2 id={title}>Hello React!</h2>
<h2 className="box">class属性</h2>
<h2 style={ {background: 'red'} }>style属性</h2>
</div>
);
}
});
上述是 React.createClass 的使用方式，但是要注意 React.createClass 方法 在React 16 之后就已经取消了，所以我们就不再讨论这个方法，直接来看 ES6 的写法。
React.Component
React ES6中，如果要声明一个类式组件，我们需要从 React.Component 继承过来，具体写法如下：
class Hello extends React.Component {
render(){
return (
<h1>hello! {this.props.name}</h1>
);
}
}
ReactDOM.render(
<Hello name = "MiaoV" />
document.querySelector('#app')
);
在使用 React.Component 的时候，有一些问题是需要我们注意的：
-
在 React.Component 中我们必须要定义一个 render 方法，这个方法中的返回值，就是最终我们要渲染到页面中 ReactElement 。
-
组件在实际调用的时候，会生成一个实例化对象，所以组件的方法中的 this 就指向这个实例化对象。
-
props 这个属性中存储的是我们调用时传入的属性，也是默认的第0个参数，所以组件中如果定义了 constructor， 必须 使用 super 继承，另外必须 把第 0 个参数传入去，示例如下：
-
最后强调一下，组件的命名必须首字母大写。
class Hello extends React.Component {
constructor(props){
super(props);
}
render(){
return (
<h1>hello! {this.props.name}</h1>
);
}
}
关于组件的创建我们就先介绍到这，在下一篇中，我们会详细的讲解 props,state 以及组件其他的相关知识。
——以上是笔者归纳总结，如有误之处，欢迎指出。
订阅号ID：Miaovclass
关注妙味订阅号：“妙味前端”，为您带来优质前端技术干货；