React推出后，出于不同的原因先后出现三种定义react组件的方式，殊途同归；具体的三种方式：

• 函数式定义的无状态组件
• es5原生方式React.createClass定义的组件
• es6形式的extends React.Component定义的组件

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

无状态函数式组件

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

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

无状态函数式组件形式上表现为一个只带有一个render方法的组件类，通过函数形式或者ES6 arrow function的形式在创建，并且该组件是无state状态的。具体的创建形式如下：

function HelloComponent(props, /* context */) {
 return <div>Hello {props.name}</div>
}
ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode) 

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

1.组件不会被实例化，整体渲染性能得到提升

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

2.组件不能访问this对象

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

3.组件无法访问生命周期的方法

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

4.无状态组件只能访问输入的props，同样的props会得到同样的渲染结果，不会有副作用

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

React.createClass

`React.createClass`是react刚开始推荐的创建组件的方式，这是ES5的原生的JavaScript来实现的React组件，其形式如下：

var InputControlES5 = React.createClass({
 propTypes: {//定义传入props中的属性各种类型
 initialValue: React.PropTypes.string
 },
 defaultProps: { //组件默认的props对象
 initialValue: ''
 },
 // 设置 initial state
 getInitialState: function() {//组件相关的状态对象
 return {
 text: this.props.initialValue || 'placeholder'
 };
 },
 handleChange: function(event) {
 this.setState({ //this represents react component instance
 text: event.target.value
 });
 },
 render: function() {
 return (
 <div>
 Type something:
 <input onChange={this.handleChange} value={this.state.text} />
 </div>
 );
 }
});
InputControlES6.propTypes = {
 initialValue: React.PropTypes.string
};
InputControlES6.defaultProps = {
 initialValue: ''
};

与无状态组件相比，React.createClass和后面要描述的React.Component都是创建有状态的组件，这些组件是要被实例化的，并且可以访问组件的生命周期方法。但是随着React的发展，React.createClass形式自身的问题暴露出来：

• React.createClass会自绑定函数方法（不像React.Component只绑定需要关心的函数）导致不必要的性能开销，增加代码过时的可能性。
• React.createClass的mixins不够自然、直观；React.Component形式非常适合高阶组件（Higher Order Components--HOC）,它以更直观的形式展示了比mixins更强大的功能，并且HOC是纯净的JavaScript，不用担心他们会被废弃。

React.Component

React.Component是以ES6的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式，最终会取代React.createClass形式；相对于 React.createClass可以更好实现代码复用。将上面React.createClass的形式改为React.Component形式如下：

class InputControlES6 extends React.Component {
 constructor(props) {
 super(props);
 // 设置 initial state
 this.state = {
 text: props.initialValue || 'placeholder'
 };
 // ES6 类中函数必须手动绑定
 this.handleChange = this.handleChange.bind(this);
 }
 handleChange(event) {
 this.setState({
 text: event.target.value
 });
 }
 render() {
 return (
 <div>
 Type something:
 <input onChange={this.handleChange}
 value={this.state.text} />
 </div>
 );
 }
}
InputControlES6.propTypes = {
 initialValue: React.PropTypes.string
};
InputControlES6.defaultProps = {
 initialValue: ''
};

React.createClass与React.Component区别

根据上面展示代码中二者定义组件的语法格式不同之外，二者还有很多重要的区别，下面就描述一下二者的主要区别。

函数this自绑定

React.createClass创建的组件，其每一个成员函数的this都有React自动绑定，任何时候使用，直接使用this.method即可，函数中的this会被正确设置。

const Contacts = React.createClass({ 
 handleClick() {
 console.log(this); // React Component instance
 },
 render() {
 return (
 <div onClick={this.handleClick}></div>
 );
 }
});

React.Component创建的组件，其成员函数不会自动绑定this，需要开发者手动绑定，否则this不能获取当前组件实例对象。

class Contacts extends React.Component { 
 constructor(props) {
 super(props);
 }
 handleClick() {
 console.log(this); // null
 }
 render() {
 return (
 <div onClick={this.handleClick}></div>
 );
 }

当然，React.Component有三种手动绑定方法：可以在构造函数中完成绑定，也可以在调用时使用method.bind(this)来完成绑定，还可以使用arrow function来绑定。拿上例的handleClick函数来说，其绑定可以有：

 constructor(props) {
 super(props);
 this.handleClick = this.handleClick.bind(this); //构造函数中绑定
 }

  <div onClick={this.handleClick.bind(this)}></div> //使用bind来绑定

   <div onClick={()=>this.handleClick()}></div> //使用arrow function来绑定

组件属性类型propTypes及其默认props属性defaultProps配置不同

React.createClass在创建组件时，有关组件props的属性类型及组件默认的属性会作为组件实例的属性来配置，其中defaultProps是使用getDefaultProps的方法来获取默认组件属性的

const TodoItem = React.createClass({
 propTypes: { // as an object
 name: React.PropTypes.string
 },
 getDefaultProps(){ // return a object
 return {
 name: '' 
 }
 }
 render(){
 return <div></div>
 }
})

React.Component在创建组件时配置这两个对应信息时，他们是作为组件类的属性，不是组件实例的属性，也就是所谓的类的静态属性来配置的。对应上面配置如下：

class TodoItem extends React.Component {
 static propTypes = {//类的静态属性
 name: React.PropTypes.string
 };
 static defaultProps = {//类的静态属性
 name: ''
 };
 ...
}

组件初始状态state的配置不同

React.createClass创建的组件，其状态state是通过getInitialState方法来配置组件相关的状态；

React.Component创建的组件，其状态state是在constructor中像初始化组件属性一样声明的。

const TodoItem = React.createClass({
 // return an object
 getInitialState(){ 
 return {
 isEditing: false
 }
 }
 render(){
 return <div></div>
 }
})

class TodoItem extends React.Component{
 constructor(props){
 super(props);
 this.state = { // define this.state in constructor
 isEditing: false
 } 
 }
 render(){
 return <div></div>
 }
}

Mixins的支持不同

Mixins(混入)是面向对象编程OOP的一种实现，其作用是为了复用共有的代码，将共有的代码通过抽取为一个对象，然后通过Mixins进该对象来达到代码复用。

React.createClass在创建组件时可以使用mixins属性，以数组的形式来混合类的集合。

var SomeMixin = { 
 doSomething() {
 }
};
const Contacts = React.createClass({ 
 mixins: [SomeMixin],
 handleClick() {
 this.doSomething(); // use mixin
 },
 render() {
 return (
 <div onClick={this.handleClick}></div>
 );
 }
});

但是遗憾的是React.Component这种形式并不支持Mixins，至今React团队还没有给出一个该形式下的官方解决方案；但是React开发者社区提供一个全新的方式来取代Mixins,那就是Higher-Order Components。

如何选择哪种方式创建组件

由于React团队已经声明React.createClass最终会被React.Component的类形式所取代。但是在找到Mixins替代方案之前是不会废弃掉React.createClass形式。所以：

能用React.Component创建的组件的就尽量不用React.createClass形式创建组件。

除此之外，创建组件的形式选择还应该根据下面来决定：

1、只要有可能，尽量使用无状态组件创建形式。

2、否则（如需要state、生命周期方法、ref等），使用`React.Component`这种es6形式创建组件

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# react  # 创建组件  # 组件  # React创建组件的的方式汇总  # React如何创建组件  # 深入理解React中es6创建组件this的方法  # React创建组件的三种方式及其区别是什么  # 绑定  # 有可能  # 不需要  # 复用  # 三种  # 来实现  # 方法来  # 有三种  # 的是  # 都是  # 这是  # 无法访问  # 几个  # 是在  # 都有  # 还没有  # 会有  # 也会  # 还可以  # 也就 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel如何处理JSON字段_Eloquent原生JSON字段类型操作教程  Laravel如何配置Horizon来管理队列？（安装和使用）  Edge浏览器怎么启用睡眠标签页_节省电脑内存占用优化技巧  Laravel怎么使用Blade模板引擎_Laravel模板继承与Component组件复用【手册】  javascript中数组（Array)对象和字符串（String)对象的常用方法总结  如何用5美元大硬盘VPS安全高效搭建个人网站？  深圳网站制作培训,深圳哪些招聘网站比较好？  jimdo怎样用html5做选项卡_jimdo选项卡html5实现与切换效果【指南】  JavaScript Ajax实现异步通信  如何在宝塔面板中修改默认建站目录？  高配服务器限时抢购：企业级配置与回收服务一站式优惠方案  IOS倒计时设置UIButton标题title的抖动问题  如何用免费手机建站系统零基础打造专业网站？  *服务器网站为何频现安全漏洞？  Laravel模型事件有哪些_Laravel Model Event生命周期详解  ChatGPT常用指令模板大全 新手快速上手的万能Prompt合集  Win11怎么更改系统语言为中文_Windows11安装语言包并设为显示语言  香港服务器租用费用高吗？如何避免常见误区？  谷歌Google入口永久地址_Google搜索引擎官网首页永久入口  Laravel storage目录权限问题_Laravel文件写入权限设置  微信小程序 require机制详解及实例代码  如何快速建站并高效导出源代码？  如何快速搭建高效服务器建站系统？  Linux系统运维自动化项目教程_Ansible批量管理实战  Laravel Sail是什么_基于Docker的Laravel本地开发环境Sail入门  制作网站软件推荐手机版,如何制作属于自己的手机网站app应用？  LinuxCD持续部署教程_自动发布与回滚机制  香港服务器选型指南：免备案配置与高效建站方案解析  laravel怎么在请求结束后执行任务（Terminable Middleware）_laravel Terminable Middleware请求结束任务执行方法  利用 Google AI 进行 YouTube 视频 SEO 描述优化  Laravel队列由Redis驱动怎么配置_Laravel Redis队列使用教程  详解vue.js组件化开发实践  在线制作视频的网站有哪些,电脑如何制作视频短片？  Laravel如何升级到最新版本？（升级指南和步骤）  Python进程池调度策略_任务分发说明【指导】  Laravel如何处理跨站请求伪造（CSRF）保护_Laravel表单安全机制与令牌校验  魔毅自助建站系统：模板定制与SEO优化一键生成指南  php中::能调用final静态方法吗_final修饰静态方法调用规则【解答】  高防服务器：AI智能防御DDoS攻击与数据安全保障  微信小程序 闭包写法详细介绍  Laravel如何正确地在控制器和模型之间分配逻辑_Laravel代码职责分离与架构建议  Laravel如何实现本地化和多语言支持_Laravel多语言配置与翻译文件管理  Laravel的契約(Contracts)是什么_深入理解Laravel Contracts与依赖倒置  iOS验证手机号的正则表达式  Laravel怎么设置路由分组Prefix_Laravel多级路由嵌套与命名空间隔离【步骤】  Android滚轮选择时间控件使用详解  深入理解Android中的xmlns:tools属性  Laravel怎么实现软删除SoftDeletes_Laravel模型回收站功能与数据恢复【步骤】  JavaScript如何实现倒计时_时间函数如何精确控制  免费制作统计图的网站有哪些,如何看待现如今年轻人买房难的情况？