BG:
componentWillReceiveProps是組件的一個很重要的生命周期函數(shù)赠制。
componentWillReceiveProps：
props的使用和componentWillReceiveProps息息相關僚碎，
props發(fā)生變化時執(zhí)行componentWillReceiveProps。
componentWillReceiveProps(nextProps,nextContext){
console.log(`this.props-->${JSON.stringify(this.props)}`);
console.log(`nextProps-->${JSON.stringify(nextProps)}`);
console.log(`nextContext-->${JSON.stringify(nextContext)}`);
}
總結：
1.組件初次渲染時不會執(zhí)行componentWillReceiveProps砸烦；
2.當props發(fā)生變化時執(zhí)行componentWillReceiveProps弃鸦；
3.在這個函數(shù)里面，舊的屬性仍可以通過this.props來獲却倍弧唬格；
4.此函數(shù)可以作為 react 在 prop 傳入之后， render() 渲染之前更新 state 的機會颜说。即可以根據(jù)屬性的變化购岗，通過調(diào)用this.setState()來更新你的組件狀態(tài)，在該函數(shù)中調(diào)用 this.setState() 將不會引起第二次渲染门粪。
5.也可在此函數(shù)內(nèi)根據(jù)需要調(diào)用自己的自定義函數(shù)喊积，來對prop的改變做出一些響應。
注意：
當父組件向子組件傳遞引用類型（或復合類型玄妈，比如對象乾吻、數(shù)組等）的屬性時，要注意打印的this.props和nextProps的內(nèi)容是一致的拟蜻，因為引用類型在內(nèi)存中只有一份绎签，傳值時是淺拷貝，示例如下：
1酝锅、基本類型的屬性
//子組件TestReceivePropsComponent：
export class TestReceivePropsComponent extends Component {
constructor(props) {
super(props);
};
componentWillReceiveProps(nextProps,nextContext){
console.log(`this.props-->${JSON.stringify(this.props)}`);
console.log(`nextProps-->${JSON.stringify(nextProps)}`);
console.log(`nextContext-->${JSON.stringify(nextContext)}`);
}
render(){
return (
<View style={styles.container}>
<Text>子組件顯示--姓名：{this.props.name}</Text>
</View>
);
}
}
//父組件：
render() {
console.log(`ComponentWillReceivePropsPage--render`);
return (
<ScrollView style={styles.container}>
<TextInput
ref="inputLoginName"
autoFocus={this.props.autoFocus}
blurOnSubmit={true}
contextMenuHidden={false}
placeholder='請輸入姓名'
style={[styles.input]}
secureTextEntry={this.props.secureTextEntry}
onChangeText={(text) => {
this.setState({name:text});
</TextInput>
<Text style={[styles.listTitle,styles.subTitle]}>場景一:</Text>
<TestReceivePropsComponent name={this.state.name}></TestReceivePropsComponent>
</ScrollView>
);
}
當在輸入框依次輸入Qwer時诡必，打印結果是：
image.png
2.對象類型的屬性：
//子組件：
export class TestReceivePropsComponent2 extends Component {
//約束的關鍵就是這里在定義屬性的時候指定屬性的類型，
static defaultProps={
person:{name:'person對象名'}
}
static propTypes={
//指定類型的對象
person:PropTypes.any,
}
constructor(props) {
super(props);
};
componentWillReceiveProps(nextProps,nextContext){
console.log(`TestReceivePropsComponent2--this.props-->${JSON.stringify(this.props)}`);
console.log(`TestReceivePropsComponent2--nextProps-->${JSON.stringify(nextProps)}`);
console.log(`TestReceivePropsComponent2--nextContext-->${JSON.stringify(nextContext)}`);
}
render(){
return (
<View style={styles.container}>
<Text>修改對象中的屬性--姓名：{this.props.person.name}</Text>
</View>
);
}
}
//父組件引用：
//聲明一個對象
const temPerson = {
name:'張三',
};
...
render() {
console.log(`ComponentWillReceivePropsPage--render`);
return (
<ScrollView style={styles.container}>
<TextInput
ref="inputLoginName"
autoFocus={this.props.autoFocus}
blurOnSubmit={true}
contextMenuHidden={false}
placeholder='請輸入姓名'
style={[styles.input]}
secureTextEntry={this.props.secureTextEntry}
onChangeText={(text) => {
this.setState({name:text});
temPerson.name = text;//更改temPerson對象的name屬性值
</TextInput>
<Text style={[styles.listTitle,styles.subTitle]}>場景二:改變對象中的內(nèi)容</Text>
<TestReceivePropsComponent2 person={temPerson}></TestReceivePropsComponent2>
</ScrollView>
);
}
當在輸入框依次輸入Qwer時搔扁，打印結果是：
image.png
3.數(shù)組類型的屬性：
//子組件TestReceivePropsComponent3：
export class TestReceivePropsComponent3 extends Component {
static defaultProps={
arr:[],
}
static propTypes={
arr:PropTypes.array,
}
constructor(props) {
super(props);
};
componentWillReceiveProps(nextProps,nextContext){
console.log(`this.props-->${JSON.stringify(this.props)}`);
console.log(`nextProps-->${JSON.stringify(nextProps)}`);
console.log(`nextContext-->${JSON.stringify(nextContext)}`);
}
render(){
console.log(`TestReceivePropsComponent3-->render`);
return (
<View style={styles.container}>
<Text>修改數(shù)組的內(nèi)容--數(shù)組：{JSON.stringify(this.props.arr)}</Text>
</View>
);
}
}
//父組件引用：
//聲明一個數(shù)組
const temArr=['初始化數(shù)組內(nèi)容'];
render() {
console.log(`ComponentWillReceivePropsPage--render`);
return (
<ScrollView style={styles.container}>
<TextInput
ref="inputLoginName"
autoFocus={this.props.autoFocus}
blurOnSubmit={true}
contextMenuHidden={false}
placeholder='請輸入姓名'
style={[styles.input]}
secureTextEntry={this.props.secureTextEntry}
onChangeText={(text) => {
this.setState({name:text});
temArr.push(text);
}}>
</TextInput>
<Text style={[styles.listTitle,styles.subTitle]}>場景三:改變數(shù)組中的內(nèi)容</Text>
<TestReceivePropsComponent3 arr={temArr}></TestReceivePropsComponent3>
</ScrollView>
);
}
當在輸入框依次輸入Qwer時爸舒，打印結果是：
image.png
綜上：
當你想要在componentWillReceiveProps函數(shù)中根據(jù)屬性的變化，通過調(diào)用this.setState()來更新你的組件狀態(tài)或者調(diào)用自己的方法來響應Props的改變時稿蹲，就要注意對引用類型的數(shù)據(jù)判斷了扭勉！
以上是Props的使用注意點的介紹，當然Props使用還有其它的知識點苛聘，本文會持續(xù)更新剖效，歡迎大家留言交流~~~
