React Native(React)componentWillReceiveProps函数

0.325字数 483阅读 2259

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

推荐阅读更多精彩内容