React组件的三种写法总结


Posted in Javascript onJanuary 12, 2017

React 专注于 view 层,组件化则是 React 的基础,也是其核心理念之一,一个完整的应用将由一个个独立的组件拼装而成。

截至目前 React 已经更新到 v15.4.2,由于 ES6 的普及和不同业务场景的影响,我们会发现目前主要有三种创建 React 组件的写法:1. ES5写法React.createClass,2. ES6写法React.Component,3. 无状态的函数式写法(纯组件-SFC)。

你们最钟爱哪种写法呢?萝卜青菜各有所爱~ 每个团队都有自己的代码规范和开发模式,但书写 React 组件时 都会以提高代码阅读性、更优的组件性能、易于 bug 追踪为原则。下面我们就聊聊这三种写法的区别,以及各自所适用场景的最佳实践。

ES5-写法 React.createClass

React.createClass不用多说,我们最早使用这个方法来构建一个组件“类”,它接受一个对象为参数,对象中必须声明一个render方法,render返回一个组件实例,下面用一个 SwitchButton 组件的例子来看看React.createClass的具体用法:

var React = require('react');
var ReactDOM = require('react-dom');
var SwitchButton = React.createClass({
 getDefaultProp:function() {
 return { open: false }
 },
 getInitialState: function() {
 return { open: this.props.open };
 },
 handleClick: function(event) {
 this.setState({ open: !this.state.open });
 },
 render: function() {
 var open = this.state.open,
  className = open ? 'switch-button open' : 'btn-switch';

 return (
  <label className={className} onClick={this.handleClick.bind(this)}>
  <input type="checkbox" checked={open}/>
  </label>
 );
 }
});
ReactDOM.render(
 <SwitchButton />,
 document.getElementById('app')
);

ES6-写法 React.Component

React 升级到 v0.13 后就支持了 ES6 的class语法,我们可以使用class App extends React.Component{...}的方式创建组件,这也是目前官方推荐创建有状态组件的方式。用 ES6 重写上面 SwitchButton 组件的例子:

import React from 'react'
import { render } from 'react-dom'
class SwitchButton extends React.Component {
 constructor(props) {
 super(props)
 this.state = {
  open: this.props.open
 }
 this.handleClick = this.handleClick.bind(this)
 }
 handleClick(event) {
 this.setState({ open: !this.state.open })
 }
 render() {
 let open = this.state.open,
  className = open ? 'switch-button open' : 'btn-switch'
 return (
  <label className={className} onClick={this.handleClick}>
  <input type="checkbox" checked={open}/>
  </label>
 )
 }
}
SwitchButton.defaultProps = {
 open: false
}
render(
 <SwitchButton />,
 document.getElementById('app')
)

与React.createClass创建组件的不同之处:

import

与这里使用了 ES6 的import语句替代require()方法导入模块,其中import {render}可以直接从模块中导入变量名,这种写法更加简洁直观。

初始化 state

React 使用 ES6 的“类”继承实现时,去掉了getInitialState这个 hook 函数,state的初始化放在构造函数方法constructor中声明。

this 绑定

React.Component创建组件时,事件函数并不会自动绑定this,需要我们手动绑定,不然this将不会指向当前组件的实例对象。以下有三种绑定this的方法:

1. 在constructor中使用bind()进行硬绑定

constructor() {
 this.handleClick = this.handleClick.bind(this);
}

2. 直接在元素上使用bind()绑定

<label className={className} onClick={this.handleClick.bind(this)}>

3. ES6 有个很有用的语法糖:Arrow Function(箭头函数)它可以很方便的使this直接指向class SwitchButton(它的作用等同于大家熟悉的var self = this,但后者会让代码变得混乱,Arrow Function 就很好的解决了这一问题)

<label className={className} onClick={()=>this.handleClick()}>

无状态的函数式写法(纯组件 SFC)

React.createClass和React.Component都可以用来创建有状态的组件,而 无状态组件 - Stateless Component 是 React 在 v0.14 之后推出的。

它的出现 是因为随着应用复杂度不断提升和组件本数量的增加,组件按各自职责被分成不同的类型,于是有一种只负责展示的纯组件出现了,它的特点是不需要管理状态state,数据直接通过props传入,这也符合 React 单向数据流的思想。

对于这种无状态的组件,使用函数式的方式声明,会使得代码的可读性更好,并能大大减少代码量,Arrow Function 则是函数式写法的最佳搭档:

const Todo = (props) => (
 <li
 onClick={props.onClick}
 style={{textDecoration: props.complete ? "line-through" : "none"}}
 >
 {props.text}
 </li>
)

上面定义的 Todo 组件,输入输出数据完全由props决定,而且不会产生任何副作用。对于props为 Object 类型时,我们还可以使用 ES6 的解构赋值:

const Todo = ({ onClick, complete, text, ...props }) => (
 <li
 onClick={onClick}
 style={{textDecoration: complete ? "line-through" : "none"}}
 {...props}
 >
 {props.text}
 </li>
)

无状态组件一般会搭配高阶组件(简称:OHC)一起使用,高阶组件用来托管state,Redux 框架就是通过 store 管理数据源和所有状态,其中所有负责展示的组件都使用无状态函数式的写法。

这种模式被鼓励在大型项目中尽可能以简单的写法 来分割原本庞大的组件,而未来 React 也会面向这种无状态的组件进行一些专门的优化,比如避免无意义的检查或内存分配。所以建议大家尽可能在项目中使用无状态组件。

当然,无状态组件也不是万金油,比如它不支持"ref",原因很简单,因为 React 调用它之前,组件不会被实例化,自然也就没有"ref",(ref和findDOMNode实际上打破了父子组件之间仅通过 props 来传递状态的约定,违背了 React 的原则,需要避免)。

以上三种写法的比较,以及最佳实践

Facebook 官方早就声明 ES6React.Component将取代React.createClass。随着 React 不断发展,React.createClass暴露出一些问题:

  • 相比React.Component可以有选择性的绑定需要的函数,React.createClass会自动绑定函数,这样会导致不必要的性能开销。
  • React.createClass亲生的 mixin,React.Component不再支持,事实上 mixin 不够优雅直观,替代方案是使用更流行的高阶组件-HOC,如果你的项目还离不开 也可以使用 react-mixin

总的来说:无状态函数式写法 优于React.createClass,而React.createClass优于React.Component。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jQuery 学习 几种常用方法
Jun 11 Javascript
JS简单实现自定义右键菜单实例
May 31 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
Jun 14 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
Feb 05 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 Javascript
Vue Element使用icon图标教程详解(第三方)
Feb 07 Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 Javascript
vue生命周期与钩子函数简单示例
Mar 13 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
阿望教你用vue写扫雷小游戏
Jan 20 Javascript
JS一次前端面试经历记录
Mar 19 Javascript
OpenLayers加载缩放控件使用方法详解
Sep 25 Javascript
JQuery异步提交表单与文件上传功能示例
Jan 12 #Javascript
jQuery命名空间与闭包用法示例
Jan 12 #Javascript
jquery实现百叶窗效果
Jan 12 #Javascript
基于JavaScript实现带缩略图的轮播效果
Jan 12 #Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 #Javascript
js仿搜狐视频记录片列表展示效果
May 30 #Javascript
原生js实现商品放大镜效果
Jan 12 #Javascript
You might like
php获取后台Job管理的实现代码
2011/06/10 PHP
基于php常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
ThinkPHP模板输出display用法分析
2014/11/26 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
php DES加密算法实例分析
2019/09/18 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
HR vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
Prototype PeriodicalExecuter对象 学习
2009/07/19 Javascript
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
JS获取各种宽度、高度的简单介绍
2014/12/19 Javascript
Bootstrap 轮播(Carousel)插件
2016/12/26 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
2017/07/31 Javascript
浅谈Angular路由守卫
2017/08/26 Javascript
Vue-component全局注册实例
2018/09/06 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
详解Python编程中包的概念与管理
2015/10/16 Python
python利用微信公众号实现报警功能
2018/06/10 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
python修改FTP服务器上的文件名
2019/09/11 Python
Django 实现Admin自动填充当前用户的示例代码
2019/11/18 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
python爬虫scrapy基本使用超详细教程
2021/02/20 Python
计算机专业学生求职信分享
2013/12/15 职场文书
党员干部承诺书范文
2014/03/25 职场文书
小学雷锋月活动总结
2014/07/03 职场文书
借名购房协议书范本
2014/10/06 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
违反工作规定检讨书范文
2014/12/14 职场文书
2017年寒假少先队活动总结
2016/04/06 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技