React中的三种类型组件介绍

React从诞生到如今，愈来愈多的前端开发者喜欢上该框架，其缘由有不少，其中一个主要的缘由是由于它的组件很灵活，而本博客主要介绍React的三种类型的组件：受控类型，无状态类型，高阶类型。

在讲组件以前，先介绍一下React组件的两个重要特性：

1. props:组件属性，专门用来链接父子组件间通讯，父组件传输父类成员，子组件能够利用但不能编辑父类成员；

2. state：专门负责保存和改变组件内部的状态；

如今开始步入主题了

• 受控类型组件：

A）非受控组件
定义：该组件内部的状态不受state控制；
通常模式：

<component defaultVaule='' />

缺点：组件的变化不容易管理；
demo：

B）受控组件
定义：组件的状态变化受到state的控制；
模式：

组件的值----state控制；
 组件值得变换---经过触发onChange事件，而后由this.setState负责改变；

demo：

• 无状态组件

定义：若一个组件不含有状态和对状态的处理，则能够将render方法单独抽取出来，成为一个独立的组件函数；

特色：
1）不包含任何状态，但能够包含属性；
2）无状态组件生成时不用实例化；
3）无状态组件没有this，ref和生命周期；

做用：
1）单纯的UI表现，不用涉及太多的交互；
2）不用对DOM作过多的操做；
demo：

注意：
无状态组件转化为有状态组件，则经过高阶组件转化；方式就是高阶组件经过props传入state。

demo：

• 高阶组件

定义：一个包含了另外一个React组件的React组件；本质上就是一个函数.
形式：

包装方式：属性代理和反向代理；
特色：不会改变被包装组件的内容，结构，不会复制它的行为，是利用它建立一个新的行为；

• 属性代理：

定义：高阶组件接受外界实行，而后经过包装环境传递给被包装组件；
形式：

function HOC(Com) {
  其余处理；
  return class [Name] extends Component {
     constructor(props) {
       super(props);
     }
     render() {
        return (
          <div>
             <Com {...this.props} />
          </div>
        )
     }
  }
}

Name:能够指定返回组件的名称；

• 反向代理

定义：指定的组件做为另外一个组件的父类，而继承了的组件就是一个高阶组件
特色：
1）该组件是被动被继承；
2）高阶组件能够经过this来获取父类的state，props，生命周期函数和渲染函数；
3）通常来讲，若调用父类的生命周期和渲染函数，用super来调用，以便保护父类的生命周期和渲染函数；
优点：
渲染劫持：高阶组件经过props属性来决定父类的渲染树是否被渲染（props不能建立或者改变props的名称，但能够更改和操做props的值）；
demo：

function HOC(B){
       return class [A] extends B{
         render(){
             return super.render();
      }
 }