BG:
componentWillReceiveProps是组件的一个很重要的生命周期函数。
componentWillReceiveProps：
props的使用和componentWillReceiveProps息息相关，
props发生变化时执行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.组件初次渲染时不会执行componentWillReceiveProps；
2.当props发生变化时执行componentWillReceiveProps；
3.在这个函数里面，旧的属性仍可以通过this.props来获取；
4.此函数可以作为 react 在 prop 传入之后， render() 渲染之前更新 state 的机会。即可以根据属性的变化，通过调用this.setState()来更新你的组件状态，在该函数中调用 this.setState() 将不会引起第二次渲染。
5.也可在此函数内根据需要调用自己的自定义函数，来对prop的改变做出一些响应。
注意：
当父组件向子组件传递引用类型（或复合类型，比如对象、数组等）的属性时，要注意打印的this.props和nextProps的内容是一致的，因为引用类型在内存中只有一份，传值时是浅拷贝，示例如下：
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]}>场景二:改变对象中的内容</Text>
<TestReceivePropsComponent2 person={temPerson}></TestReceivePropsComponent2>
</ScrollView>
);
}
当在输入框依次输入Qwer时，打印结果是：
image.png
3.数组类型的属性：
//子组件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>修改数组的内容--数组：{JSON.stringify(this.props.arr)}</Text>
</View>
);
}
}
//父组件引用：
//声明一个数组
const temArr=['初始化数组内容'];
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]}>场景三:改变数组中的内容</Text>
<TestReceivePropsComponent3 arr={temArr}></TestReceivePropsComponent3>
</ScrollView>
);
}
当在输入框依次输入Qwer时，打印结果是：
image.png
综上：
当你想要在componentWillReceiveProps函数中根据属性的变化，通过调用this.setState()来更新你的组件状态或者调用自己的方法来响应Props的改变时，就要注意对引用类型的数据判断了！
以上是Props的使用注意点的介绍，当然Props使用还有其它的知识点，本文会持续更新，欢迎大家留言交流~~~
