React項(xiàng)目使用ES6解決方案及JSX使用示例詳解
不使用 ES6
然而，在純?yōu)g覽器端使用ES6語(yǔ)法時(shí)，瀏覽器支持存在差異，這需要特殊處理才能正常運(yùn)行。 支持ES2015桌面瀏覽器 Chrome：從51版開始，它可以支持ES6 97%的新功能。 Firefox：53版本支持97%的ES6新功能。 Safari：從版本10開始，ES6 99%的新功能都可以得到支持。 IE:Edge 15可以支持96%的ES6新功能。 Edge 14可以支持93%的新ES6功能。（IE7~11基本不支持ES6）
class Greeting extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
var createReactClass = require('create-react-class');
var Greeting = createReactClass({
render: function() {
return <h1>Hello, {this.props.name}</h1>;
}
});
綁定
對(duì)于使用ES6類關(guān)鍵字創(chuàng)建的React組件，組件中的方法遵循與常規(guī)ES6類相同的語(yǔ)法規(guī)則。這意味著這些方法不會(huì)自動(dòng)將其綁定到此組件實(shí)例。需要顯式調(diào)用。在構(gòu)造函數(shù)中綁定（this）：
class SayHello extends React.Component {
constructor(props) {
super(props);
this.state = {message: 'Hello!'};
// 這一行很重要！
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
alert(this.state.message);
}
render() {
// 由于 `this.handleClick` 已經(jīng)綁定至實(shí)例，因此我們才可以用它來(lái)處理點(diǎn)擊事件
return (
<button onClick={this.handleClick}>
Say hello
</button>
);
}
}
這意味著，如果使用ES6類關(guān)鍵字創(chuàng)建組件，則在處理事件回調(diào)時(shí)需要編寫更多代碼。但對(duì)于大型項(xiàng)目，這可以提高運(yùn)營(yíng)效率。 如果你認(rèn)為上面的編寫方法很乏味，你可以嘗試使用Babel插件類屬性，它仍然處于實(shí)驗(yàn)階段。
class SayHello extends React.Component {
constructor(props) {
super(props);
this.state = {message: 'Hello!'};
}
// 警告：這種語(yǔ)法還處于試驗(yàn)性階段！
// 在這里使用箭頭函數(shù)就可以把方法綁定給實(shí)例：
handleClick = () => {
alert(this.state.message);
}
render() {
return (
<button onClick={this.handleClick}>
Say hello
</button>
);
}
}
請(qǐng)注意，上述語(yǔ)法仍處于實(shí)驗(yàn)階段，這意味著語(yǔ)法可能隨時(shí)發(fā)生變化，最終可能不會(huì)包含在框架標(biāo)準(zhǔn)中。 為了安全起見，可以采用以下三種方法： 在構(gòu)造函數(shù)中綁定方法。 使用箭頭函數(shù)，例如onClick={（e）=>this.handleClick（e）}。 繼續(xù)使用createReactClass。
var SetIntervalMixin = {
componentWillMount: function() {
this.intervals = [];
},
setInterval: function() {
this.intervals.push(setInterval.apply(null, arguments));
},
componentWillUnmount: function() {
this.intervals.forEach(clearInterval);
}
};
var createReactClass = require('create-react-class');
var TickTock = createReactClass({
mixins: [SetIntervalMixin], // 使用 mixin
getInitialState: function() {
return {seconds: 0};
},
componentDidMount: function() {
this.setInterval(this.tick, 1000); // 調(diào)用 mixin 上的方法
},
tick: function() {
this.setState({seconds: this.state.seconds + 1});
},
render: function() {
return (
<p>
React has been running for {this.state.seconds} seconds.
</p>
);
}
});
ReactDOM.render(
<TickTock />,
document.getElementById('example')
);
如果完全不同的組件具有相似的功能，這將導(dǎo)致“交叉關(guān)注”的問題。為了解決這個(gè)問題，當(dāng)使用createReactClass創(chuàng)建React組件時(shí)，引入mixin函數(shù)將是一個(gè)很好的解決方案。 更常見的用法是組件定期更新。這個(gè)函數(shù)可以很容易地用setInterval（）實(shí)現(xiàn)，但需要注意的是，當(dāng)不再需要它時(shí)，應(yīng)該清除它以節(jié)省內(nèi)存。React提供了一種生命周期方法，這樣就可以知道何時(shí)創(chuàng)建或銷毀了組件。讓我們創(chuàng)建一個(gè)簡(jiǎn)單的mixin，它使用這些方法來(lái)提供一個(gè)簡(jiǎn)單setInterval（）函數(shù)，該函數(shù)將在組件被破壞時(shí)自動(dòng)清理。
class Greeting extends React.Component {
// ...
}
Greeting.defaultProps = {
name: 'Mary'
};
如果一個(gè)組件有多個(gè)mixin，并且在這些mixin中定義了相同的生命周期方法（例如，當(dāng)一個(gè)組件被破壞時(shí)，幾個(gè)mixin希望進(jìn)行一些清理），則將調(diào)用這些生命周期方法。當(dāng)使用mixin時(shí)，mixin將首先按照定義的順序執(zhí)行，然后調(diào)用組件上的相應(yīng)方法。
JSX如何？
React不強(qiáng)制使用JSX。當(dāng)不想在構(gòu)建環(huán)境中配置JSX編譯時(shí)，在React中不使用JSX會(huì)更方便。 每個(gè)JSX元素都簡(jiǎn)單地調(diào)用createElement的React Syntax sugar（component，props，…children）。因此，使用JSX可以做的任何事情都可以用純JavaScript完成。
class Hello extends React.Component {
render() {
return <div>Hello {this.props.toWhat}</div>;
}
}
ReactDOM.render(
<Hello toWhat="World" />,
document.getElementById('root')
);
如果想了解更多JSX轉(zhuǎn)換為JavaScript的示例，可以嘗試使用在線Babel編譯器。 組件可以是字符串或React.component的子類。它也可以是正常功能。 如果不想鍵入React。createElement，通常會(huì)創(chuàng)建一個(gè)快捷方式：
const e = React.createElement;
ReactDOM.render(
e('div', null, 'Hello World'),
document.getElementById('root')
);
如果使用React，createElement的快捷方式幾乎與使用React而不使用JSX一樣方便。
以上就是React項(xiàng)目使用ES6解決方案及JSX使用示例詳解的詳細(xì)內(nèi)容，更多關(guān)于React項(xiàng)目ES6 JSX使用的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
React實(shí)現(xiàn)一個(gè)高度自適應(yīng)的虛擬列表
這篇文章主要介紹了React如何實(shí)現(xiàn)一個(gè)高度自適應(yīng)的虛擬列表，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下2021-04-04![react-native 配置@符號(hào)絕對(duì)路徑配置和絕對(duì)路徑?jīng)]有提示的問題](http://img.jbzj.com/images/xgimg/bcimg1.png)
react-native 配置@符號(hào)絕對(duì)路徑配置和絕對(duì)路徑?jīng)]有提示的問題
本文主要介紹了react-native 配置@符號(hào)絕對(duì)路徑配置和絕對(duì)路徑?jīng)]有提示的問題,文中通過圖文示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01
這篇文章主要介紹了react+antd動(dòng)態(tài)增刪表單方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
connect()是react-redux中的核心方法之一，它將react組件預(yù)redux中的Store真正連接在一起，這篇文章主要介紹了react-redux的connect詳解,需要的朋友可以參考下2023-01-01
React使用Context與router實(shí)現(xiàn)權(quán)限路由詳細(xì)介紹
這篇文章主要介紹了React使用Context與router實(shí)現(xiàn)權(quán)限路由的詳細(xì)過程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-01-01
這篇文章主要介紹了react中常見hook的使用方式與區(qū)別，幫助大家更好的理解和學(xué)習(xí)使用react，感興趣的朋友可以了解下2021-04-04
React?Flux與Redux設(shè)計(jì)及使用原理
這篇文章主要介紹了React?Flux與Redux設(shè)計(jì)及使用，Redux最主要是用作應(yīng)用狀態(tài)的管理。簡(jiǎn)言之，Redux用一個(gè)單獨(dú)的常量狀態(tài)樹（state對(duì)象）保存這一整個(gè)應(yīng)用的狀態(tài)，這個(gè)對(duì)象不能直接被改變2023-03-03
react-pdf?打造在線簡(jiǎn)歷生成器的示例代碼
本文主要介紹了react-pdf?打造在線簡(jiǎn)歷生成器的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要介紹了react中如何使用局部樣式問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
redux是redux官方react綁定庫(kù)，能夠使react組件從redux store中讀取數(shù)據(jù)，并且向store分發(fā)actions以此來(lái)更新數(shù)據(jù)，這篇文章主要介紹了react-redux的設(shè)置,需要的朋友可以參考下2022-09-09