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 (
   <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中的应用代码解析，希望对大家有所帮助