前言
開發(fā)一個(gè)React應(yīng)用,更多的是在編寫組件,而React組件最小的單位就是React元素,編寫組件的最大的好處,就是實(shí)現(xiàn)代碼的復(fù)用
將一個(gè)大的應(yīng)用按照功能結(jié)構(gòu)等劃分成若干個(gè)部分(組件),對(duì)每個(gè)部分(組件)進(jìn)行分開管理,與組件相關(guān)的東西放在一起,達(dá)到高內(nèi)聚的目的,而不同組件又各自獨(dú)立管理達(dá)到低耦合的效果晶渠。
構(gòu)建組件,本質(zhì)上就是在編寫javascript函數(shù),而組件中最重要的是數(shù)據(jù),在React中數(shù)據(jù)分兩種:props和state,當(dāng)定義一個(gè)組件時(shí),它接收任意的形參(即props),并用于返回描述頁(yè)面展示內(nèi)容的React元素
無(wú)論props還是state,當(dāng)他們?nèi)魏我粋€(gè)發(fā)生改變時(shí),都會(huì)引發(fā)render函數(shù)的重新渲染
一個(gè)UI組件所渲染的結(jié)果,就是通過(guò)props和state這兩個(gè)屬性在render方法里面映射生成對(duì)應(yīng)的HTML結(jié)構(gòu)
那么在寫一個(gè)React組件的時(shí)候,究竟什么時(shí)候使用state,什么時(shí)候使用props呢?如何的劃分組件的狀態(tài)數(shù)據(jù)?
那么本節(jié)就是你想要知道的
React中的props
當(dāng)通過(guò)函數(shù)聲明或者class自定義一個(gè)組件時(shí),它會(huì)將JSX所接受的屬性(attributes)轉(zhuǎn)換為一對(duì)象傳遞給該定義時(shí)的組件
這個(gè)接收的對(duì)象就是props(property的簡(jiǎn)寫),props就是組件定義屬性的集合,它是組件對(duì)外的接口,由外部通過(guò)JSX屬性傳入設(shè)置(也就是從外部傳遞給內(nèi)部組件的數(shù)據(jù))
一個(gè)React組件通過(guò)定義自己能夠接收的prop,就定義了自己對(duì)外提供的公共接口
每個(gè)定義的React組件應(yīng)該都是獨(dú)立存在的模塊,組件之外的一切都是外部世界(組件),外部世界(組件)就是通過(guò)prop來(lái)和組件進(jìn)行對(duì)話數(shù)據(jù)傳遞的
在React中,你可以將prop類似于HTML標(biāo)簽元素的屬性,不過(guò)原生HTML標(biāo)簽的屬性值都是字符串,即使是內(nèi)嵌js表達(dá)式,也依然是字符串,而在React中,prop的屬性值類型可以任何數(shù)據(jù)類型(基本數(shù)據(jù)類型(number,String,null等函數(shù))或者對(duì)象)
當(dāng)然如果是非字符串?dāng)?shù)據(jù)類型,在JSX中,必須要用花括號(hào){}把prop值給包裹起來(lái)
這也是為什么style有兩層花括號(hào)的原因:最外層代表的是JSX語(yǔ)法,意味著它是一個(gè)變量對(duì)象,而內(nèi)層的花括號(hào){}代表的是一個(gè)對(duì)象
在函數(shù)聲明自定義的組件中,可以通過(guò)props獲取組件的屬性
如下所示:自定義一個(gè)Button組件,給組件添加各個(gè)屬性值,渲染的結(jié)果如下所示
import React, { Fragment, Component } from 'react';
import ReactDOM from 'react-dom';
// 函數(shù)式組件,定義一個(gè)Button組件,首字母大寫
function Button(props) {
console.log(props); // 將會(huì)把調(diào)用處組件的style屬性給打印出來(lái)
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聲明的組件: 通過(guò)Es6中的class聲明,繼承React.Component進(jìn)行實(shí)現(xiàn)
import React, { Fragment, Component } from 'react';
import ReactDOM from 'react-dom';
// 類組件,通過(guò)class關(guān)鍵字聲明使用
class Button extends Component {
constructor(props){
super(props);
}
render() {
console.log(this.props);
// 這里利用Es6中的解構(gòu)賦值
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組件按鈕自身?yè)碛械膶傩?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);
上述代碼中分別使用了函數(shù)式組件與類聲明的組件,在調(diào)用組件時(shí),對(duì)組件設(shè)置了props值,而在組件內(nèi)部通過(guò)this.props獲取屬性值
從而得出,父組件(外部組件)向子(內(nèi))組件傳值是通過(guò)設(shè)置JSX屬性的方式實(shí)現(xiàn)的,而在子組件內(nèi)部獲取父(外部)組件數(shù)據(jù)是通過(guò)this.props來(lái)獲取的,也可以這么認(rèn)為,props就是對(duì)外提供的數(shù)據(jù)接口
對(duì)于用類class聲明的組件,讀取prop的值,是通過(guò)this.props來(lái)獲取的
首先用construcor定義了一個(gè)構(gòu)造函數(shù),并且給它接收了一個(gè)props形參,然后在constructor構(gòu)造器函數(shù)內(nèi)調(diào)用super(props)
這個(gè)是固定的寫法,組件繼承父類的一些方法,如果一個(gè)組件需要定義自己的構(gòu)造函數(shù),那么就一定要調(diào)用super(props),也就是繼承了React.Component構(gòu)造函數(shù)
至于為什么要調(diào)用super(props)方法,因?yàn)镋s6采用的是先創(chuàng)建父類實(shí)例的this,然后在用子類的構(gòu)造函數(shù)修改this
如果沒有constructor構(gòu)造器函數(shù),調(diào)用super(),以及參數(shù)props,它是會(huì)報(bào)錯(cuò)的
在組件實(shí)例被構(gòu)造之后,該組件的所有成員函數(shù)都無(wú)法通過(guò)this.props訪問到父組件傳遞過(guò)來(lái)的props值,錯(cuò)誤如下所示
ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
關(guān)于constructor()構(gòu)造器函數(shù)
這個(gè)constructor(props)構(gòu)造器函數(shù)是自動(dòng)就生成的,如果沒有聲明,React會(huì)默認(rèn)添加一個(gè)空的construcor,并且會(huì)自動(dòng)執(zhí)行,有且只執(zhí)行一次,可以將它視為鉤子函數(shù)(生命周期函數(shù))
這個(gè)constructor函數(shù)接收props形參數(shù),接收外部組件傳值的集合,只要組件內(nèi)部要使用prop值,那么這個(gè)props參數(shù)是要必傳的,否則的話在當(dāng)前組件內(nèi)就無(wú)法使用this.props接收外部組件傳來(lái)的值
但是無(wú)論有沒有constructor函數(shù),render函數(shù),子組件內(nèi)都可以使用this.props獲取組件外部的數(shù)據(jù),它是默認(rèn)自帶的
constructor(props){
super(props);
}
至于寫不寫構(gòu)造器函數(shù),如果該自定義的組件不需要初始化state,不用進(jìn)行方法的綁定(this壞境的設(shè)置),只是單純的用于接收外部組件傳來(lái)的props數(shù)據(jù)用作展示,并沒有UI交互渲染動(dòng)作
那么就不需要為該React組件實(shí)現(xiàn)構(gòu)造函數(shù)
如果是這樣,則更應(yīng)該把它轉(zhuǎn)換為函數(shù)式(無(wú)狀態(tài)UI)組件,因?yàn)樗男苁亲罡叩?/p>
否則的話,那么就要編寫constructor構(gòu)造器函數(shù),況且Es6編寫類的方式提供了更多實(shí)用的功能,特定的條件下,該用還是要用的
一般而言,在React中,構(gòu)造函數(shù)僅用于下面兩種情況:
通過(guò)給this.state賦值對(duì)象來(lái)初始化當(dāng)前組件內(nèi)部的state(狀態(tài))
在JSX中監(jiān)聽綁定事件處理函數(shù)(this壞境的綁定)
在constructor()函數(shù)中不要調(diào)用setState()方法,如果組件需要使用內(nèi)部狀態(tài)state,直接在構(gòu)造函數(shù)中為this.state賦初始state值
constructor(props){
super(props);
// 不要在這里調(diào)用this.setState(),更改state狀態(tài)數(shù)據(jù)
this.state = {
// 屬性:屬性值
count: 0
}
//this.方法 = this.方法.bind(this);
this.handleClick = this.handleClick.bind(this)
}
只能在構(gòu)造函數(shù)中直接為this.state賦值,如果在其他地方法需要改變?cè)搒tate的值,應(yīng)該使用this.setState()方法替代
注意:
如果把函數(shù)組件替換成類組件的寫法,在子組件內(nèi)部接收外部的props值時(shí),需要將props更改成this.props的寫法,反過(guò)來(lái)也是,類聲明的組件替換成函數(shù)式(無(wú)狀態(tài))組件時(shí),需要將this.props替換成props
而在用class類定義的組件時(shí),一旦對(duì)組件初始化設(shè)置完成,該組件的屬性就可以通過(guò)this.props獲取得到,而這個(gè)this.props是不可更改的
不要輕易更改設(shè)置this.props里面的值,換句話說(shuō),組件的props屬性只具備可讀性,不能修改自身的props,這不區(qū)分是用函數(shù)聲明的組件還是用class聲明的組件,無(wú)法直接的更改props值
如下所示:點(diǎn)擊按鈕,想要改變外部傳進(jìn)去的props值,在代碼中直接更改props值,是會(huì)報(bào)錯(cuò)的如下圖錯(cuò)誤所示:
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的值,是會(huì)報(bào)錯(cuò)的,在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);
因?yàn)樵赗eact中,數(shù)據(jù)流是單向的,不能改變一個(gè)組件被渲染時(shí)傳進(jìn)來(lái)的props
之所以這么規(guī)定,因?yàn)榻M件的復(fù)用性,一個(gè)組件可能在各個(gè)頁(yè)面上進(jìn)行復(fù)用,如果允許被修改的話,這個(gè)組件的顯示形態(tài)會(huì)變得不可預(yù)測(cè)仍劈，當(dāng)組件出現(xiàn)某些bug的時(shí)候,會(huì)給開發(fā)者帶來(lái)困擾,調(diào)試將會(huì)是噩夢(mèng),無(wú)法定位,違背組件的設(shè)計(jì)原則了
但是這并不代表著props的值并不能被修改,有時(shí)候,由于業(yè)務(wù)的需求,我們是需要對(duì)props值進(jìn)行修改的
如果想要修改,那么可以通過(guò)借助React內(nèi)置的一個(gè)方法setState方法重新渲染的方式,把props傳入組件當(dāng)中殿漠，這樣的話,由props屬性決定這個(gè)組件的顯示形態(tài)也會(huì)得到相應(yīng)的改變
更改如下所示:
import React, { Fragment, Component } from 'react';
import ReactDOM from 'react-dom';
// 類組件
class Button extends Component {
constructor(props){
super(props);
// state是組件內(nèi)部的狀態(tài)
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);
關(guān)于React中事件監(jiān)聽this的綁定
this的指向通常與它的執(zhí)行上下文有關(guān)系,一般有以下幾種方式
函數(shù)的調(diào)用方式影響this的取值,如果作為函數(shù)調(diào)用,在非嚴(yán)格模式下,this指向全局window對(duì)象,在嚴(yán)格模式（use "strict"）下,this指向undefined
如果作為方法的調(diào)用,this指向調(diào)用的對(duì)象,誰(shuí)調(diào)用它,this就指向誰(shuí)
作為構(gòu)造器函數(shù)調(diào)用,this指向該創(chuàng)建的實(shí)例化對(duì)象(類實(shí)例方法里面的this都指向這個(gè)實(shí)例本身)
通過(guò)call,apply調(diào)用,this指向call和apply的第一個(gè)參數(shù)
在React中,給JSX元素,監(jiān)聽綁定一個(gè)事件時(shí),你需要手動(dòng)的綁定this,如果你不進(jìn)行手動(dòng)bind的綁定,this會(huì)是undefined,在Es6中,用class類創(chuàng)建的React組件并不會(huì)自動(dòng)的給組件綁定this到當(dāng)前的實(shí)例對(duì)象上
將該組件實(shí)例的方法進(jìn)行this壞境綁定是React常用手段
代碼如下所示:
import React, { Fragment, Component } from 'react';
import ReactDOM from 'react-dom';
// 類組件
class Button extends Component {
constructor(props){
super(props);
// this壞境的綁定,這是React里面的一個(gè)優(yōu)化,constructor函數(shù)只執(zhí)行一次
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);
當(dāng)然如果不用這種手動(dòng)綁定this的方式,用箭頭函數(shù)也是可以的,箭頭函數(shù)沒有this的綁定,如下代碼所示
import React, { Fragment, Component } from 'react';
import ReactDOM from 'react-dom';
// 類組件
class Button extends Component {
constructor(props){
super(props);
// this壞境的綁定,這是React里面的一個(gè)優(yōu)化,constructor函數(shù)只執(zhí)行一次
// 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);
對(duì)比兩種實(shí)現(xiàn)方式,都是可以的,但是官方推薦使用bind綁定,使用bind不僅可以幫我們把事件監(jiān)聽方法中的this綁定到當(dāng)前的組件實(shí)例上
bind后面還還可以設(shè)置第二個(gè)參數(shù),把與組件相關(guān)的東西傳給組件的,并在construcor構(gòu)造器函數(shù)中進(jìn)行初始化綁定,雖然bind的使用會(huì)創(chuàng)建一個(gè)新的函數(shù),但是它在constructor中只會(huì)調(diào)用一次
而利用箭頭函數(shù),箭頭函數(shù)中沒有this的綁定,從性能上講,它是會(huì)重復(fù)調(diào)用,進(jìn)行額外的渲染,不如在構(gòu)造器函數(shù)中進(jìn)行this壞境的初始化手動(dòng)綁定
在上面說(shuō)到了prop值既然可以是任意數(shù)據(jù)類型,正好利用這一特性,子組件接收父組件用this.props可以獲取屬性,那么這個(gè)屬性值可以是個(gè)方法,子組件也可以調(diào)用父組件的方法,來(lái)達(dá)到子組件向父組件傳遞數(shù)據(jù)
如下代碼所示,最終的效果如下所示
import React, { Fragment, Component } from 'react';
import ReactDOM from 'react-dom';
// 定義一個(gè)父組件
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 = "我是子組件的內(nèi)容" ></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 = "我是父組件的內(nèi)容" />, container);
從上面的代碼中,可以看得出,父組件中JSX的prop值可以是一個(gè)方法,在子組件想要把數(shù)據(jù)傳遞給父組件時(shí),需要在子組件中調(diào)用父組件的方法,從而達(dá)到了子組件向父組件傳遞數(shù)據(jù)的形式
這種間接操作的方式在React中非常重要.當(dāng)然你看到上面把子組件與父組件放在一個(gè)文件當(dāng)中,或許看得不是很舒服,你可以把子組件單獨(dú)的抽離出去,通過(guò)Es6中的export,import導(dǎo)出導(dǎo)入的方式是可以的(后面往往用的是這種方式)
在index.js同級(jí)目錄下創(chuàng)建一個(gè)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中,通過(guò)import將ChildComponent組件進(jìn)行引入,如下代碼所示
import React, { Fragment, Component } from 'react';
import ReactDOM from 'react-dom';
import ChildComponent from './ChildComponent'; // 引入ChildComponent組件
// 定義一個(gè)父組件
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 = "我是子組件的內(nèi)容" ></ChildComponent>
</Fragment>
);
}
}
const container = document.getElementById('root');
ReactDOM.render(<ParentComponent parentContent = "我是父組件的內(nèi)容" />, container);
使用PropTypes進(jìn)行類型檢查
既然prop是組件對(duì)外的接口,那么這個(gè)接口就必然要符合一定的數(shù)據(jù)規(guī)范,換句話說(shuō):也就是輸入與輸出的類型要保持一致,否則的話就會(huì)出問題
通過(guò)類型檢查捕獲一些錯(cuò)誤,規(guī)避一些程序上的bug,React內(nèi)置了一些類型檢查的功能,要在組件的props上進(jìn)行類型的檢查,只需要做一些特定的propTypes屬性配置即可
定義一個(gè)組件,為了該程序的嚴(yán)謹(jǐn)性,應(yīng)該規(guī)范組件數(shù)據(jù)的如下方面
這個(gè)組件支持哪些prop
每個(gè)prop應(yīng)該是什么樣的格式
在React中,借助了第三方庫(kù)prop-types來(lái)解決這一問題,通過(guò)PropTypes來(lái)支持這一功能
命令行終端下,安裝prop-types這個(gè)庫(kù)
cnpm install --save prop-types
在你所要驗(yàn)證的組件內(nèi),引入prop-types庫(kù)
import PropTypes from 'prop-types'
class PropTest extends Component {
render(){
return (
<Fragment>
<div>{ this.props.propContent }</div>
</Fragment>
);
}
}
// 類組件.propTypes對(duì)象下進(jìn)行配置
PropTest.propTypes = {
propContent: PropTypes.number
}
const container = document.getElementById('root');
ReactDOM.render(<PropTest propContent = "我是prop屬性內(nèi)容" />, container);
控制臺(tái)錯(cuò)誤顯示如下:
錯(cuò)誤的信息是:提供給PropTest的類型是string的proppropContent妖枚，但期望的是number
具體的解決辦法就是:要么更改傳入屬性值的prop類型,要么把校驗(yàn)類型進(jìn)行更改與之對(duì)應(yīng)的
PropType提供了一系列的驗(yàn)證方法,用于確保組件接收到的數(shù)據(jù)類型是有效準(zhǔn)確的,一旦傳入的prop值類型不正確時(shí),控制臺(tái)將會(huì)顯示的警告,雖然程序不會(huì)報(bào)錯(cuò),但是會(huì)出現(xiàn)警告.
有時(shí)候,對(duì)于外部傳入組件內(nèi)部的prop值,無(wú)論有沒有傳入,為了程序的健壯性,,需要判斷prop值是否存在,我們往往需要設(shè)置一個(gè)初始默認(rèn)值,如果不存在,就給一個(gè)默認(rèn)初始值,當(dāng)然你利用傳入的prop進(jìn)行“||”或字符進(jìn)行處理也是可以的
在React中,可以配置defaultProps進(jìn)行默認(rèn)prop值的設(shè)置,代碼如下所示
具體寫法:
組件.defaultProps = {
prop屬性名稱: 默認(rèn)值
}
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組件的內(nèi)容"
}
const container = document.getElementById('root');
ReactDOM.render(<PropTest />, container);
效果如下所示
如上代碼,當(dāng)外部組件沒有傳propContent值時(shí),React通過(guò)defaultProps設(shè)置了一個(gè)初始默認(rèn)值
它會(huì)顯示默認(rèn)設(shè)置的初始值,如果外部組件傳了prop值,它會(huì)優(yōu)先使用傳入的prop值,覆蓋默認(rèn)設(shè)置的初始值
具體PropTypes下更多的方法,可參考官網(wǎng)手冊(cè)PropTypes庫(kù)的使用,也可以查看npm中的prop-types這個(gè)庫(kù)的使用
出于性能的考慮,在開發(fā)的時(shí)候可以發(fā)現(xiàn)代碼中的問題,但是放在生產(chǎn)壞境中就不適合了
因?yàn)樗粌H增加了代碼行數(shù),占用空間,而且還消耗CPU資源
折中的辦法就是:在開發(fā)的時(shí)候代碼定義propTypes,避免開發(fā)犯錯(cuò),但在發(fā)布產(chǎn)品代碼時(shí),用一種自動(dòng)的方式將propTypes去掉,這樣在線上壞境代碼時(shí)最優(yōu)的
借助babel-plugin-transform-react-remove-prop-types這個(gè)第三方模塊進(jìn)行配置處理一下的,具體詳細(xì)配置:可見npm官網(wǎng)對(duì)這個(gè)庫(kù)的介紹的:https://www.npmjs.com/package/babel-plugin-transform-react-remove-prop-types
總結(jié)
本文主要講述了React組件中的數(shù)據(jù)屬性-props,它類似HTML標(biāo)簽的屬性,但屬性值可以是任意數(shù)據(jù)類型,數(shù)字number,字符串String,甚至函數(shù),對(duì)象
并且要注意函數(shù)式聲明(無(wú)狀態(tài))組件與Es6中類聲明組件時(shí),在子組件內(nèi)部接收props的寫法上的差異,當(dāng)使用類class聲明一個(gè)組件時(shí),定義自己的構(gòu)造器函數(shù),一定要使用constructor構(gòu)造器函數(shù),并且設(shè)置接收props參數(shù),以及調(diào)用super(props),如果不進(jìn)行該設(shè)置,該組件下定義的成員私有方法(函數(shù))將無(wú)法通過(guò)this.props訪問到父組件傳遞過(guò)來(lái)的prop值
當(dāng)然,在React中,規(guī)定了不能直接更改外部世界傳過(guò)來(lái)的prop值,這個(gè)prop屬性只具備讀的能力,具體原因可見上文
如果非要更改,那么可以借助React提供的setState這一方法進(jìn)行改變
值得一提的就是關(guān)于this壞境綁定的問題,在組件內(nèi)的constructor構(gòu)造器函數(shù)內(nèi)使用bind的方式進(jìn)行this手動(dòng)綁定設(shè)置,具體詳細(xì)內(nèi)容可見上文
以及當(dāng)知道如何定義組件中的prop數(shù)據(jù),還有必要對(duì)外部組件傳給內(nèi)部組件的prop數(shù)據(jù)類型的校驗(yàn),通過(guò)prop-types庫(kù)來(lái)解決,PropTypes這個(gè)實(shí)例屬性來(lái)對(duì)prop進(jìn)行規(guī)格的設(shè)置,這樣可以在運(yùn)行代碼時(shí),可以根據(jù)propTypes判斷外部組件是否整整的使用組件的屬性,輸入輸出的類型是否一一對(duì)應(yīng)，保持一致
限于篇幅所示:React中數(shù)據(jù)的另一個(gè)state將在下一篇幅中進(jìn)行學(xué)習(xí)了
