React中的三种类型组件介绍

前端之家收集整理的这篇文章主要介绍了React中的三种类型组件介绍前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

@H_403_4@
  • 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相关文章