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

}

);

}

}

export default RepeatArray;

二、ol与li的实现

import React,{Component} from 'react';

class RepeatLiextends Component{

render(){

return (

{

this.props.children.map((child)=>{return

}

);

}

}

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 以外的所有属性传递给 div 标签

class AutoloadingPostsGridextends React.Component{

render() {

var {

className,

...othehttp://rs, // contains all properties of this.props except for className

} = this.props;

return (

Load more

);

}

}

使用 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 ，而其他属性需要传递给子组件

六、创建组件

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);

总结

以上所述是给大家介绍的es6在react中的应用代码解析，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。