React項目使用ES6解決方案及JSX使用示例詳解
不使用 ES6
然而,在純?yōu)g覽器端使用ES6語法時,瀏覽器支持存在差異,這需要特殊處理才能正常運行。 支持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>; } });
綁定
對于使用ES6類關(guān)鍵字創(chuàng)建的React組件,組件中的方法遵循與常規(guī)ES6類相同的語法規(guī)則。這意味著這些方法不會自動將其綁定到此組件實例。需要顯式調(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)綁定至實例,因此我們才可以用它來處理點擊事件 return ( <button onClick={this.handleClick}> Say hello </button> ); } }
這意味著,如果使用ES6類關(guān)鍵字創(chuàng)建組件,則在處理事件回調(diào)時需要編寫更多代碼。但對于大型項目,這可以提高運營效率。 如果你認為上面的編寫方法很乏味,你可以嘗試使用Babel插件類屬性,它仍然處于實驗階段。
class SayHello extends React.Component { constructor(props) { super(props); this.state = {message: 'Hello!'}; } // 警告:這種語法還處于試驗性階段! // 在這里使用箭頭函數(shù)就可以把方法綁定給實例: handleClick = () => { alert(this.state.message); } render() { return ( <button onClick={this.handleClick}> Say hello </button> ); } }
請注意,上述語法仍處于實驗階段,這意味著語法可能隨時發(fā)生變化,最終可能不會包含在框架標(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)注”的問題。為了解決這個問題,當(dāng)使用createReactClass創(chuàng)建React組件時,引入mixin函數(shù)將是一個很好的解決方案。 更常見的用法是組件定期更新。這個函數(shù)可以很容易地用setInterval()實現(xiàn),但需要注意的是,當(dāng)不再需要它時,應(yīng)該清除它以節(jié)省內(nèi)存。React提供了一種生命周期方法,這樣就可以知道何時創(chuàng)建或銷毀了組件。讓我們創(chuàng)建一個簡單的mixin,它使用這些方法來提供一個簡單setInterval()函數(shù),該函數(shù)將在組件被破壞時自動清理。
class Greeting extends React.Component { // ... } Greeting.defaultProps = { name: 'Mary' };
如果一個組件有多個mixin,并且在這些mixin中定義了相同的生命周期方法(例如,當(dāng)一個組件被破壞時,幾個mixin希望進行一些清理),則將調(diào)用這些生命周期方法。當(dāng)使用mixin時,mixin將首先按照定義的順序執(zhí)行,然后調(diào)用組件上的相應(yīng)方法。
JSX如何?
React不強制使用JSX。當(dāng)不想在構(gòu)建環(huán)境中配置JSX編譯時,在React中不使用JSX會更方便。 每個JSX元素都簡單地調(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,通常會創(chuàng)建一個快捷方式:
const e = React.createElement; ReactDOM.render( e('div', null, 'Hello World'), document.getElementById('root') );
如果使用React,createElement的快捷方式幾乎與使用React而不使用JSX一樣方便。
以上就是React項目使用ES6解決方案及JSX使用示例詳解的詳細內(nèi)容,更多關(guān)于React項目ES6 JSX使用的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
React實現(xiàn)一個高度自適應(yīng)的虛擬列表
這篇文章主要介紹了React如何實現(xiàn)一個高度自適應(yīng)的虛擬列表,幫助大家更好的理解和學(xué)習(xí)使用React,感興趣的朋友可以了解下2021-04-04react-native 配置@符號絕對路徑配置和絕對路徑?jīng)]有提示的問題
本文主要介紹了react-native 配置@符號絕對路徑配置和絕對路徑?jīng)]有提示的問題,文中通過圖文示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01React使用Context與router實現(xiàn)權(quán)限路由詳細介紹
這篇文章主要介紹了React使用Context與router實現(xiàn)權(quán)限路由的詳細過程,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-01-01