我不明白为什么单击按钮会在子组件中两次调用getDerivedStateFromProps

I am new to React. I got confused about getDerivedStateFromProps method in the child component. When I clicked the button, the Child derived message showed up twice. I think it should only show up one time.

`

class Parent extends Component {
constructor(props) {
    super(props);
    this.state = {
        count: 0
    }
}



changeState = () => {

    this.setState((prev) => ({count: prev.count + 1}))
}
render() {
    return (
        <div>
            <Child data={this.state.count}> </Child>

            <button onClick={this.changeState}>
                click me
            </button>

        </div>
    );
}
}

Parent.propTypes = {};

export default Parent;

`

class Child extends Component {
constructor(props) {
    super(props);
    this.state = {count: -1}
}
static getDerivedStateFromProps(props, state) {
    // console.log(state)
    // console.log(props)
    console.log("child Derived")
    return {count: props.data}
}


render() {
    return (
        <div>
            count {this.state.count}
        </div>
    );
}
}

Child.propTypes = {};

 export default Child;