使用es6语法与原本es5语法几个有区别的地方

1.React.creatClass与React.Component

 var Component = React.createClass({
render() {
return (
<div></div>
);
}
});
 class Component extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div></div>
);
}
}

2.propType和defaultProps

 var Component = React.createClass({
propTypes: {
name: React.PropTypes.string
},
getDefaultProps() {
return { };
},
render() {
return (
<div></div>
);
}
});
 class Component extends React.Component {

   /* static propTypes = { // as static property
title: React.PropTypes.string //需要babel转码 };*/ constructor(props) {
super(props);
} render() {
return (
<h1>{this.props.title}</h1>
);
}
} //静态属性,注意这两个属性都是加到类本身的属性而不是类的实例的属性
Component.propTypes = {
title : React.PropTypes.string.isRequired //被要求是字符串类型,其他类型报错
}; Component.defaultProps = {
title : 'hello world'
};

3.状态区别

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

4.this区别

 var Components = React.createClass({
handleClick() {
console.log(this); // React Component instance
},
render() {
return (
<div onClick={this.handleClick}></div>//会切换到正确的this上下文
);
}
});
 class Components extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);//需要手动处理一下this
}
handleClick() {
console.log(this); // React Component instance
}
render() {
return (
<div onClick={this.handleClick}></div>
);
}
}

5.ReactDOM.findDOMNode

 class Component extends React.Component {
componentDidMount() {
let child = ReactDOM.findDOMNode(this.child);  //如果ref绑定在组件中则需要调用ReactDOM.findDOMNode()方法来拿取DOM节点
let title = this.title;  //如果ref绑定在虚拟DOM中,则可以直接拿到DOM节点
}
render() {
return(
<div>
<ChildComponent ref={(div) => {this.child = div;}} /> //官方文档中建议用回调函数的形式来写ref属性
<h1 ref={(h1) => {this.title = h1;}}>...</h1>
</div>
);
}
}

新版react踩坑总结的更多相关文章

  1. 【React踩坑记一】React项目中禁用浏览器双击选中文字的功能

    常规项目,我们只需要给标签加一个onselectstart事件,return false就可以 例: <div onselectstart="return false;" & ...

  2. 【React踩坑记五】React项目中引入并使用react-ace代码编辑插件(自定义列表提示)

    最近有一个引入sql编辑器插件的需求,要求代码高亮显示,代码智能提示,以及支持自定义代码提示列表等功能.中途在自定义代码提示列表中由于没有相关demo,所以踩了一些坑,遂将其整理如下,以便日后查看. ...

  3. 航遇项目react踩坑

    1.iconfont应用: a.正常用法如下 <span className='iconfont' > iconfont的代码,例如: </span> b.react不能动态 ...

  4. React 踩坑记录

    1.React-router error: super expression must either be null or a function 原因:引入babel后写ES6风格的代码: class ...

  5. 【React踩坑记四】React项目中引入并使用js-xlsx上传插件(结合antdesign的上传组件)

    最近有一个前端上传并解析excel/csv表格数据的需求. 于是在github上找到一个14K star的前端解析插件 github传送门 官方也有,奈何实在太过于浅薄.于是做了以下整理,避免道友们少 ...

  6. 【React踩坑记三】React项目报错Can't perform a React state update on an unmounted component

    意思为:我们不能在组件销毁后设置state,防止出现内存泄漏的情况 分析出现问题的原因: 我这里在组件加载完成的钩子函数里调用了一个EventBus的异步方法,如果监听到异步方法,则会更新state中 ...

  7. 【React踩坑记二】react项目实现JS路由跳转

    这里使用的是4.31版本的react-router-dom "react-router-dom": "^4.3.1", 直接使用以下代码即可实现路由跳转 thi ...

  8. 【React踩坑记六】create-react-app创建的react项目通过iP地址访问(实现局域网内访问)

    同项目组的小伙伴想用自己的电脑访问我电脑上开发阶段的create-react-app创建的react项目. 试过了了各种内网穿透工具ngrok以及localtunnel等. 奈何打开效率实在太过于龟速 ...

  9. React踩坑笔记 —— React

    Webpack提供了自己的导入方式require.include,但同时也支持commonjs规范或AMD规范的require语法,而Node.js使用的就是common.js,ES6的语法Impor ...

随机推荐

  1. SQL2008 清除日志

    USE [master] GO ALTER DATABASE BizTest SET RECOVERY SIMPLE WITH NO_WAIT GO ALTER DATABASE BizTest SE ...

  2. Linux基础之常用命令(1)

    一 linux命令的格式 1.命令  [选项]  [参数] ls  list    显示目录下内容 ①  命令名称:ls 命令英文原意:list 命令所在路径:/bin/ls 执行权限:所有用户 功能 ...

  3. [转]windows 短文件名/短路径名规则

    How Windows Generates 8.3 File Names from Long File Names Windows generates short file names from lo ...

  4. eclipse提高效率 MAC

    1添加代码提示,在java contentaasist里面加所有字母   2行注释,  块注释mac里是command ctrl加\,鼠标行注释shift+\   3.快速添加注释doc comman ...

  5. ASPNET_MVC学习中的疑问

    1.在mvc..net4.5.Entity Framewor都提供了多种验证规则.  请问,其中不需要提交到服务器验证的验证,是否是在客户端就完成的,还是说像之前的aspnet一样,都得提交到服务器验 ...

  6. Calendar获取星期

    Calendar的使用举个小栗子: //通过当前时间获取本周周一时间 Date date = new Date(); Calendar calendar = new GregorianCalendar ...

  7. java简单的二分法排序

    二分法排序的思路:数据元素要按顺序排列,对于给定值 x,从序列的中间位置开始比较,如果当前位置值等于 x,则查找成功:若 x 小于当前位置值,则在数列的前半段中查找:若 x 大于当前位置值则在数列的后 ...

  8. echarts学习网站

    echarts : http://echarts.baidu.com/echarts2/doc/example.html 相关脚本学习网站:http://www.jb51.net/html/list/ ...

  9. ARToolKit for Unity环境搭建(初步搭建成功)

    最近一段时间才开始学习使用Unity3d,AR的学习使用中,先后使用了metaio SDK.vuforia SDK,但由于这两个都属于收费的,今天开始尝试使用ARToolKit.先将ARToolKit ...

  10. 常用linux维护命令

    cat /etc/issue  查看linux版本信息