Javascript 反应本地、双重呼叫组件

我注意到我的测试应用程序中有一些奇怪的行为。我的具有“componentWillReceiveProps”功能的组件是双重调用。应该只在点击按钮后调用一次，但按奇怪的顺序是双击。 我有3个部分： 测试启动组件 SetMessage-从测试接收道具并传递到动画组件 动画-从SetMessage和dispaly接收道具

因此，单击按钮后，组件和函数的调用应如下所示：

测试->设置消息（功能：reciveProps->设置消息），然后 动画（功能：reciveProps->showMsg）

但就我而言：

测试->设置消息（函数：reciveProps），然后是动画（函数：reciveProps->showMsg），然后 设置消息（函数：changeMsg）然后 动画（功能：reciveProps->showMsg）

我想知道，这是否正常和良好？如果没有，为什么会发生以及如何解决

Bellow all code and logs（所有代码和日志）屏幕

Index.android.js：

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  Navigator,
  View
} from 'react-native';

import Test from './app/components/Test/Test';
export default class testApp extends Component {


  render(){
    return(
        <View style={{flex:1}}>
          <Test/>

        </View>
    )
  }

}

AppRegistry.registerComponent('testApp', () => testApp);

import React，{Component}来自'React'；
进口{
评估学，
样式表，
文本，
领航员，
看法
}从“反应本机”；
从“./app/components/Test/Test”导入测试；
导出默认类testApp扩展组件{
render（）{
返回(
)
}
}
AppRegistry.registerComponent（'testApp'，（）=>testApp）；

Test.js：

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    Button,
    View,
    Animated,
    Easing,
    Switch,
} from 'react-native';
import SetMessage from '../SetMessage/SetMessage';
export default class Test extends Component{

    constructor(){
        super();
        this.state = {
            sendMsg:'plus'
        }
    }
    change(){
        if(this.state.sendMsg==='plus'){
            this.setState({sendMsg:'minus'});
        }else{
            this.setState({
                sendMsg:'minus'
            });
        }

        console.log('Test com ')
    }

    render(){

        return (
            <View>
                <Button
                    onPress={this.change.bind(this)}
                    title={'Start'}
                />
                <SetMessage msg={this.state.sendMsg}/>
            </View>
        )
    }

}

AppRegistry.registerComponent('Test', () => Test);

import React，{Component}来自'React'；
进口{
评估学，
样式表，
文本，
按钮
看法
有生气的
缓和,，
转换
}从“反应本机”；
从“../SetMessage/SetMessage”导入SetMessage；
导出默认类测试扩展组件{
构造函数（）{
超级（）；
此.state={
sendMsg:'plus'
}
}
更改（）{
if（this.state.sendMsg==='plus'）{
this.setState（{sendMsg:'minus'}）；
}否则{
这是我的国家({
sendMsg:‘负’
});
}
console.log（'testcom'））
}
render（）{
返回(
)
}
}
AppRegistry.registerComponent（'Test'，（）=>Test）；

SetMessage.js：

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    Button,
    View,
    Animated,
    Easing,
    Switch,
} from 'react-native';
import Animation from '../Animation/Animation';
export default class SetMessage extends Component{

    constructor(){
        super();
        this.state = {
            test:'',
            sendMsg:''
        }
    }
    componentWillReceiveProps(nextProps){
        this.setState({
            test:nextProps.msg
        },()=>this.setMsg());

        console.log('SetMessage F - ReciveProp'+this.state.sendMsg)
    }
    setMsg(){
        console.log('SetMessage F - Change Msg '+this.state.sendMsg);
        this.setState({
            sendMsg:this.state.test
        })
    }
    render(){

        return (
            <View>

                <Animation msg={this.state.sendMsg}/>
            </View>
        )
    }

}

AppRegistry.registerComponent('SetMessage', () => SetMessage);

import React，{Component}来自'React'；
进口{
评估学，
样式表，
文本，
按钮
看法
有生气的
缓和,，
转换
}从“反应本机”；
从“../Animation/Animation”导入动画；
导出默认类SetMessage扩展组件{
构造函数（）{
超级（）；
此.state={
测试：“”，
sendMsg:'
}
}
组件将接收道具（下一步）{
这是我的国家({
测试：nextrops.msg
}，（）=>this.setMsg（））；
console.log（'SetMessage F-ReciveProp'+this.state.sendMsg）
}
setMsg（）{
console.log（'SetMessage F-Change-Msg'+this.state.sendMsg）；
这是我的国家({
sendMsg:this.state.test
})
}
render（）{
返回(

谢谢。
如果您查看官方文档：

您会注意到“注意，即使道具没有更改，React也可能调用此方法，因此请确保比较当前值和下一个值…”。我假设对某个父级进行了渲染调用，该父级对动画组件进行了重新渲染调用。因此将调用组件WillReceiveProps。我在使用上面的挂钩时始终使用此选项：

componentWillReceiveProps(newprops) {
  if(newprops.active === this.props.active) { return }
    //if they are different do some stuff
  }
}

componentWillReceiveProps(newprops) {
  if(newprops.active === this.props.active) { return }
    //if they are different do some stuff
  }
}