React中的三种类型组件介绍

React从诞生到现在，越来越多的前端开发者喜欢上该框架，其原因有很多，其中一个主要的原因是因为它的组件很灵活，而本博客主要介绍React的三种类型的组件：受控类型，无状态类型，高阶类型。

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

props:组件属性，专门用来连接父子组件间通信，父组件传输父类成员，子组件可以利用但不能编辑父类成员；
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();
      }
 }

React中的三种类型组件介绍

猜你在找的React相关文章