es6在react中的應(yīng)用代碼解析
更新時(shí)間：2017年11月08日 09:25:56 投稿：mrr
這篇文章主要介紹了es6在react中的應(yīng)用代碼解析,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
不論是React還是React-native，facebook官方都推薦使用ES6的語(yǔ)法，沒(méi)在項(xiàng)目中使用過(guò)的話，突然轉(zhuǎn)換過(guò)來(lái)會(huì)遇到一些問(wèn)題，如果還沒(méi)有時(shí)間系統(tǒng)的學(xué)習(xí)下ES6那么注意一些常見(jiàn)的寫法暫時(shí)也就夠用的，這會(huì)給我們的開發(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 開發(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)屬性在類外初始化
class MyComponentextends React.Component{}
MyComponent.defaultProps={
name:"SunnyChuan",
age:22
};
MyComponent.propTypes={
name:React.PropTypes.string.isRequired,
age:React.PropTypes.number.isRequired
};
es7 支持直接在類中使用變量表達(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)文章
React hooks如何清除定時(shí)器并驗(yàn)證效果
在React中,通過(guò)自定義Hook useTimeHook實(shí)現(xiàn)定時(shí)器的啟動(dòng)與清除,在App組件中使用Clock組件展示當(dāng)前時(shí)間,利用useEffect鉤子在組件掛載時(shí)啟動(dòng)定時(shí)器,同時(shí)確保組件卸載時(shí)清除定時(shí)器,避免內(nèi)存泄露,這種方式簡(jiǎn)化了狀態(tài)管理和副作用的處理2024-10-10
本文主要介紹了React Router6.x路由表封裝的兩種寫法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
在react中對(duì)less實(shí)現(xiàn)scoped配置方式
這篇文章主要介紹了在react中對(duì)less實(shí)現(xiàn)scoped配置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
React是一個(gè)狀態(tài)機(jī)主要體現(xiàn)在state上，通過(guò)與用戶交易實(shí)現(xiàn)不同的狀態(tài)，state是組件的私有屬性，是用來(lái)初始化的，本文重點(diǎn)給大家介紹react中的state的簡(jiǎn)寫方式，感興趣的朋友一起看看吧2021-08-08
React星星評(píng)分組件的實(shí)現(xiàn)
評(píng)分插件在購(gòu)物的應(yīng)用中經(jīng)常可以看得到，但是用著別人的總是沒(méi)有自己寫的順手，本文就使用React實(shí)現(xiàn)星星評(píng)分組件，感興趣的可以了解一下2021-06-06
React實(shí)現(xiàn)組件之間狀態(tài)共享的幾種方法
在開發(fā)現(xiàn)代Web應(yīng)用時(shí),管理組件之間的狀態(tài)共享是一個(gè)重要的課題,特別是在使用React這個(gè)流行的前端庫(kù)時(shí),如何有效地在不同組件之間傳遞狀態(tài),確保應(yīng)用的響應(yīng)性和可維護(hù)性,是我們需要掌握的關(guān)鍵技能,在本文中,我們將探討幾種有效的狀態(tài)共享策略,需要的朋友可以參考下2025-02-02
React修改數(shù)組對(duì)象的注意事項(xiàng)及說(shuō)明
這篇文章主要介紹了React修改數(shù)組對(duì)象的注意事項(xiàng)及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
詳解React?ISR如何實(shí)現(xiàn)Demo
這篇文章主要為大家介紹了React?ISR如何實(shí)現(xiàn)Demo詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
react-router-domV6版本的路由和嵌套路由寫法詳解
本文主要介紹了react-router-domV6版本的路由和嵌套路由寫法詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
在大型Web應(yīng)用中，一個(gè)常見(jiàn)的設(shè)計(jì)需求是讓某些組件具有吸頂效果，這意味著當(dāng)頁(yè)面向下滾動(dòng)時(shí)，該組件會(huì)保持在屏幕頂部，在本文中，我們將介紹如何在React項(xiàng)目中實(shí)現(xiàn)吸頂效果。我們將首先討論使用原生JavaScript領(lǐng)域的方法來(lái)實(shí)現(xiàn)，然后將這些方法與React結(jié)合起來(lái)2023-06-06