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 相关文章推荐
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
Web Uploader文件上传插件使用详解
May 10 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
Jun 14 Javascript
jquery根据一个值来选中select下的option实例代码
Aug 29 Javascript
jQuery实现标签页效果实战(4)
Feb 08 Javascript
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 Javascript
React Native 通告消息竖向轮播组件的封装
Aug 25 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
Mar 02 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
Sep 21 Javascript
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
JavaScript实现简易计算器小功能
Oct 22 Javascript
JavaScript原始值与包装对象的详细介绍
May 11 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
解析strtr函数的效率问题
2013/06/26 PHP
析构函数与php的垃圾回收机制详解
2013/10/28 PHP
php通过ajax实现双击table修改内容
2014/04/28 PHP
php浏览历史记录的方法
2015/03/10 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
PHP session会话操作技巧小结
2016/09/27 PHP
php使用crypt()函数进行加密
2017/06/08 PHP
phpMyAdmin通过密码漏洞留后门文件
2018/11/20 PHP
Sample script that deletes a SQL Server database
2007/06/16 Javascript
js png图片(有含有透明)在IE6中为什么不透明了
2010/02/07 Javascript
客户端限制只能上传jpg格式图片的js代码
2010/12/09 Javascript
js将当前时间格式转换成时间搓(自写)
2013/09/26 Javascript
jquery动态更换设置背景图的方法
2014/03/25 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
深入理解JQuery中的事件与动画
2016/05/18 Javascript
DOM中事件处理概览与原理的全面解析
2016/08/16 Javascript
AngularJS实现ajax请求的方法
2016/11/22 Javascript
关于js中的鼠标事件总结
2017/07/11 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
2018/05/17 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
详解vue中的computed的this指向问题
2018/12/05 Javascript
JS拖拽排序插件Sortable.js用法实例分析
2019/02/20 Javascript
Vue源码探究之虚拟节点的实现
2019/04/17 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
Python随机生成数据后插入到PostgreSQL
2016/07/28 Python
django基础之数据库操作方法(详解)
2017/05/24 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
Python 20行简单实现有道在线翻译的详解
2019/05/15 Python
英国最大的香水商店:The Fragrance Shop
2018/07/06 全球购物
乡镇爱国卫生月活动总结
2014/06/25 职场文书
经费申请报告
2015/05/15 职场文书
运动员入场前导词
2015/07/20 职场文书
2016年秋季运动会通讯稿
2015/11/25 职场文书
mysql优化
2021/04/06 MySQL
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS