不論是React還是React-native，facebook官方都推薦使用ES6的語法，沒在項目中使用過的話，突然轉(zhuǎn)換過來會遇到一些問題，如果還沒有時間系統(tǒng)的學習下ES6那么注意一些常見的寫法暫時也就夠用的，這會給我們的開發(fā)帶來很大的便捷，你會體驗到ES6語法的無比簡潔。下面給大家介紹es6在react中的應用，具體內(nèi)容如下所示：
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的實現(xiàn)
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;三、從服務端獲取數(shù)據(jù)
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 開發(fā)最常見的問題就是父組件要傳給子組件的屬性較多時比較麻煩
class MyComponentextends React.Component{//假設MyComponent已經(jīng)有了name和age屬性 render(){ return ( <SubComponent name={this.props.name} age={this.props.age}/> ) }}使用擴展操作符可以變得很簡單
class MyComponentextends React.Component{//假設MyComponent已經(jīng)有了name和age屬性 render(){ return ( <SubComponent {...this.props}/> ) }}上述方式是將父組件的所有屬性都傳遞下去，如果這其中有些屬性我不需要傳遞呢？也很簡單
class MyComponentextends React.Component{//假設MyComponent有很多屬性，而name屬性不需要傳遞給子組件 var {name,...MyProps}=this.props; render(){ return ( <SubComponent {...Myprops}/> ) }}上述方法最常用的場景就是父組件的 class 屬性需要被單獨提取出來作為某個元素的 class ，而其他屬性需要傳遞給子組件
六、創(chuàng)建組件
import React,{Component} from "react";class MyComponentextends Component{//組件內(nèi)部代碼}七、State/Props/PropTypes
es6 允許將 props 和 propTypes 當作靜態(tài)屬性在類外初始化
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 和前兩個不同，它不是靜態(tài)的
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中的應用代碼解析，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VeVb武林網(wǎng)網(wǎng)站的支持！
新聞熱點
疑難解答
