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 相关文章推荐
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
Apr 10 Javascript
js表格分页实现代码
Sep 18 Javascript
将jQuery应用于login页面的问题及解决
Oct 17 Javascript
js原型继承的两种方法对比介绍
Mar 30 Javascript
php常见的页面跳转方法汇总
Apr 15 Javascript
javascript检测两个数组是否相似
May 19 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
JavaScript中的Object对象学习教程
May 20 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
Aug 01 Javascript
JS button按钮实现submit按钮提交效果
Nov 01 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
Nov 05 Javascript
ES6小技巧之代替lodash
Jun 07 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最常用的2种设计模式工厂模式和单例模式介绍
2012/08/14 PHP
解析PHP中如何将数组变量写入文件
2013/06/06 PHP
解决PHP mysql_query执行超时(Fatal error: Maximum execution time …)
2013/07/03 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
encode脚本和normal脚本混用的问题与解决方法
2007/03/08 Javascript
Javascript注入技巧
2007/06/22 Javascript
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
2009/06/04 Javascript
用Juery网页选项卡实现代码
2011/06/13 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
DOM基础教程之事件对象
2015/01/20 Javascript
JavaScript数据类型检测代码分享
2015/01/26 Javascript
jQuery控制Div拖拽效果完整实例分析
2015/04/15 Javascript
跟我学习javascript的最新标准ES6
2015/11/20 Javascript
JavaScript与HTML的结合方法详解
2015/11/23 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
2016/05/04 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
js仿腾讯QQ的web登陆界面
2016/08/19 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
jQuery中常用动画效果函数知识点整理
2018/08/19 jQuery
react native 获取地理位置的方法示例
2018/08/28 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
jQuery实现日历效果
2020/09/11 jQuery
[33:09]完美世界DOTA2联赛循环赛 Forest vs DM BO2第二场 10.29
2020/10/29 DOTA
python数据结构之链表详解
2017/09/12 Python
django admin 后台实现三级联动的示例代码
2018/06/22 Python
使用Python将字符串转换为格式化的日期时间字符串
2019/09/01 Python
如何将 awk 脚本移植到 Python
2019/12/09 Python
解决Keras自带数据集与预训练model下载太慢问题
2020/06/12 Python
keras 两种训练模型方式详解fit和fit_generator(节省内存)
2020/07/03 Python
open_basedir restriction in effect. 原因与解决方法
2021/03/14 PHP
后备干部培训方案
2014/05/22 职场文书
部队2014年终工作总结
2014/11/27 职场文书
盲山观后感
2015/06/11 职场文书
街道办残联2016年助残日活动总结
2016/04/01 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang