玩转 React 【第03期】：邂逅 React 组件

上期回顾

• 前文咱们讲解了 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 是父祖中传入的信息，关于这两项的具体内容咱们也放在下篇内容中详细的讲解。

除了上述内容以外，函数式组件还有如下几个特征：

1 组件不会被实例化，而是直接解析成 reactElemnt，总体渲染性能获得提高

2 没有实例化，天然在组件内部咱们也不能使用 this

3 组件没法访问生命周期的方法，这个咱们已经介绍过

4 组件没有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

关注妙味订阅号：“妙味前端”，为您带来优质前端技术干货；