摘要:用這種方式創建組件時,并沒有對內部的函數,進行綁定,所以如果你想讓函數在回調中保持正確的,就要手動對需要的函數進行綁定,如上面的,在構造函數中對進行了綁定。
當我們談起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() { returnHello, {this.props.name}
; } }); 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() { returnHello, {this.props.name}
; } } 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 ( ); } }
shouldComponentUpdate通過判斷props.color和state.count是否發生變化來決定需不需要重新渲染組件,當然有時候這種簡單的判斷,顯得有些多余和樣板化,于是React就提供了PureComponent來自動幫我們做這件事,這樣就不需要手動來寫shouldComponentUpdate了:
class CounterButton extends React.PureComponent { constructor(props) { super(props); this.state = {count: 1}; } render() { return ( ); } }
大多數情況下, 我們使用PureComponent能夠簡化我們的代碼,并且提高性能,但是PureComponent的自動為我們添加的shouldComponentUpate函數,只是對props和state進行淺比較(shadow comparison),當props或者state本身是嵌套對象或數組等時,淺比較并不能得到預期的結果,這會導致實際的props和state發生了變化,但組件卻沒有更新的問題,例如下面代碼有一個ListOfWords組件來將單詞數組拼接成逗號分隔的句子,它有一個父組件WordAdder讓你點擊按鈕為單詞數組添加單詞,但他并不能正常工作:
class ListOfWords extends React.PureComponent { render() { return{this.props.words.join(",")}; } } 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 (); } }
這種情況下,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并不是純的,因為對于純的函數或組件應該是沒有內部狀態,對于stateless component更符合純的定義,不了解純函數的同學,可以參見這篇文章。
上面我們提到的創建組件的方式,都是用來創建包含狀態和用戶交互的復雜組件,當組件本身只是用來展示,所有數據都是通過props傳入的時候,我們便可以使用Stateless Functional Component來快速創建組件。例如下面代碼所示:
import React from "react"; const Button = ({ day, increment }) => { return () } 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 componentComponent包含內部state,而Stateless Functional Component所有數據都來自props,沒有內部state;
Component 包含的一些生命周期函數,Stateless Functional Component都沒有,因為Stateless Functional component沒有shouldComponentUpdate,所以也無法控制組件的渲染,也即是說只要是收到新的props,Stateless Functional Component就會重新渲染。
Stateless Functional Component 不支持Refs
選哪個?這里僅列出一些參考:
createClass, 除非你確實對ES6的語法一竅不通,不然的話就不要再使用這種方式定義組件。
Stateless Functional Component, 對于不需要內部狀態,且用不到生命周期函數的組件,我們可以使用這種方式定義組件,比如展示性的列表組件,可以將列表項定義為Stateless Functional Component。
PureComponent/Component,對于擁有內部state,使用生命周期的函數的組件,我們可以使用二者之一,但是大部分情況下,我更推薦使用PureComponent,因為它提供了更好的性能,同時強制你使用不可變的對象,保持良好的編程習慣。
參考文章optimizing-performance.html#shouldcomponentupdate-in-action
pureComponent介紹
react-functional-stateless-component-purecomponent-component-what-are-the-dif
4 different kinds of React component styles
react-without-es6
react-create-class-versus-component
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/81607.html
摘要:密碼備份文件我們來看其測試運行結果密碼備份文件這樣做的好處之一就是,我們可以在這個方法中增加一些判斷語句,起到數據安全的作用。 使用內部類的原因 學習總得知其所以然,前面的一篇文章中我有提到過關于java內部類的幾種用法以及一些示例,但是不明白內部類具體可以做什么,顯然學習起來很渺茫,今天的文章簡單說一說使用內部類的幾個原因,為了可讀性更好,示例都極大的簡化了,希望能給初學者一些幫助 ...
摘要:問題是處理完了,卻也引發了自己的一些思考處理的異步操作,都有一些什么方法呢一回調函數傳說中的就是來自回調函數。而回調函數也是最基礎最常用的處理異步操作的辦法。 引言 js的異步操作,已經是一個老生常談的話題,關于這個話題的文章隨便google一下都可以看到一大堆。那么為什么我還要寫這篇東西呢?在最近的工作中,為了編寫一套相對比較復雜的插件,需要處理各種各樣的異步操作。但是為了體積和兼容...
摘要:還記得剛開始學習的時候,內存管理前端掘金作為一門高級語言,并不像低級語言那樣擁有對內存的完全掌控。第三方庫的行代碼內實現一個前端掘金前言本文會教你如何在行代碼內,不依賴任何第三方的庫,用純實現一個。 (譯) 如何使用 JavaScript 構建響應式引擎 —— Part 1:可觀察的對象 - 掘金原文地址:How to build a reactive engine in JavaSc...
摘要:還記得剛開始學習的時候,內存管理前端掘金作為一門高級語言,并不像低級語言那樣擁有對內存的完全掌控。第三方庫的行代碼內實現一個前端掘金前言本文會教你如何在行代碼內,不依賴任何第三方的庫,用純實現一個。 (譯) 如何使用 JavaScript 構建響應式引擎 —— Part 1:可觀察的對象 - 掘金原文地址:How to build a reactive engine in JavaSc...
摘要:下面,我就從基本對象說起,聊一聊不可變數據和的一切。可變和共享是萬惡之源不可變數據其實是函數式編程相關的重要概念。相對的,函數式編程中認為可變性是萬惡之源。針對于此,我推薦一款已經大名鼎鼎的類庫來處理不可變數據。 作為前端開發者,你會感受到JS中對象(Object)這個概念的強大。我們說JS中一切皆對象。最核心的特性,例如從String,到數組,再到瀏覽器的APIs,對象這個概念無處不...
閱讀 1399·2021-09-02 09:53
閱讀 2667·2021-07-29 13:50
閱讀 1715·2019-08-30 11:07
閱讀 1571·2019-08-30 11:00
閱讀 1450·2019-08-29 14:00
閱讀 1844·2019-08-29 12:52
閱讀 2560·2019-08-29 11:11
閱讀 3415·2019-08-26 12:23