react中遇到的坑

问题描述1：

1.组件嵌套，子组件接收父组件的state属性进行更新，子组件在构造器中对于父组件传入属性作为state进行初始化操作，然后在子组件中根据state属性进行更新操作，结果父组件的状态改变，子组件始终不见改变。

父组件：

import React from "react"
import P from "../p/p";

class H1 extends React.Component {
    constructor(props) {
        super(props);
        this.clickMe = this.clickMe.bind(this);
        this.state = {
            changeStatus: true,
            content: this.props.content
        }
    }

    clickMe() {
        this.setState({
            changeStatus: false,
            content: "变化了哦"
        })
    }



    render() {
        return (
            <div>
                {this.state.changeStatus ? "这是父组件" : "我通过子组件改变了"}
                <P content={this.state.content}></P>
                <button onClick={this.clickMe}>点击我</button>
            </div>
        );
    }
}

export default H1;

子组件：

import React from "react"

class P extends React.Component {
    constructor(props) {
        super(props);
        console.log("初始化P组件的时候的属性值", this.props);
        this.state = {
            content: this.props.content
        }
    }

    render() {
        return (
            <div>
                <p>{this.props.content}</p>
            </div>
        );
    }

    componentWillMount() {
        console.log("P组件将要挂载");
    }

    componentDidMount() {
        console.log("组件挂载完毕");
    }

    componentWillReceiveProps() {
        console.log("组件将要接收父组件的更新", this.props);
    }

    componentWillUpdate() {
        console.log("组件将要更新");
    }

    componentDidUpdate() {
        console.log("组件更新完毕");
    }
}

export default P;

综上所述，进行了实验发现：

组件在挂载的时候构造器和componentWillMount及componentDidMount都只会调用一次，之后组件的任何状态或属性更新都不会涉及到以上函数的调用，上述问题发生的原因是子组件中的state起初是想在构造器中进行更新，但是state只能通过setState进行更新，而且构造器只执行一次，所以子组件中的state始终不会更新。

最后附上组件生命周期图：

问题描述2：

1.登录和注册组件中嵌套了多个input组件，当登录组件控制子组件的input属性变更时，多个input组件同时更新了，经定位问题如下。

此处的代码在组件每次进行更新时接收新的属性，进行更新，bug出现的原因是之前未加判断，导致了每次在取nextprops.checkStatus为undefined（首次默认为true），加入判断后解决掉。

componentWillReceiveProps(nextProps) {
    console.log(this.state);
    if (nextProps.checkStatus != undefined) {
        this.setState({
            checkStatus: nextProps.checkStatus
        });
    }
}

此处有个小贴士：如果想要接收props来控制组件内部状态的更新，必须要放置在componentWillReceiveProps中进行操作，其他钩子函数可能导致死循环。而且当父组件进行更新时，父组件下的子组件响应也会进行更新，shouldComponentUpdate默认返回true。