React學習(5)-React中組件的數據-props

• 2019 年 10 月 8 日
• 筆記

前言

開發一個React應用,更多的是在編寫組件,而React組件最小的單位就是React元素,編寫組件的最大的好處,就是實現程式碼的復用

將一個大的應用按照功能結構等劃分成若干個部分(組件),對每個部分(組件)進行分開管理,與組件相關的東西放在一起,達到高內聚的目的,而不同組件又各自獨立管理達到低耦合的效果。

構建組件,本質上就是在編寫javascript函數,而組件中最重要的是數據,在React中數據分兩種:props和state,當定義一個組件時,它接收任意的形參(即props),並用於返回描述頁面展示內容的React元素

無論props還是state,當他們任何一個發生改變時,都會引發render函數的重新渲染

一個UI組件所渲染的結果,就是通過props和state這兩個屬性在render方法裡面映射生成對應的HTML結構

那麼在寫一個React組件的時候,究竟什麼時候使用state,什麼時候使用props呢?如何的劃分組件的狀態數據?

那麼本節就是你想要知道的

React中的props

當通過函數聲明或者class自定義一個組件時,它會將JSX所接受的屬性(attributes)轉換為一對象傳遞給該定義時的組件

這個接收的對象就是props(property的簡寫),props就是組件定義屬性的集合,它是組件對外的介面,由外部通過JSX屬性傳入設置(也就是從外部傳遞給內部組件的數據)

一個React組件通過定義自己能夠接收的prop,就定義了自己對外提供的公共介面

每個定義的React組件應該都是獨立存在的模組,組件之外的一切都是外部世界(組件),外部世界(組件)就是通過prop來和組件進行對話數據傳遞的

在React中,你可以將prop類似於HTML標籤元素的屬性,不過原生HTML標籤的屬性值都是字元串,即使是內嵌js表達式,也依然是字元串,而在React中,prop的屬性值類型可以任何數據類型(基本數據類型(number,String,null等函數)或者對象)

當然如果是非字元串數據類型,在JSX中,必須要用花括弧{}把prop值給包裹起來

這也是為什麼style有兩層花括弧的原因:最外層代表的是JSX語法,意味著它是一個變數對象,而內層的花括弧{}代表的是一個對象

在函數聲明自定義的組件中,可以通過props獲取組件的屬性

如下所示:自定義一個Button組件,給組件添加各個屬性值,渲染的結果如下所示

import React, { Fragment, Component } from 'react';  import ReactDOM from 'react-dom';    // 函數式組件,定義一個Button組件,首字母大寫  function Button(props) {    console.log(props); // 將會把調用處組件的style屬性給列印出來    const btnStyles = {    width: props.style.width,    height: props.style.height,    background: props.style.background,    color: props.style.color,    border: props.style.border,    outline: props.style.outline,    cursor: props.style.cursor  };  return (    <div>      <button style = { btnStyles }>按鈕</button>    </div>  );  }    const btnStyle = {    width: "100px",    height: "40px",    background: "orange",    color: "#fff",    border: "none",    outline: "none",    cursor: "pointer"  }  const container = document.getElementById('root');    ReactDOM.render(<Button style = { btnStyle } />, container);

類class聲明的組件: 通過Es6中的class聲明,繼承React.Component進行實現

import React, { Fragment, Component } from 'react';  import ReactDOM from 'react-dom';    // 類組件,通過class關鍵字聲明使用  class Button extends Component {    constructor(props){    super(props);    }    render() {    console.log(this.props);    // 這裡利用Es6中的解構賦值    const { width, height, background, color, border, outline,cursor} = this.props.style;    const btnStyles = {      width,  // 等於width:width      height,      background,      color,      border,      outline,      cursor  }  return (  <div>     <button style = { btnStyles }>按鈕</button>  </div>  );  }  }  // 該Button組件按鈕自身擁有的屬性  const btnStyle = {    width: "100px",    height: "40px",    background: "orange",    color: "#fff",    border: "none",    outline: "none",    cursor: "pointer"  }    const container = document.getElementById('root');    ReactDOM.render(<Button style = { btnStyle } />, container);

上述程式碼中分別使用了函數式組件與類聲明的組件,在調用組件時,對組件設置了props值,而在組件內部通過this.props獲取屬性值

從而得出,父組件(外部組件)向子(內)組件傳值是通過設置JSX屬性的方式實現的,而在子組件內部獲取父(外部)組件數據是通過this.props來獲取的,也可以這麼認為,props就是對外提供的數據介面

對於用類class聲明的組件,讀取prop的值,是通過this.props來獲取的

首先用construcor定義了一個構造函數,並且給它接收了一個props形參,然後在constructor構造器函數內調用super(props)

這個是固定的寫法,組件繼承父類的一些方法,如果一個組件需要定義自己的構造函數,那麼就一定要調用super(props),也就是繼承了React.Component構造函數

至於為什麼要調用super(props)方法,因為Es6採用的是先創建父類實例的this,然後在用子類的構造函數修改this

如果沒有constructor構造器函數,調用super(),以及參數props,它是會報錯的

在組件實例被構造之後,該組件的所有成員函數都無法通過this.props訪問到父組件傳遞過來的props值,錯誤如下所示

ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor

關於constructor()構造器函數

這個constructor(props)構造器函數是自動就生成的,如果沒有聲明,React會默認添加一個空的construcor,並且會自動執行,有且只執行一次,可以將它視為鉤子函數(生命周期函數)

這個constructor函數接收props形參數,接收外部組件傳值的集合,只要組件內部要使用prop值,那麼這個props參數是要必傳的,否則的話在當前組件內就無法使用this.props接收外部組件傳來的值

但是無論有沒有constructor函數,render函數,子組件內都可以使用this.props獲取組件外部的數據,它是默認自帶的

constructor(props){     super(props);  }

至於寫不寫構造器函數,如果該自定義的組件不需要初始化state,不用進行方法的綁定(this壞境的設置),只是單純的用於接收外部組件傳來的props數據用作展示,並沒有UI交互渲染動作

那麼就不需要為該React組件實現構造函數

如果是這樣,則更應該把它轉換為函數式(無狀態UI)組件,因為它的效能是最高的

否則的話,那麼就要編寫constructor構造器函數,況且Es6編寫類的方式提供了更多實用的功能,特定的條件下,該用還是要用的

一般而言,在React中,構造函數僅用於下面兩種情況:

• 通過給this.state賦值對象來初始化當前組件內部的state(狀態)
• 在JSX中監聽綁定事件處理函數(this壞境的綁定)

在constructor()函數中不要調用setState()方法,如果組件需要使用內部狀態state,直接在構造函數中為this.state賦初始state值

constructor(props){    super(props);      // 不要在這裡調用this.setState(),更改state狀態數據    this.state = {     // 屬性:屬性值     count: 0    }    //this.方法 = this.方法.bind(this);     this.handleClick = this.handleClick.bind(this)  }

只能在構造函數中直接為this.state賦值,如果在其他地方法需要改變該state的值,應該使用this.setState()方法替代

注意:

如果把函數組件替換成類組件的寫法,在子組件內部接收外部的props值時,需要將props更改成this.props的寫法,反過來也是,類聲明的組件替換成函數式(無狀態)組件時,需要將this.props替換成props

而在用class類定義的組件時,一旦對組件初始化設置完成,該組件的屬性就可以通過this.props獲取得到,而這個this.props是不可更改的

不要輕易更改設置this.props裡面的值,換句話說,組件的props屬性只具備可讀性,不能修改自身的props,這不區分是用函數聲明的組件還是用class聲明的組件,無法直接的更改props值

如下所示:點擊按鈕,想要改變外部傳進去的props值,在程式碼中直接更改props值,是會報錯的如下圖錯誤所示:

import React, { Fragment, Component } from 'react';  import ReactDOM from 'react-dom';    // 類組件  class Button extends Component {    constructor(props){     super(props);      }    render() {    const { width, height, background, color, border, outline,cursor} = this.props.style;    const btnStyles = {      width,      height,      background,      color,      border,      outline,      cursor  }  return (    <div>      <button onClick = { this.handleBtnClick.bind(this) } style = { btnStyles }>{ this.props.btnContent }</button>    </div>  );  }    handleBtnClick(){     // 直接更改props的值,是會報錯的,在React中不允許這麼做     this.props.btnContent = "按鈕B";  }  }    const btnStyle = {    width: "100px",    height: "40px",    background: "orange",    color: "#fff",    border: "none",    outline: "none",    cursor: "pointer"  }  const container = document.getElementById('root');    ReactDOM.render(<Button btnContent ="按鈕A" style = { btnStyle } />, container);

因為在React中,數據流是單向的,不能改變一個組件被渲染時傳進來的props

之所以這麼規定,因為組件的復用性,一個組件可能在各個頁面上進行復用,如果允許被修改的話,這個組件的顯示形態會變得不可預測，當組件出現某些bug的時候,會給開發者帶來困擾,調試將會是噩夢,無法定位,違背組件的設計原則了

但是這並不代表著props的值並不能被修改,有時候,由於業務的需求,我們是需要對props值進行修改的

如果想要修改,那麼可以通過藉助React內置的一個方法setState方法重新渲染的方式,把props傳入組件當中，這樣的話,由props屬性決定這個組件的顯示形態也會得到相應的改變

更改如下所示:

import React, { Fragment, Component } from 'react';  import ReactDOM from 'react-dom';    // 類組件  class Button extends Component {    constructor(props){      super(props);      // state是組件內部的狀態      this.state = {         btnContent: this.props.btnContent      }    }    render() {  const { width, height, background, color, border, outline,cursor} = this.props.style;  const btnStyles = {    width,    height,    background,    color,    border,    outline,    cursor  }  return (     <div>       <button onClick = { this.handleBtnClick.bind(this) } style = { btnStyles }>{ this.state.btnContent }</button>     </div>  );  }    handleBtnClick(){     // this.props.btnContent = "按鈕B";     this.setState({       btnContent: "按鈕B"     });  }  }    const btnStyle = {    width: "100px",    height: "40px",    background: "orange",    color: "#fff",    border: "none",    outline: "none",    cursor: "pointer"  }      const container = document.getElementById('root');    ReactDOM.render(<Button btnContent ="按鈕A" style = { btnStyle } />, container);

關於React中事件監聽this的綁定

this的指向通常與它的執行上下文有關係,一般有以下幾種方式

• 函數的調用方式影響this的取值,如果作為函數調用,在非嚴格模式下,this指向全局window對象,在嚴格模式（use "strict"）下,this指向undefined
• 如果作為方法的調用,this指向調用的對象,誰調用它,this就指向誰
• 作為構造器函數調用,this指向該創建的實例化對象(類實例方法裡面的this都指向這個實例本身)
• 通過call,apply調用,this指向call和apply的第一個參數

在React中,給JSX元素,監聽綁定一個事件時,你需要手動的綁定this,如果你不進行手動bind的綁定,this會是undefined,在Es6中,用class類創建的React組件並不會自動的給組件綁定this到當前的實例對象上

將該組件實例的方法進行this壞境綁定是React常用手段

程式碼如下所示:

import React, { Fragment, Component } from 'react';  import ReactDOM from 'react-dom';    // 類組件  class Button extends Component {    constructor(props){    super(props);      // this壞境的綁定,這是React裡面的一個優化,constructor函數只執行一次    this.handleBtnClick = this.handleBtnClick.bind(this);      this.state = {      btnContent: this.props.btnContent    }    }        render() {     const { width, height, background, color, border, outline,cursor} = this.props.style;     const btnStyles = {         width,         height,         background,         color,         border,         outline,         cursor  }  return (    <div>      <button onClick = { this.handleBtnClick } style = { btnStyles }>{ this.state.btnContent }</button>    </div>  );  }    handleBtnClick(){    // this.props.btnContent = "按鈕B";    this.setState({       btnContent: "按鈕B"    });  }  }    const btnStyle = {    width: "100px",    height: "40px",    background: "orange",    color: "#fff",    border: "none",    outline: "none",    cursor: "pointer"  }      const container = document.getElementById('root');    ReactDOM.render(<Button btnContent ="按鈕A" style = { btnStyle } />, container);

當然如果不用這種手動綁定this的方式,用箭頭函數也是可以的,箭頭函數沒有this的綁定,如下程式碼所示

import React, { Fragment, Component } from 'react';  import ReactDOM from 'react-dom';    // 類組件  class Button extends Component {     constructor(props){     super(props);       // this壞境的綁定,這是React裡面的一個優化,constructor函數只執行一次     // this.handleBtnClick = this.handleBtnClick.bind(this);     this.state = {       btnContent: this.props.btnContent     }    }        render() {  const { width, height, background, color, border, outline,cursor} = this.props.style;  const btnStyles = {    width,    height,    background,    color,    border,    outline,    cursor  }  return (    <div>      <button onClick = { () => { this.handleBtnClick() } } style = { btnStyles }>{ this.state.btnContent }</button>     <!--或者以下寫法-->     <!--<button onClick = { this.handleBtnClick } style = { btnStyles }>{ this.state.btnContent }</button>-->    </div>  );  }    handleBtnClick(){    // this.props.btnContent = "按鈕B";    this.setState({      btnContent: "按鈕B"    });  }  // handleBtnClick = () => {  // this.setState({  // btnContent: "按鈕B"  // });  // }    }        const btnStyle = {    width: "100px",    height: "40px",    background: "orange",    color: "#fff",    border: "none",    outline: "none",    cursor: "pointer"  }      const container = document.getElementById('root');    ReactDOM.render(<Button btnContent ="按鈕A" style = { btnStyle } />, container);

對比兩種實現方式,都是可以的,但是官方推薦使用bind綁定,使用bind不僅可以幫我們把事件監聽方法中的this綁定到當前的組件實例上

bind後面還還可以設置第二個參數,把與組件相關的東西傳給組件的,並在construcor構造器函數中進行初始化綁定,雖然bind的使用會創建一個新的函數,但是它在constructor中只會調用一次

而利用箭頭函數,箭頭函數中沒有this的綁定,從性能上講,它是會重複調用,進行額外的渲染,不如在構造器函數中進行this壞境的初始化手動綁定

在上面說到了prop值既然可以是任意數據類型,正好利用這一特性,子組件接收父組件用this.props可以獲取屬性,那麼這個屬性值可以是個方法,子組件也可以調用父組件的方法,來達到子組件向父組件傳遞數據

如下程式碼所示,最終的效果如下所示

import React, { Fragment, Component } from 'react';  import ReactDOM from 'react-dom';    // 定義一個父組件  class ParentComponent extends Component {    constructor(props){    super(props);      console.log("父組件props",props);    }    childContent(parm) {    alert(parm);  }    render(){  return (    <Fragment>       <div>{ this.props.parentContent }</div>       <ChildComponent getChildContent = { this.childContent } childcon = "我是子組件的內容" ></ChildComponent>    </Fragment>  );  }  }  // 定義子組件  class ChildComponent extends Component {    constructor(props){    super(props);    console.log("子組件props",props);    }    handleChild = ()=> {    const {getChildContent, childcon} = this.props;    getChildContent(childcon);  }    render(){  return (    <Fragment>      <div onClick = { this.handleChild }>{ this.props.childcon}</div>    </Fragment>  );  }  }    const container = document.getElementById('root');    ReactDOM.render(<ParentComponent parentContent = "我是父組件的內容" />, container);

從上面的程式碼中,可以看得出,父組件中JSX的prop值可以是一個方法,在子組件想要把數據傳遞給父組件時,需要在子組件中調用父組件的方法,從而達到了子組件向父組件傳遞數據的形式

這種間接操作的方式在React中非常重要.當然你看到上面把子組件與父組件放在一個文件當中,或許看得不是很舒服,你可以把子組件單獨的抽離出去,通過Es6中的export,import導出導入的方式是可以的(後面往往用的是這種方式)

在index.js同級目錄下創建一個ChildComponent.js的文件

import React, { Component, Fragment} from 'react';    class ChildComponent extends Component {    constructor(props){    super(props);    console.log("子組件props",props);    }    handleChild = ()=> {    const {getChildContent, childcon} = this.props;    getChildContent(childcon);  }    render(){  return (    <Fragment>     <div onClick = { this.handleChild }>{ this.props.childcon}</div>    </Fragment>  );  }  }    export default ChildComponent;

在index.js中,通過import將ChildComponent組件進行引入,如下程式碼所示

import React, { Fragment, Component } from 'react';  import ReactDOM from 'react-dom';  import ChildComponent from './ChildComponent'; // 引入ChildComponent組件      // 定義一個父組件  class ParentComponent extends Component {    constructor(props){    super(props);      console.log("父組件props",props);    }    childContent(parm) {    alert(parm);  }    render(){  return (    <Fragment>     <div>{ this.props.parentContent }</div>       <ChildComponent getChildContent = { this.childContent } childcon = "我是子組件的內容" ></ChildComponent>    </Fragment>  );  }  }  const container = document.getElementById('root');    ReactDOM.render(<ParentComponent parentContent = "我是父組件的內容" />, container);

使用PropTypes進行類型檢查

既然prop是組件對外的介面,那麼這個介面就必然要符合一定的數據規範,換句話說:也就是輸入與輸出的類型要保持一致,否則的話就會出問題

通過類型檢查捕獲一些錯誤,規避一些程式上的bug,React內置了一些類型檢查的功能,要在組件的props上進行類型的檢查,只需要做一些特定的propTypes屬性配置即可

定義一個組件,為了該程式的嚴謹性,應該規範組件數據的如下方面

• 這個組件支援哪些prop
• 每個prop應該是什麼樣的格式

在React中,藉助了第三方庫prop-types來解決這一問題,通過PropTypes來支援這一功能

命令行終端下,安裝prop-types這個庫

cnpm install --save prop-types

在你所要驗證的組件內,引入prop-types庫

import PropTypes from 'prop-types'    class PropTest extends Component {    render(){  return (    <Fragment>     <div>{ this.props.propContent }</div>    </Fragment>  );  }  }  // 類組件.propTypes對象下進行配置  PropTest.propTypes = {     propContent: PropTypes.number  }    const container = document.getElementById('root');    ReactDOM.render(<PropTest propContent = "我是prop屬性內容" />, container);

控制台錯誤顯示如下:

錯誤的資訊是:提供給PropTest的類型是string的proppropContent，但期望的是number

具體的解決辦法就是:要麼更改傳入屬性值的prop類型,要麼把校驗類型進行更改與之對應的

PropType提供了一系列的驗證方法,用於確保組件接收到的數據類型是有效準確的,一旦傳入的prop值類型不正確時,控制台將會顯示的警告,雖然程式不會報錯,但是會出現警告.

有時候,對於外部傳入組件內部的prop值,無論有沒有傳入,為了程式的健壯性,,需要判斷prop值是否存在,我們往往需要設置一個初始默認值,如果不存在,就給一個默認初始值,當然你利用傳入的prop進行「||」或字元進行處理也是可以的

在React中,可以配置defaultProps進行默認prop值的設置,程式碼如下所示

具體寫法:

組件.defaultProps = {   prop屬性名稱: 默認值  }

import React, { Fragment, Component } from "react";  import ReactDOM from 'react-dom';  import PropTypes from 'prop-types';    class PropTest extends Component {    render(){  return (    <Fragment>     <div>{ this.props.propContent }</div>    </Fragment>  );  }  }    PropTest.defaultProps = {  propContent: "我是propTest組件的內容"  }    const container = document.getElementById('root');  ReactDOM.render(<PropTest />, container);

效果如下所示

如上程式碼,當外部組件沒有傳propContent值時,React通過defaultProps設置了一個初始默認值

它會顯示默認設置的初始值,如果外部組件傳了prop值,它會優先使用傳入的prop值,覆蓋默認設置的初始值

具體PropTypes下更多的方法,可參考官網手冊PropTypes庫的使用,也可以查看npm中的prop-types這個庫的使用

出於性能的考慮,在開發的時候可以發現程式碼中的問題,但是放在生產壞境中就不適合了

因為它不僅增加了程式碼行數,佔用空間,而且還消耗CPU資源

折中的辦法就是:在開發的時候程式碼定義propTypes,避免開發犯錯,但在發布產品程式碼時,用一種自動的方式將propTypes去掉,這樣在線上壞境程式碼時最優的

藉助babel-plugin-transform-react-remove-prop-types這個第三方模組進行配置處理一下的,具體詳細配置:可見npm官網對這個庫的介紹的:https://www.npmjs.com/package/babel-plugin-transform-react-remove-prop-types

總結

本文主要講述了React組件中的數據屬性-props,它類似HTML標籤的屬性,但屬性值可以是任意數據類型,數字number,字元串String,甚至函數,對象

並且要注意函數式聲明(無狀態)組件與Es6中類聲明組件時,在子組件內部接收props的寫法上的差異,當使用類class聲明一個組件時,定義自己的構造器函數,一定要使用constructor構造器函數,並且設置接收props參數,以及調用super(props),如果不進行該設置,該組件下定義的成員私有方法(函數)將無法通過this.props訪問到父組件傳遞過來的prop值

當然,在React中,規定了不能直接更改外部世界傳過來的prop值,這個prop屬性只具備讀的能力,具體原因可見上文

如果非要更改,那麼可以藉助React提供的setState這一方法進行改變

值得一提的就是關於this壞境綁定的問題,在組件內的constructor構造器函數內使用bind的方式進行this手動綁定設置,具體詳細內容可見上文

以及當知道如何定義組件中的prop數據,還有必要對外部組件傳給內部組件的prop數據類型的校驗,通過prop-types庫來解決,PropTypes這個實例屬性來對prop進行規格的設置,這樣可以在運行程式碼時,可以根據propTypes判斷外部組件是否整整的使用組件的屬性,輸入輸出的類型是否一一對應，保持一致

限於篇幅所示:React中數據的另一個state將在下一篇幅中進行學習了