React Native（React）componentWill

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使用还有其它的知识点，本文会持续更新，欢迎大家留言交流~~~