es6在react中的应用代码解析


Posted in Javascript onNovember 08, 2017

不论是React还是React-native,facebook官方都推荐使用ES6的语法,没在项目中使用过的话,突然转换过来会遇到一些问题,如果还没有时间系统的学习下ES6那么注意一些常见的写法暂时也就够用的,这会给我们的开发带来很大的便捷,你会体验到ES6语法的无比简洁。下面给大家介绍es6在react中的应用,具体内容如下所示:

import React,{Component} from 'react';
class RepeatArrayextends Component{
 constructor() {  super();
 }
 render(){
  const names = ['Alice', 'Emily', 'Kate'];
  return (
   <div>
   {
    names.map((name) =>{return <div>Hello, {name}!</div>;} )
   }
   </div>
);
}
}
export default RepeatArray;

二、ol与li的实现

import React,{Component} from 'react';
class RepeatLiextends Component{
 render(){
  return (
   <ol>
   {
    this.props.children.map((child)=>{return <li>{child}</li>})
   }
   </ol>
);
}
}
class RepeatArray extends Component{
constructor() {
super();
}
render(){
return (
<div>
<RepeatLi>
<span>hello</span>
    <span>world</span>
</RepeatLi>
   </div>
);
}
}
export default RepeatArray;

三、从服务端获取数据

import React,{Component} from 'react';
class UserGistextends Component{
 constructor(){
  super();
  this.state={
   username:'',
   lastGistUrl:''
  }
 }
 componentWillMount(){
  $.get(this.props.source, function(result){
   var lastGist = result[0];
   //if (this.isMounted()) {
    this.setState({
     username: lastGist.owner.login,
     lastGistUrl: lastGist.html_url
    });
   //}
  }.bind(this));
 }
 render(){
  return(
   <div>
    {this.state.username} ..
    <a href={this.state.lastGistUrl} >here</a>
</div>
  );
 }
}
class RepeatArrayextends Component{
 constructor() {
  super();
 }
 render(){
  return (
   <div>
   <UserGist source="https://api.github.com/users/octocat/gists" />
   </div>
);
}
}
export default RepeatArray;

四、初始化STATE

class Videoextends React.Component{
  constructor(props){
    super(props);
    this.state = {
      loopsRemaining: this.props.maxLoops,
    };
  }
}

五、解构与扩展操作符

在给子组件传递一批属性更为方便了。下面的例子把 className 以外的所有属性传递给 div 标签

class AutoloadingPostsGridextends React.Component{
  render() {
    var {
      className,
      ...others, // contains all properties of this.props except for className
    } = this.props;
    return (
      <div className={className}>
        <PostsGrid {...others} />
        <button onClick={this.handleLoadMoreClick}>Load more</button>
</div>
    );
  }
}

使用 react 开发最常见的问题就是父组件要传给子组件的属性较多时比较麻烦

class MyComponentextends React.Component{
//假设MyComponent已经有了name和age属性
 render(){
  return (
   <SubComponent name={this.props.name} age={this.props.age}/>
   )
 }
}

使用扩展操作符可以变得很简单

class MyComponentextends React.Component{
//假设MyComponent已经有了name和age属性
 render(){
  return (
   <SubComponent {...this.props}/>
   )
 }
}

上述方式是将父组件的所有属性都传递下去,如果这其中有些属性我不需要传递呢?也很简单

class MyComponentextends React.Component{
//假设MyComponent有很多属性,而name属性不需要传递给子组件
 var {name,...MyProps}=this.props;
 render(){
  return (
   <SubComponent {...Myprops}/>
   )
 }
}

上述方法最常用的场景就是父组件的 class 属性需要被单独提取出来作为某个元素的 class ,而其他属性需要传递给子组件

六、创建组件

import React,{Component} from "react";
class MyComponentextends Component{
//组件内部代码
}

七、State/Props/PropTypes

es6 允许将 props 和 propTypes 当作静态属性在类外初始化

class MyComponentextends React.Component{}
MyComponent.defaultProps={
 name:"SunnyChuan",
 age:22
};
MyComponent.propTypes={
 name:React.PropTypes.string.isRequired,
 age:React.PropTypes.number.isRequired
};

es7 支持直接在类中使用变量表达式

class MyComponentextends React.Component{
 static defaultProps={
  name:"SunnyChuan",
  age:22
 }
 static propTypes={
  name:React.PropTypes.string.isRequired,
  age:React.PropTypes.number.isRequired
 }
}

state 和前两个不同,它不是静态的

class MyComponentextends React.Component{
 static defaultProps={
  name:"SunnyChuan",
  age:22
 }
 state={
   isMarried:false
 }
 static propTypes={
  name:React.PropTypes.string.isRequired,
  age:React.PropTypes.number.isRequired
 }
}

七、当你构建通用容器时,扩展属性会非常有用

function App1(){
 return <GreetingfirstName="Ben"lastName="Hector"/>;
}
function App2() {
const props = {firstName: 'Ben', lastName: 'Hector'};
 return <Greeting {...props} />;
}

八、使用es6的计算属性代替

this.setState({
  [name]:value
})
//代替
var partialState = {};
partialState[name] = value;
this.setState(partialState);

总结

以上所述是小编给大家介绍的es6在react中的应用代码解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
jquery showModelDialog的使用方法示例详解
Nov 19 Javascript
javascript基本类型详解
Nov 28 Javascript
jquery实现多屏多图焦点图切换特效的方法
May 04 Javascript
JS实现从连接中获取youtube的key实例
Jul 02 Javascript
值得分享的Bootstrap Table使用教程
Nov 23 Javascript
详解在vue-cli项目中安装node-sass
Jun 21 Javascript
使用JavaScript实现链表的数据结构的代码
Aug 02 Javascript
二维码图片生成器QRCode.js简单介绍
Aug 18 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
May 27 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
Apr 15 Javascript
vue实现浏览器全屏展示功能
Nov 27 Javascript
mac中利用NVM管理不同node版本的方法详解
Nov 08 #Javascript
浅谈vue-router2路由参数注意的问题
Nov 08 #Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 #jQuery
javaScript之split与join的区别(详解)
Nov 08 #Javascript
AngularJs 终极购物车(实例讲解)
Nov 08 #Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 #Javascript
vue实现仿淘宝结账页面实例代码
Nov 08 #Javascript
You might like
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
JS 事件绑定函数代码
2010/04/28 Javascript
关于全局变量和局部变量的那些事
2013/01/11 Javascript
JS保存、读取、换行、转Json报错处理方法
2013/06/14 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
开源的javascript项目Kissy介绍
2014/11/28 Javascript
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
PhotoSwipe异步动态加载图片方法
2016/08/25 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
2017/01/13 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
基于Vue中点击组件外关闭组件的实现方法
2018/03/06 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
2018/09/21 Javascript
原生js实现Flappy Bird小游戏
2018/12/24 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
通过jQuery学习js类型判断的技巧
2019/05/27 jQuery
解决vue单页面 回退页面 keeplive 缓存问题
2020/07/22 Javascript
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
python实现360的字符显示界面
2014/02/21 Python
PyQt5实现下载进度条效果
2018/04/19 Python
python一键去抖音视频水印工具
2018/09/14 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
Python for i in range ()用法详解
2020/09/18 Python
用python解压分析jar包实例
2020/01/16 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
基于python 凸包问题的解决
2020/04/16 Python
教师廉洁自律承诺书
2014/05/26 职场文书
大专生找工作自荐书
2014/06/10 职场文书
新文化运动的口号
2014/06/21 职场文书
公司总经理岗位职责范本
2014/08/15 职场文书
大学生军训自我鉴定范文
2014/09/18 职场文书
银行党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
代领报检证委托书范本
2014/10/11 职场文书
2015感人爱情寄语
2015/02/26 职场文书
承诺保证书格式
2015/02/28 职场文书
结婚喜宴迎宾词
2015/08/10 职场文书
go语言map与string的相互转换的实现
2021/04/07 Golang