国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

簡談創建React Component的幾種方式

來源:懂視網 責編:小采 時間:2020-11-27 21:55:12
文檔

簡談創建React Component的幾種方式

簡談創建React Component的幾種方式:前言 當我們談起React的時候,多半會將注意力集中在組件之上,思考如何將頁面劃分成一個個組件,以及如何編寫可復用的組件。但對于接觸React不久,還沒有真正用它做一個完整項目的人來說,理解如何創建一個組件也并不那么簡單。 在最開始的時候我以為創建組件
推薦度:
導讀簡談創建React Component的幾種方式:前言 當我們談起React的時候,多半會將注意力集中在組件之上,思考如何將頁面劃分成一個個組件,以及如何編寫可復用的組件。但對于接觸React不久,還沒有真正用它做一個完整項目的人來說,理解如何創建一個組件也并不那么簡單。 在最開始的時候我以為創建組件

前言

當我們談起React的時候,多半會將注意力集中在組件之上,思考如何將頁面劃分成一個個組件,以及如何編寫可復用的組件。但對于接觸React不久,還沒有真正用它做一個完整項目的人來說,理解如何創建一個組件也并不那么簡單。

在最開始的時候我以為創建組件只需要調用createClass這個api就可以了;但學習了ES6的語法后,又知道了可以利用繼承,通過extends React.component來創建組件;后來在閱讀別人代碼的時候又發現了PureComponent以及完全沒有繼承,僅僅通過返回JSX語句的方式創建組件的方式。

下面這篇文章,就將逐一介紹這幾種創建組件的方法,分析其特點,以及如何選擇使用哪一種方式創建組件。

幾種方法

1.createClass

如果你還沒有使用ES6語法,那么定義組件,只能使用React.createClass這個helper來創建組件,下面是一段示例:

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

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

2.component

因為ES6對類和繼承有語法級別的支持,所以用ES6創建組件的方式更加優雅,下面是示例:

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() {
//點擊事件的處理函數
}
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
Greeting.propTypes = {
name: React.PropTypes.string
};
Greeting.defaultProps = {
name: 'Mary'
};
export default Greating;

可以看到Greeting繼承自React.component,在構造函數中,通過super()來調用父類的構造函數,同時我們看到組件的state是通過在構造函數中對this.state進行賦值實現,而組件的props是在類Greeting上創建的屬性,如果你對類的屬性和對象的屬性的區別有所了解的話,大概能理解為什么會這么做。

對于組件來說,組件的props是父組件通過調用子組件向子組件傳遞的,子組件內部不應該對props進行修改,它更像是所有子組件實例共享的狀態,不會因為子組件內部操作而改變,因此將props定義為類Greeting的屬性更為合理,而在面向對象的語法中類的屬性通常被稱作靜態(static)屬性,這也是為什么props還可以像上面注釋掉的方式來定義。

對于Greeting類的一個實例對象的state,它是組件對象內部維持的狀態,通過用戶操作會修改這些狀態,每個實例的state也可能不同,彼此間不互相影響,因此通過this.state來設置。

用這種方式創建組件時,React并沒有對內部的函數,進行this綁定,所以如果你想讓函數在回調中保持正確的this,就要手動對需要的函數進行this綁定,如上面的handleClick,在構造函數中對this 進行了綁定。

3.PureComponet

我們知道,當組件的props或者state發生變化的時候:React會對組件當前的Props和State分別與nextProps和nextState進行比較,當發現變化時,就會對當前組件以及子組件進行重新渲染,否則就不渲染。有時候為了避免組件進行不必要的重新渲染,我們通過定義shouldComponentUpdate來優化性能。例如如下代碼:

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通過判斷props.color和state.count是否發生變化來決定需不需要重新渲染組件,當然有時候這種簡單的判斷,顯得有些多余和樣板化,于是React就提供了PureComponent來自動幫我們做這件事,這樣就不需要手動來寫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>
);
}
}

大多數情況下, 我們使用PureComponent能夠簡化我們的代碼,并且提高性能,但是PureComponent的自動為我們添加的shouldComponentUpate函數,只是對props和state進行淺比較(shadow comparison),當props或者state本身是嵌套對象或數組等時,淺比較并不能得到預期的結果,這會導致實際的props和state發生了變化,但組件卻沒有更新的問題。

例如下面代碼有一個ListOfWords組件來將單詞數組拼接成逗號分隔的句子,它有一個父組件WordAdder讓你點擊按鈕為單詞數組添加單詞,但他并不能正常工作:

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() {
// 這個地方導致了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只會對this.props.words進行一次淺比較,雖然數組里面新增了元素,但是this.props.words與nextProps.words指向的仍是同一個數組,因此this.props.words !== nextProps.words 返回的便是flase,從而導致ListOfWords組件沒有重新渲染,筆者之前就因為對此不太了解,而隨意使用PureComponent,導致state發生變化,而視圖就是不更新,調了好久找不到原因~。

最簡單避免上述情況的方式,就是避免使用可變對象作為props和state,取而代之的是每次返回一個全新的對象,如下通過concat來返回新的數組:

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

你可以考慮使用Immutable.js來創建不可變對象,通過它來簡化對象比較,提高性能。

這里還要提到的一點是雖然這里雖然使用了Pure這個詞,但是PureComponent并不是純的,因為對于純的函數或組件應該是沒有內部狀態。

4.Stateless Functional Component
上面我們提到的創建組件的方式,都是用來創建包含狀態和用戶交互的復雜組件,當組件本身只是用來展示,所有數據都是通過props傳入的時候,我們便可以使用Stateless Functional Component來快速創建組件。例如下面代碼所示:

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,
}

這種組件,沒有自身的狀態,相同的props輸入,必然會獲得完全相同的組件展示。因為不需要關心組件的一些生命周期函數和渲染的鉤子,所以不用繼承自Component顯得更簡潔。

對比

createClass vs Component

對于React.createClass 和 extends React.Component本質上都是用來創建組件,他們之間并沒有絕對的好壞之分,只不過一個是ES5的語法,一個是ES6的語法支持,只不過createClass支持定義PureRenderMixin,這種寫法官方已經不再推薦,而是建議使用PureComponent。

pureComponent vs Component

通過上面對PureComponent和Component的介紹,你應該已經了解了二者的區別:PureComponent已經定義好了shouldUpdateComponent而Component需要顯示定義。

Component vs Stateless Functional component

Component包含內部state,而Stateless Functional Component所有數據都來自props,沒有內部state;

1.Component 包含的一些生命周期函數,Stateless Functional Component都沒有,因為Stateless Functional

2.component沒有shouldComponentUpdate,所以也無法控制組件的渲染,也即是說只要是收到新的props,Stateless Functional Component就會重新渲染。

3.Stateless Functional Component 不支持Refs

選哪個?

這里僅列出一些參考:

1.createClass, 除非你確實對ES6的語法一竅不通,不然的話就不要再使用這種方式定義組件。

2.Stateless Functional Component, 對于不需要內部狀態,且用不到生命周期函數的組件,我們可以使用這種方式定義組件,比如展示性的列表組件,可以將列表項定義為Stateless Functional Component。

3.PureComponent/Component,對于擁有內部state,使用生命周期的函數的組件,我們可以使用二者之一,但是大部分情況下,我更推薦使用PureComponent,因為它提供了更好的性能,同時強制你使用不可變的對象,保持良好的編程習慣。

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

簡談創建React Component的幾種方式

簡談創建React Component的幾種方式:前言 當我們談起React的時候,多半會將注意力集中在組件之上,思考如何將頁面劃分成一個個組件,以及如何編寫可復用的組件。但對于接觸React不久,還沒有真正用它做一個完整項目的人來說,理解如何創建一個組件也并不那么簡單。 在最開始的時候我以為創建組件
推薦度:
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 国产日韩欧美精品 | 国产精品视频免费 | 欧美日韩激情 | 日韩在线观看视频网站 | 国产在线观看免费 | 一本大道香蕉视频在线观看 | 久久久精品国产 | 一区二区三区91 | 91国内精品久久久久影院优播 | 国产一区二区三区 韩国女主播 | 国产青草 | 最新国产网站 | 97一级毛片全部免费播放 | 亚洲伦| 久久久国产这里有的是精品 | 免费一级毛片 | 欧美一区二区三区免费高 | 伊人伊成久久人综合网777 | 欧美试看 | 好看的电影网站亚洲一区 | 欧美极品尤物在线播放一级 | 国产精品 视频一区 二区三区 | 亚洲一二三区视频 | 成人在线视频一区 | 久久亚洲欧美综合激情一区 | 欧美亚洲另类在线观看 | 一区二区三区四区免费视频 | 国产欧美日韩三级 | 在线观看视频日韩 | 国产人成久久久精品 | 亚洲欧洲日产国码一级毛片 | 91精品国产乱码久久久久久 | 最近韩国日本免费观看 | 精品一区二区三区在线播放 | 国产麻豆流白浆在线观看 | 亚洲第一视频网 | 欧美另类第一页 | 欧美激情伦妇在线观看 | 欧美日韩国产va另类试看 | 国产在线视欧美亚综合 | 精品在线一区二区 |