React浅析(三)：组件

一种是函数定义组件。

这种就比较简单啦~只需要接收一个props的参数传值，返回一个react元素。

这种也被称为stateless，顾名思义就是无状态的~这个概念是从React 0.14版本开始出现的，这类组件只需要传入props，不涉及state状态的操作，无状态组件就是一个单纯的render函数。

• 特点：无状态、无生命周期、不能访问this、纯组件，减少性能损耗

function Child(props){
    return <div>我只是个孩子啊！！</div>
}

另外一种是类定义组件。

特点：有状态、有生命周期，可以通过this来访问自身的函数

//运用ES6中引入的类的概念来定义组件
class Child extends React.Component{
    render(){
        return(
          <div>我是二胎啊~</div>
        )
    }
}

再告诉你一个ES5的方式定义组件啊。

const Child = React.creatClass({
    render(){
       return(
         <div>es5方式生出来的儿砸啊！</div>
       )
    }
})

React.Component or React.creatClass

这两种生孩子的方式有什么不同呢？（这里只讲了其中一点，当然还有其他的区别的哈，自己去看书~）

React.creatClass创建出来的组件，每一个成员函数的this都会自动绑定，React.Component创建出来的组件需要手动绑定this。

至于React.Component的绑定this的方法，也是可以巴拉巴拉巴拉一堆话的~
大家先各自google下哈哈哈哈哈哈哈哈~

结论

如果你问我这三种创建方式有什么不同，要怎么使用，那劳资告诉你！！

1、追求性能：用纯组件(PureComponent)写法

reason：减少render调用次数，你说它是不是性能提升biubiubiu啊。函数组件返回对DOM描述

2、如果你需要使用react的生命周期，那必须是用类定义组件啊

reason：无状态组件是没法用到生命周期的啊，类组件的功能会更强大，类组件可以维护自身的状态变量(state)，对组件的多个周期进行控制

以上我没提到es5的创建方式 React.creatClass，并不是因为它不好啊，我可没说过啊！！！

Class更加适合高阶函数，拥抱新技术才不会被时代淘汰啊~~~

image.png