使用ES6語法重構(gòu)React代碼詳解
使用ES6語法重構(gòu)React組件
在Airbnb React/JSX Style Guide中，推薦使用ES6語法來編寫react組件。下面總結(jié)一下使用ES6 class語法創(chuàng)建組件和以前使用React.createClass方法來創(chuàng)建組件的不同。
創(chuàng)建組件
ES6 class創(chuàng)建的組件語法更加簡明，也更符合javascript。內(nèi)部的方法不需要使用function關(guān)鍵字。
React.createClass
import React from 'react';
const MyComponent = React.createClass({
render: function() {
return (
<div>以前的方式創(chuàng)建的組件</div>
);
}
});
export default MyComponent;
React.Component(ES6)
import React,{ Component } from 'react';
class MyComponent extends Component {
render() {
return (
<div>ES6方式創(chuàng)建的組件</div>
);
}
}
export default MyComponent;
props propTypes and getDefaultProps
1.使用React.Component創(chuàng)建組件，需要通過在constructor中調(diào)用super()將props傳遞給React.Component。另外react 0.13之后props必須是不可變的。
2.由于是用ES6 class語法創(chuàng)建組件，其內(nèi)部只允許定義方法，而不能定義屬性，class的屬性只能定義在class之外。所以propTypes要寫在組件外部。
3.對于之前的getDefaultProps方法，由于props不可變，所以現(xiàn)在被定義為一個屬性，和propTypes一樣，要定義在class外部。
React.createClass
import React from 'react';
const MyComponent = React.createClass({
propTypes: {
nameProp: React.PropTypes.string
},
getDefaultProps() {
return {
nameProp: ''
};
},
render: function() {
return (
<div>以前的方式創(chuàng)建的組件</div>
);
}
});
export default MyComponent;
React.Component(ES6)
import React,{ Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>ES6方式創(chuàng)建的組件</div>
);
}
}
MyComponent.propTypes = {
nameProp: React.PropTypes.string
};
MyComponent.defaultProps = {
nameProp: ''
};
export default MyComponent;
State
使用ES6 class語法創(chuàng)建組件，初始化state的工作要在constructor中完成。不需要再調(diào)用getInitialState方法。這種語法更加的符合JavaScript語言習(xí)慣。
React.createClass
import React from 'react';
const MyComponent = React.createClass({
getInitialState: function() {
return { data: [] };
},
render: function() {
return (
<div>以前的方式創(chuàng)建的組件</div>
);
}
});
export default MyComponent;
React.Component(ES6)
import React,{ Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = { data: [] };
}
render() {
return (
<div>ES6方式創(chuàng)建的組件</div>
);
}
}
export default MyComponent;
this
使用ES6 class語法創(chuàng)建組件， class中的方法不會自動將this綁定到實例中。必須使用 .bind(this)或者 箭頭函數(shù) ＝>來進(jìn)行手動綁定。
React.createClass
import React from 'react';
const MyComponent = React.createClass({
handleClick: function() {
console.log(this);
},
render: function() {
return (
<div onClick={this.handleClick}>以前的方式創(chuàng)建的組件</div>
);
}
});
export default MyComponent;
React.Component(ES6)
import React,{ Component } from 'react';
class MyComponent extends Component {
handleClick() {
console.log(this);
}
render() {
return (
<div onClick={this.handleClick.bind(this)}>ES6方式創(chuàng)建的組件</div>
);
}
}
export default MyComponent;
也可以將綁定方法寫到constructor中：
import React,{ Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log(this);
}
render() {
return (
<div onClick={this.handleClick}>ES6方式創(chuàng)建的組件</div>
);
}
}
export default MyComponent;
或者使用箭頭函數(shù) => ：
import React,{ Component } from 'react';
class MyComponent extends Component {
handleClick = () => {
console.log(this);
}
render() {
return (
<div onClick={this.handleClick}>ES6方式創(chuàng)建的組件</div>
);
}
}
export default MyComponent;
Mixins
使用ES6語法來創(chuàng)建組件是不支持React mixins的，如果一定要使用React mixins就只能使用React.createClass方法來創(chuàng)建組件了。
import React,{ Component } from 'react';
var SetIntervalMixin = {
doSomething: function() {
console.log('do somethis...');
},
};
const Contacts = React.createClass({
mixins: [SetIntervalMixin],
handleClick() {
this.doSomething(); //使用mixin
},
render() {
return (
<div onClick={this.handleClick}></div>
);
}
});
export default Contacts;
總結(jié)
總的來說使用ES6來創(chuàng)建組件的語法更加簡潔，這種語法避免了過多的React樣板代碼，而更多的使用純javascript語法，更符合javascript語法習(xí)慣。React官方并沒有強制性要求使用哪種語法，根據(jù)需要合理的選擇即可。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
React中使用Redux Toolkit狀態(tài)管理的示例詳解
在現(xiàn)代 React 應(yīng)用程序中,狀態(tài)管理是一個至關(guān)重要的部分,使用 Redux Toolkit 可以簡化 Redux 的配置和管理,本文將通過三個文件的示例,詳細(xì)講解如何使用 Redux Toolkit 創(chuàng)建和管理一個簡單的計數(shù)器狀態(tài),需要的朋友可以參考下2024-11-11
React使用有限狀態(tài)機(jī)的實現(xiàn)示例
本文主要介紹了React使用有限狀態(tài)機(jī)的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
近兩年前端技術(shù)的發(fā)展如火如荼,大量的前端項目都在使用或轉(zhuǎn)向 Vue 和 React 的陣營,由前端渲染頁面的單頁應(yīng)用占比也越來越高,這篇文章主要給大家介紹了關(guān)于React全局狀態(tài)管理的三種底層機(jī)制,需要的朋友可以參考下2021-09-09
Immutable 可以給 React 應(yīng)用帶來數(shù)十倍的提升，也有人說 Immutable 的引入是近期 JavaScript 中偉大的發(fā)明，因為同期 React 太火，它的光芒被掩蓋了。這篇文章主要介紹了Immutable及 React 中的實踐,需要的朋友可以參考下2018-03-03
這篇文章主要介紹了在react中使用tailwind的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
使用Electron構(gòu)建React+Webpack桌面應(yīng)用的方法
本篇文章主要介紹了使用Electron構(gòu)建React+Webpack桌面應(yīng)用的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
React超詳細(xì)分析useState與useReducer源碼
我正在處理的組件是表單的時間輸入。表單相對復(fù)雜，并且是動態(tài)生成的，根據(jù)嵌套在其他數(shù)據(jù)中的數(shù)據(jù)顯示不同的字段。我正在用useReducer管理表單的狀態(tài)，到目前為止效果很好2022-11-11
本文主要介紹了React 中合成事件的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-02-02
這篇文章主要介紹了vue3中獲取ref元素的幾種方式總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
react-native-fs實現(xiàn)文件下載、文本存儲的示例代碼
本篇文章主要介紹了react-native-fs實現(xiàn)文件下載、文本存儲的示例代碼，具有一定的參考價值，有興趣的可以了解下2017-09-09