es6在react中的应用代码解析
2017-11-08 09:25
603 查看
不论是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中的应用代码解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- Scala深入浅出进阶经典 第47讲: Scala多重界定代码实战及其在Spark中的应用源码解析
- Scala中Context Bounds代码实战及其在Spark中的应用源码解析之Scala学习笔记-36
- React Native植入原生Android应用的流程解析
- 48.Scala类型约束代码实战及其在Spark中的应用源码解析
- discuz代码解析(一、初始化应用的过程)
- Scala 深入浅出实战经典 第48讲:Scala类型约束代码实战及其在Spark中的应用源码解析
- 44.Scala中View Bounds代码实战及其在Spark中的应用源码解析
- 49.Scala中Variance代码实战及其在Spark中的应用源码解析
- discuz代码解析(一、初始化应用的过程)
- 第49讲:Scala中Variance代码实战及其在Spark中的应用源码解析学习笔记
- ClassTag 、Manifest、ClassManifest、TypeTag代码实战及其在Spark中的应用源码解析之Scala学习笔记-37
- Scala深入浅出进阶经典 第48讲:Scala类型约束代码实战及其在Spark中的应用源码解析
- React学习(8)—— 高阶应用:不使用ES6、JSX实现React
- 第43讲:Scala中类型变量Bounds代码实战及其在Spark中的应用源码解析
- 5分钟内使用React、Webpack与ES6构建应用
- 五分钟搞懂后缀数组!后缀数组解析以及应用(附详解代码)
- Scala深入浅出进阶经典 第49讲:Scala中Variance代码实战及其在Spark中的应用源码解析
- 王家林亲授《DT大数据梦工厂》大数据实战视频“Scala深入浅出实战经典”视频、音频和PPT下载!第47讲:Scala多重界定代码实战及其在Spark中的应用源码解析
- 47.Scala多重界定代码实战及其在Spark中的应用源码解析
- 在webpack应用的入口代码中,实现react相关组件的热重载(hot reload)