React中的三种类型组件介绍

7

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

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

  1. props:组件属性,专门用来连接父子组件间通信,父组件传输父类成员,子组件可以利用但不能编辑父类成员;

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

现在开始步入主题了

  • 受控类型组件:

A)非受控组件
定义:该组件内部的状态不受state控制;
一般模式:

<component defaultVaule='' />

缺点:组件的变化不容易管理;
demo:

clipboard.png

B)受控组件
定义:组件的状态变化受到state的控制;
模式:

 组件的值----state控制;
 组件值得变换---通过触发onChange事件,然后由this.setState负责改变;

demo:

clipboard.png

  • 无状态组件

定义:若一个组件不含有状态和对状态的处理,则可以将render方法单独抽取出来,成为一个独立的组件函数;

特点:
1)不包含任何状态,但可以包含属性;
2)无状态组件生成时不用实例化;
3)无状态组件没有this,ref和生命周期;

作用:
1)单纯的UI表现,不用涉及太多的交互;
2)不用对DOM做过多的操作;
demo:

clipboard.png

注意:
无状态组件转化为有状态组件,则通过高阶组件转化;方式就是高阶组件通过props传入state。

demo:

clipboard.png

  • 高阶组件

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

clipboard.png

包装方式:属性代理和反向代理;
特点:不会改变被包装组件的内容,结构,不会复制它的行为,是利用它创建一个新的行为;

  • 属性代理:

定义:高阶组件接受外界实行,然后通过包装环境传递给被包装组件;
形式:

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();
      }
 }

你可能感兴趣的

载入中...