反应创建组件的三种方式及其区别 - 行业资讯 - 肥雀云

反应推出后,出于不同的原因先后出现三种定义反应组件的方式,殊途同归;具体的三种方式:

　　<李>函数式定义的无状态组件　　<李> es5原生方式React.createClass定义的组件　　<李> es6形式的扩展React.Component定义的组件　　　　

虽然有三种方式可以定义的反应组件,那么这三种定义组件方式有什么不同呢?或者说为什么会出现对应的定义方式呢?下面就简单介绍一下。

<强>无状态函数式组件

创建无状态函数式组件形式是从反应0.14版本开始出现的。它是为了创建纯展示组件,这种组件只负责根据传入的道具来展示,不涉及到要状态状态的操作。具体的无状态函数式组件,其官方指出:

在大部分反应代码中,大多数组件被写成无状态的组件,通过简单组合可以构建成其他的组件等;这种通过多个简单然后合并成一个大应用的设计模式被提倡。

无状态函数式组件形式上表现为一个只带有一个渲染方法的组件类,通过函数形式或者ES6箭头函数的形式在创建,并且该组件是无状态状态的。具体的创建形式如下:

　　　　　　函数HelloComponent(道具、/*上下文*/){ 　　返回& lt; div>你好{props.name} & lt;/div> 　　} 　　ReactDOM.render (& lt; HelloComponent name="塞巴斯蒂安"/祝辞,mountNode) 　　　　

无状态组件的创建形式使代码的可读性更好,并且减少了大量冗余的代码,精简至只有一个渲染方法,大大的增强了编写一个组件的便利,除此之外无状态组件还有以下几个显著的特点:

<强> 1。组件不会被实例化,整体渲染性能得到提升

因为组件被精简成一个渲染方法的函数来实现的,由于是无状态组件,所以无状态组件就不会在有组件实例化的过程,无实例化过程也就不需要分配多余的内存,从而性能得到一定的提升。

<强> 2。组件不能访问这对象

无状态组件由于没有实例化过程,所以无法访问组件这中的对象,例如:this.ref, this.state等均不能访问。若想访问就不能使用这种形式来创建组件

<强> 3。组件无法访问生命周期的方法

因为无状态组件是不需要组件生命周期管理和状态管理,所以底层实现这种形式的组件时是不会实现组件的生命周期方法,所以无状态组件是不能参与组件的各个生命周期管理的。

<>强4。无状态组件只能访问输入的道具、同样的道具会得到同样的渲染结果,不会有副作用

无状态组件被鼓励在大型项目中尽可能以简单的写法来分割原本庞大的组件,未来的反应也会这种面向无状态组件在譬如无意义的检查和内存分配领域进行一系列优化,所以。

<强> React.createClass

“React.createClass”是反应刚开始推荐的创建组件的方式,这是ES5的原生的JavaScript来实现的反应组件,其形式如下: