实例详解es6在react中的应用

小云云

发布时间：2017-12-23 10:56:06

1777人浏览过

来源于php中文网

原创

本文主要介绍了es6在react中的应用代码解析,非常不错，具有参考借鉴价值，需要的朋友可以参考下，希望能帮助大家更好理解和掌握es6在react中的应用。

不论是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 (
   
   {
    names.map((name) =>{return 
Hello, {name}!;} )
   }
   
);
}
}
export default RepeatArray;

二、ol与li的实现

import React,{Component} from 'react';
class RepeatLiextends Component{
 render(){
  return (
   
   {
    this.props.children.map((child)=>{return {child}})
   }
   
);
}
}
class RepeatArray extends Component{
constructor() {
super();
}
render(){
return (


hello
    world

   
);
}
}
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(
   
    {this.state.username} ..
    here

  );
 }
}
class RepeatArrayextends Component{
 constructor() {
  super();
 }
 render(){
  return (
   
   
   
);
}
}
export default RepeatArray;

四、初始化STATE

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

五、解构与扩展操作符

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

class AutoloadingPostsGridextends React.Component{
  render() {
    var {
      className,
      ...others, // contains all properties of this.props except for className
    } = this.props;
    return (
      
        
        

    );
  }
}

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

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

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

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

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

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

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

六、创建组件

广研企业网站管理系统中英文双语版

v1.8新增功能简介：一、后台新增生成网站地图和生成Sitemap.xml的功能。二、新增下载中心功能，可在后台上传doc,xls,ppt,rar,pdf文件。三、新增产品缩略图自动缩放功能，图片按比例缩放，解决了图片变形问题。四、新闻、产品详细页新增了上一个、下一个的功能，改善用户体验。五、在线客服新增了阿里巴巴贸易通在线客服。六、可在后台设置分享代码，如百度分享和AddThis等。

下载

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 ;
}
function App2() {
const props = {firstName: 'Ben', lastName: 'Hector'};
 return ;
}

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

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