es6在react中的應(yīng)用代碼解析
不論是React還是React-native，facebook官方都推薦使用ES6的語(yǔ)法，沒(méi)在項(xiàng)目中使用過(guò)的話(huà)，突然轉(zhuǎn)換過(guò)來(lái)會(huì)遇到一些問(wèn)題，如果還沒(méi)有時(shí)間系統(tǒng)的學(xué)習(xí)下ES6那么注意一些常見(jiàn)的寫(xiě)法暫時(shí)也就夠用的，這會(huì)給我們的開(kāi)發(fā)帶來(lái)很大的便捷，你會(huì)體驗(yàn)到ES6語(yǔ)法的無(wú)比簡(jiǎn)潔。下面給大家介紹es6在react中的應(yīng)用，具體內(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的實(shí)現(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;
三、從服務(wù)端獲取數(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,
};
}
}
五、解構(gòu)與擴(kuò)展操作符
在給子組件傳遞一批屬性更為方便了。下面的例子把 className 以外的所有屬性傳遞給 div 標(biāo)簽
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 開(kāi)發(fā)最常見(jiàn)的問(wèn)題就是父組件要傳給子組件的屬性較多時(shí)比較麻煩
class MyComponentextends React.Component{
//假設(shè)MyComponent已經(jīng)有了name和age屬性
render(){
return (
<SubComponent name={this.props.name} age={this.props.age}/>
)
}
}
使用擴(kuò)展操作符可以變得很簡(jiǎn)單
class MyComponentextends React.Component{
//假設(shè)MyComponent已經(jīng)有了name和age屬性
render(){
return (
<SubComponent {...this.props}/>
)
}
}
上述方式是將父組件的所有屬性都傳遞下去，如果這其中有些屬性我不需要傳遞呢？也很簡(jiǎn)單
class MyComponentextends React.Component{
//假設(shè)MyComponent有很多屬性，而name屬性不需要傳遞給子組件
var {name,...MyProps}=this.props;
render(){
return (
<SubComponent {...Myprops}/>
)
}
}
上述方法最常用的場(chǎng)景就是父組件的 class 屬性需要被單獨(dú)提取出來(lái)作為某個(gè)元素的 class ，而其他屬性需要傳遞給子組件
六、創(chuàng)建組件
import React,{Component} from "react";
class MyComponentextends Component{
//組件內(nèi)部代碼
}
七、State/Props/PropTypes
es6 允許將 props 和 propTypes 當(dāng)作靜態(tài)屬性在類(lèi)外初始化
class MyComponentextends React.Component{}
MyComponent.defaultProps={
name:"SunnyChuan",
age:22
};
MyComponent.propTypes={
name:React.PropTypes.string.isRequired,
age:React.PropTypes.number.isRequired
};
es7 支持直接在類(lèi)中使用變量表達(dá)式
class MyComponentextends React.Component{
static defaultProps={
name:"SunnyChuan",
age:22
}
static propTypes={
name:React.PropTypes.string.isRequired,
age:React.PropTypes.number.isRequired
}
}
state 和前兩個(gè)不同，它不是靜態(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
}
}
七、當(dāng)你構(gòu)建通用容器時(shí)，擴(kuò)展屬性會(huì)非常有用
function App1(){
return <GreetingfirstName="Ben"lastName="Hector"/>;
}
function App2() {
const props = {firstName: 'Ben', lastName: 'Hector'};
return <Greeting {...props} />;
}
八、使用es6的計(jì)算屬性代替
this.setState({
[name]:value
})
//代替
var partialState = {};
partialState[name] = value;
this.setState(partialState);
總結(jié)
以上所述是小編給大家介紹的es6在react中的應(yīng)用代碼解析，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
詳細(xì)談?wù)凴eact中setState是一個(gè)宏任務(wù)還是微任務(wù)
學(xué)過(guò)react的人都知道,setState在react里是一個(gè)很重要的方法,使用它可以更新我們數(shù)據(jù)的狀態(tài),下面這篇文章主要給大家介紹了關(guān)于React中setState是一個(gè)宏任務(wù)還是微任務(wù)的相關(guān)資料,需要的朋友可以參考下2021-09-09
react國(guó)際化化插件react-i18n-auto使用詳解
這篇文章主要介紹了react國(guó)際化化插件react-i18n-auto使用詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要為大家介紹了React?時(shí)間切片理解分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
在?React?Native?中使用?CSS?Modules的配置方法
有些前端工程師希望也能像開(kāi)發(fā) web 應(yīng)用那樣，使用 CSS Modules 來(lái)開(kāi)發(fā) React Native，本文將介紹如何在 React Native 中使用 CSS Modules，需要的朋友可以參考下2022-08-08
React組件實(shí)例三大核心屬性State props Refs詳解
組件實(shí)例的三大核心屬性是：State、Props、Refs。類(lèi)組件中這三大屬性都存在。函數(shù)式組件中訪(fǎng)問(wèn)不到 this，也就不存在組件實(shí)例這種說(shuō)法，但由于它的特殊性（函數(shù)可以接收參數(shù)），所以存在Props這種屬性2022-12-12
淺談React + Webpack 構(gòu)建打包優(yōu)化
本篇文章主要介紹了淺談React + Webpack 構(gòu)建打包優(yōu)化，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
React 實(shí)現(xiàn)車(chē)牌鍵盤(pán)的示例代碼
這篇文章主要介紹了React 實(shí)現(xiàn)車(chē)牌鍵盤(pán)的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
react學(xué)習(xí)筆記之state以及setState的使用
這篇文章主要介紹了react學(xué)習(xí)筆記之state以及setState的使用,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
React-router?v6在Class組件和非組件代碼中的正確使用
這篇文章主要介紹了React-router?v6在Class組件和非組件代碼中的正確使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
react的滑動(dòng)圖片驗(yàn)證碼組件的示例代碼
這篇文章主要介紹了react的滑動(dòng)圖片驗(yàn)證碼組件的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02