es6在react中的應(yīng)用代碼解析
更新時(shí)間：2017年11月08日 09:25:56 投稿：mrr
這篇文章主要介紹了es6在react中的應(yīng)用代碼解析,非常不錯，具有參考借鑒價(jià)值，需要的朋友可以參考下
不論是React還是React-native，facebook官方都推薦使用ES6的語法，沒在項(xiàng)目中使用過的話，突然轉(zhuǎn)換過來會遇到一些問題，如果還沒有時(shí)間系統(tǒng)的學(xué)習(xí)下ES6那么注意一些常見的寫法暫時(shí)也就夠用的，這會給我們的開發(fā)帶來很大的便捷，你會體驗(yàn)到ES6語法的無比簡潔。下面給大家介紹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ā)最常見的問題就是父組件要傳給子組件的屬性較多時(shí)比較麻煩
class MyComponentextends React.Component{
//假設(shè)MyComponent已經(jīng)有了name和age屬性
render(){
return (
<SubComponent name={this.props.name} age={this.props.age}/>
)
}
}
使用擴(kuò)展操作符可以變得很簡單
class MyComponentextends React.Component{
//假設(shè)MyComponent已經(jīng)有了name和age屬性
render(){
return (
<SubComponent {...this.props}/>
)
}
}
上述方式是將父組件的所有屬性都傳遞下去，如果這其中有些屬性我不需要傳遞呢？也很簡單
class MyComponentextends React.Component{
//假設(shè)MyComponent有很多屬性，而name屬性不需要傳遞給子組件
var {name,...MyProps}=this.props;
render(){
return (
<SubComponent {...Myprops}/>
)
}
}
上述方法最常用的場景就是父組件的 class 屬性需要被單獨(dú)提取出來作為某個(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ò)展屬性會非常有用
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)用代碼解析，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
React hooks如何清除定時(shí)器并驗(yàn)證效果
在React中,通過自定義Hook useTimeHook實(shí)現(xiàn)定時(shí)器的啟動與清除,在App組件中使用Clock組件展示當(dāng)前時(shí)間,利用useEffect鉤子在組件掛載時(shí)啟動定時(shí)器,同時(shí)確保組件卸載時(shí)清除定時(shí)器,避免內(nèi)存泄露,這種方式簡化了狀態(tài)管理和副作用的處理2024-10-10
本文主要介紹了React Router6.x路由表封裝的兩種寫法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
在react中對less實(shí)現(xiàn)scoped配置方式
這篇文章主要介紹了在react中對less實(shí)現(xiàn)scoped配置方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
React是一個(gè)狀態(tài)機(jī)主要體現(xiàn)在state上，通過與用戶交易實(shí)現(xiàn)不同的狀態(tài)，state是組件的私有屬性，是用來初始化的，本文重點(diǎn)給大家介紹react中的state的簡寫方式，感興趣的朋友一起看看吧2021-08-08
評分插件在購物的應(yīng)用中經(jīng)?？梢钥吹玫?，但是用著別人的總是沒有自己寫的順手，本文就使用React實(shí)現(xiàn)星星評分組件，感興趣的可以了解一下2021-06-06
React實(shí)現(xiàn)組件之間狀態(tài)共享的幾種方法
在開發(fā)現(xiàn)代Web應(yīng)用時(shí),管理組件之間的狀態(tài)共享是一個(gè)重要的課題,特別是在使用React這個(gè)流行的前端庫時(shí),如何有效地在不同組件之間傳遞狀態(tài),確保應(yīng)用的響應(yīng)性和可維護(hù)性,是我們需要掌握的關(guān)鍵技能,在本文中,我們將探討幾種有效的狀態(tài)共享策略,需要的朋友可以參考下2025-02-02
React修改數(shù)組對象的注意事項(xiàng)及說明
這篇文章主要介紹了React修改數(shù)組對象的注意事項(xiàng)及說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教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版本的路由和嵌套路由寫法詳解，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
在大型Web應(yīng)用中，一個(gè)常見的設(shè)計(jì)需求是讓某些組件具有吸頂效果，這意味著當(dāng)頁面向下滾動時(shí)，該組件會保持在屏幕頂部，在本文中，我們將介紹如何在React項(xiàng)目中實(shí)現(xiàn)吸頂效果。我們將首先討論使用原生JavaScript領(lǐng)域的方法來實(shí)現(xiàn)，然后將這些方法與React結(jié)合起來2023-06-06