小編給大家分享一下如何創(chuàng)建React Component，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)建站是一家從事企業(yè)網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、行業(yè)門戶網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)制作的專業(yè)網(wǎng)站設(shè)計(jì)公司，擁有經(jīng)驗(yàn)豐富的網(wǎng)站建設(shè)工程師和網(wǎng)頁(yè)設(shè)計(jì)人員，具備各種規(guī)模與類型網(wǎng)站建設(shè)的實(shí)力，在網(wǎng)站建設(shè)領(lǐng)域樹(shù)立了自己獨(dú)特的設(shè)計(jì)風(fēng)格。自公司成立以來(lái)曾獨(dú)立設(shè)計(jì)制作的站點(diǎn)千余家。

幾種方法

1.createClass

如果你還沒(méi)有使用ES6語(yǔ)法，那么定義組件，只能使用React.createClass這個(gè)helper來(lái)創(chuàng)建組件，下面是一段示例：

var React = require("react");
var Greeting = React.createClass({
propTypes: {
name: React.PropTypes.string //屬性校驗(yàn)
},
getDefaultProps: function() {
return {
name: 'Mary' //默認(rèn)屬性值
};
},
getInitialState: function() {
return {count: this.props.initialCount}; //初始化state
},
handleClick: function() {
//用戶點(diǎn)擊事件的處理函數(shù)
},
render: function() {
return <h2>Hello, {this.props.name}</h2>;
}
});
module.exports = Greeting;

這段代碼，包含了組件的幾個(gè)關(guān)鍵組成部分，這種方式下，組件的props、state等都是以對(duì)象屬性的方式組合在一起，其中默認(rèn)屬props和初始state都是返回對(duì)象的函數(shù)，propTypes則是個(gè)對(duì)象。這里還有一個(gè)值得注意的事情是，在createClass中，React對(duì)屬性中的所有函數(shù)都進(jìn)行了this綁定，也就是如上面的hanleClick其實(shí)相當(dāng)于handleClick.bind(this) 。

2.component

因?yàn)镋S6對(duì)類和繼承有語(yǔ)法級(jí)別的支持，所以用ES6創(chuàng)建組件的方式更加優(yōu)雅，下面是示例：

import React from 'react';
class Greeting extends React.Component {
constructor(props) {
super(props);
this.state = {count: props.initialCount};
this.handleClick = this.handleClick.bind(this);
}
//static defaultProps = {
// name: 'Mary' //定義defaultprops的另一種方式
//}
//static propTypes = {
//name: React.PropTypes.string
//}
handleClick() {
//點(diǎn)擊事件的處理函數(shù)
}
render() {
return <h2>Hello, {this.props.name}</h2>;
}
}
Greeting.propTypes = {
name: React.PropTypes.string
};
Greeting.defaultProps = {
name: 'Mary'
};
export default Greating;

可以看到Greeting繼承自React.component,在構(gòu)造函數(shù)中，通過(guò)super()來(lái)調(diào)用父類的構(gòu)造函數(shù)，同時(shí)我們看到組件的state是通過(guò)在構(gòu)造函數(shù)中對(duì)this.state進(jìn)行賦值實(shí)現(xiàn)，而組件的props是在類Greeting上創(chuàng)建的屬性，如果你對(duì)類的屬性和對(duì)象的屬性的區(qū)別有所了解的話，大概能理解為什么會(huì)這么做。

對(duì)于組件來(lái)說(shuō)，組件的props是父組件通過(guò)調(diào)用子組件向子組件傳遞的，子組件內(nèi)部不應(yīng)該對(duì)props進(jìn)行修改，它更像是所有子組件實(shí)例共享的狀態(tài)，不會(huì)因?yàn)樽咏M件內(nèi)部操作而改變，因此將props定義為類Greeting的屬性更為合理，而在面向?qū)ο蟮恼Z(yǔ)法中類的屬性通常被稱作靜態(tài)(static)屬性，這也是為什么props還可以像上面注釋掉的方式來(lái)定義。

對(duì)于Greeting類的一個(gè)實(shí)例對(duì)象的state，它是組件對(duì)象內(nèi)部維持的狀態(tài)，通過(guò)用戶操作會(huì)修改這些狀態(tài)，每個(gè)實(shí)例的state也可能不同，彼此間不互相影響，因此通過(guò)this.state來(lái)設(shè)置。

用這種方式創(chuàng)建組件時(shí)，React并沒(méi)有對(duì)內(nèi)部的函數(shù)，進(jìn)行this綁定，所以如果你想讓函數(shù)在回調(diào)中保持正確的this，就要手動(dòng)對(duì)需要的函數(shù)進(jìn)行this綁定，如上面的handleClick，在構(gòu)造函數(shù)中對(duì)this 進(jìn)行了綁定。

3.PureComponet

我們知道，當(dāng)組件的props或者state發(fā)生變化的時(shí)候：React會(huì)對(duì)組件當(dāng)前的Props和State分別與nextProps和nextState進(jìn)行比較，當(dāng)發(fā)現(xiàn)變化時(shí)，就會(huì)對(duì)當(dāng)前組件以及子組件進(jìn)行重新渲染，否則就不渲染。有時(shí)候?yàn)榱吮苊饨M件進(jìn)行不必要的重新渲染，我們通過(guò)定義shouldComponentUpdate來(lái)優(yōu)化性能。例如如下代碼：

class CounterButton extends React.Component {
constructor(props) {
super(props);
this.state = {count: 1};
}
shouldComponentUpdate(nextProps, nextState) {
if (this.props.color !== nextProps.color) {
return true;
}
if (this.state.count !== nextState.count) {
return true;
}
return false;
}
render() {
return (
<button
color={this.props.color}
onClick={() => this.setState(state => ({count: state.count + 1}))}>
Count: {this.state.count}
</button>
);
}
}

shouldComponentUpdate通過(guò)判斷props.color和state.count是否發(fā)生變化來(lái)決定需不需要重新渲染組件，當(dāng)然有時(shí)候這種簡(jiǎn)單的判斷，顯得有些多余和樣板化，于是React就提供了PureComponent來(lái)自動(dòng)幫我們做這件事，這樣就不需要手動(dòng)來(lái)寫(xiě)shouldComponentUpdate了：

class CounterButton extends React.PureComponent {
constructor(props) {
super(props);
this.state = {count: 1};
}
render() {
return (
<button
color={this.props.color}
onClick={() => this.setState(state => ({count: state.count + 1}))}>
Count: {this.state.count}
</button>
);
}
}

大多數(shù)情況下， 我們使用PureComponent能夠簡(jiǎn)化我們的代碼，并且提高性能，但是PureComponent的自動(dòng)為我們添加的shouldComponentUpate函數(shù)，只是對(duì)props和state進(jìn)行淺比較(shadow comparison)，當(dāng)props或者state本身是嵌套對(duì)象或數(shù)組等時(shí)，淺比較并不能得到預(yù)期的結(jié)果，這會(huì)導(dǎo)致實(shí)際的props和state發(fā)生了變化，但組件卻沒(méi)有更新的問(wèn)題。

例如下面代碼有一個(gè)ListOfWords組件來(lái)將單詞數(shù)組拼接成逗號(hào)分隔的句子，它有一個(gè)父組件WordAdder讓你點(diǎn)擊按鈕為單詞數(shù)組添加單詞，但他并不能正常工作：

class ListOfWords extends React.PureComponent {
render() {
return <div>{this.props.words.join(',')}</div>;
}
}
class WordAdder extends React.Component {
constructor(props) {
super(props);
this.state = {
words: ['marklar']
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
// 這個(gè)地方導(dǎo)致了bug
const words = this.state.words;
words.push('marklar');
this.setState({words: words});
}
render() {
return (
<div>
<button onClick={this.handleClick} />
<ListOfWords words={this.state.words} />
</div>
);
}
}

這種情況下，PureComponent只會(huì)對(duì)this.props.words進(jìn)行一次淺比較，雖然數(shù)組里面新增了元素，但是this.props.words與nextProps.words指向的仍是同一個(gè)數(shù)組，因此this.props.words !== nextProps.words 返回的便是flase，從而導(dǎo)致ListOfWords組件沒(méi)有重新渲染,筆者之前就因?yàn)閷?duì)此不太了解，而隨意使用PureComponent，導(dǎo)致state發(fā)生變化，而視圖就是不更新，調(diào)了好久找不到原因~。

最簡(jiǎn)單避免上述情況的方式，就是避免使用可變對(duì)象作為props和state，取而代之的是每次返回一個(gè)全新的對(duì)象,如下通過(guò)concat來(lái)返回新的數(shù)組：

handleClick() {
this.setState(prevState => ({
words: prevState.words.concat(['marklar'])
}));
}

你可以考慮使用Immutable.js來(lái)創(chuàng)建不可變對(duì)象，通過(guò)它來(lái)簡(jiǎn)化對(duì)象比較，提高性能。

這里還要提到的一點(diǎn)是雖然這里雖然使用了Pure這個(gè)詞，但是PureComponent并不是純的，因?yàn)閷?duì)于純的函數(shù)或組件應(yīng)該是沒(méi)有內(nèi)部狀態(tài)。

4.Stateless Functional Component
上面我們提到的創(chuàng)建組件的方式，都是用來(lái)創(chuàng)建包含狀態(tài)和用戶交互的復(fù)雜組件，當(dāng)組件本身只是用來(lái)展示，所有數(shù)據(jù)都是通過(guò)props傳入的時(shí)候，我們便可以使用Stateless Functional Component來(lái)快速創(chuàng)建組件。例如下面代碼所示:

import React from 'react';
const Button = ({
day,
increment
}) => {
return (
<div>
<button onClick={increment}>Today is {day}</button>
</div>
)
}
Button.propTypes = {
day: PropTypes.string.isRequired,
increment: PropTypes.func.isRequired,
}

這種組件，沒(méi)有自身的狀態(tài)，相同的props輸入，必然會(huì)獲得完全相同的組件展示。因?yàn)椴恍枰P(guān)心組件的一些生命周期函數(shù)和渲染的鉤子，所以不用繼承自Component顯得更簡(jiǎn)潔。

對(duì)比

createClass vs Component

對(duì)于React.createClass 和 extends React.Component本質(zhì)上都是用來(lái)創(chuàng)建組件，他們之間并沒(méi)有絕對(duì)的好壞之分，只不過(guò)一個(gè)是ES5的語(yǔ)法，一個(gè)是ES6的語(yǔ)法支持，只不過(guò)createClass支持定義PureRenderMixin,這種寫(xiě)法官方已經(jīng)不再推薦，而是建議使用PureComponent。

pureComponent vs Component

通過(guò)上面對(duì)PureComponent和Component的介紹，你應(yīng)該已經(jīng)了解了二者的區(qū)別:PureComponent已經(jīng)定義好了shouldUpdateComponent而Component需要顯示定義。

Component vs Stateless Functional component

Component包含內(nèi)部state，而Stateless Functional Component所有數(shù)據(jù)都來(lái)自props，沒(méi)有內(nèi)部state;

1.Component 包含的一些生命周期函數(shù)，Stateless Functional Component都沒(méi)有，因?yàn)镾tateless Functional

2.component沒(méi)有shouldComponentUpdate,所以也無(wú)法控制組件的渲染，也即是說(shuō)只要是收到新的props，Stateless Functional Component就會(huì)重新渲染。

3.Stateless Functional Component 不支持Refs

選哪個(gè)？

這里僅列出一些參考:

1.createClass， 除非你確實(shí)對(duì)ES6的語(yǔ)法一竅不通，不然的話就不要再使用這種方式定義組件。

2.Stateless Functional Component, 對(duì)于不需要內(nèi)部狀態(tài)，且用不到生命周期函數(shù)的組件，我們可以使用這種方式定義組件，比如展示性的列表組件，可以將列表項(xiàng)定義為Stateless Functional Component。

3.PureComponent/Component，對(duì)于擁有內(nèi)部state，使用生命周期的函數(shù)的組件，我們可以使用二者之一，但是大部分情況下，我更推薦使用PureComponent，因?yàn)樗峁┝烁玫男阅?，同時(shí)強(qiáng)制你使用不可變的對(duì)象，保持良好的編程習(xí)慣。

以上是“如何創(chuàng)建React Component”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞名稱：如何創(chuàng)建ReactComponent
網(wǎng)頁(yè)路徑：http://sd-ha.com/article14/gcjede.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、做網(wǎng)站、服務(wù)器托管、商城網(wǎng)站、小程序開(kāi)發(fā)、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)