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 相关文章推荐
身份证号码前六位所代表的省,市,区, 以及地区编码下载
Apr 12 Javascript
JS分割字符串并放入数组的函数
Jul 04 Javascript
js禁止小键盘输入数字功能代码
Aug 01 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
JavaScript html5 canvas绘制时钟效果(二)
Mar 27 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
Jun 07 Javascript
Javascript+CSS3实现进度条效果
Oct 28 Javascript
详解前后端分离之VueJS前端
May 24 Javascript
原来JS还可以这样拆箱转换详解
Feb 01 Javascript
VUE前后端学习tab写法实例
Aug 06 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 Javascript
react国际化react-intl的使用
May 06 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
PHP的password_hash()使用实例
2014/03/17 PHP
PHP+mysql实现的三级联动菜单功能示例
2019/02/15 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
JavaScript 模拟用户单击事件
2009/12/31 Javascript
jQuery版仿Path菜单效果
2011/12/15 Javascript
js变换显示图片的实例
2013/04/16 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
js仿微博实现统计字符和本地存储功能
2015/12/22 Javascript
Vuejs实现带样式的单文件组件新方法
2017/05/02 Javascript
详解从新建vue项目到引入组件Element的方法
2017/08/29 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
简述vue状态管理模式之vuex
2018/08/29 Javascript
express express-session的使用小结
2018/12/12 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
2019/06/10 Javascript
[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[04:00]黄浦江畔,再会英雄——完美世界DOTA2 TI9应援视频
2019/07/31 DOTA
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
Python实现过滤单个Android程序日志脚本分享
2015/01/16 Python
Python远程桌面协议RDPY安装使用介绍
2015/04/15 Python
在Python中使用cookielib和urllib2配合PyQuery抓取网页信息
2015/04/25 Python
用python实现刷点击率的示例代码
2019/02/21 Python
Python+Pyqt实现简单GUI电子时钟
2021/02/22 Python
浅析matlab中imadjust函数
2020/02/27 Python
苏格兰在线威士忌商店:The Whisky Barrel
2019/05/07 全球购物
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
怎样客观的做好自我评价
2013/12/28 职场文书
大学生饮食连锁店创业计划书
2014/01/17 职场文书
会计学专业学生的求职信范文
2014/01/27 职场文书
会议欢迎词范文
2015/01/27 职场文书
小学生光盘行动倡议书
2015/04/28 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python
Ajax实现三级联动效果
2021/10/05 Javascript
详解MySQL的主键查询为什么这么快
2022/04/03 MySQL