关于前端:小程序填坑记-子组件componentWillReceiveProps一直触发打印

背景：父组件a传值给子组件b ，当a跟新数据的时候b组件就从新渲染，然而我发现及时没有扭转传递给b组件的值，b组件的componentWillReceiveProps钩子函数还是始终打印 。

子组件
  componentWillReceiveProps(nextProps) {
    if (nextProps.timeAxisArr.toString() != this.props.timeAxisArr.toString()) {   //没变动就不要动啦
      console.log('变动啦');
      if (nextProps.timeAxisArr.length > 5) {
        this.setState({
          timeAxisArrNomore: nextProps.timeAxisArr.slice(0, 5),
          statusMore: 'more',
        })
      } else {
        this.setState({
          timeAxisArrNomore: nextProps.timeAxisArr,
          statusMore: 'noMore',
        })
      }
    } else {
      console.log('没有变动');
    }
  }

父组件因为在render（）中调用了renderIdCardBtn（） ， 这个函数中操作了state值

  {/* 上传身份证按钮 ，优先展现上传身份证按钮 在展现签字按钮 */}
        {
         cardsContent.idCardStatus===1 && caseStatus ==30 ? <View> {  this.renderIdCardBtn()}</View> :null
        }
        
        
        //办法操作了state
          renderIdCardBtn() {
    //  调解中又有签字又有上传身份证的时候优先展现上传身份证，上传提交完再展现签字入口
    const { caseStatus, cardsContent } = this.state
    let viewBox    
    if (cardsContent.idCardStatus === 1 && caseStatus == 30) {
      this.setState({
        isShowIdBtn: true
      }, () => {
        viewBox = (
          <View style="height:80rpx;">
            <AtButton className='fixedBottomBtn' type='primary' onClick={this.uploadIdCard.bind(this)}>上传自己身份证</AtButton>
          </View >
        )
      })
    } else {
      this.setState({
        isShyowIdBtn :false })
    }
    return viewBox
  }

起初查阅一些材料之后：发现我在render（）中操作了state外面的值，所以导致始终刷新。
componentWillReceiveProps ：当props发生变化时执行，初始化render时不执行，在这个回调函数外面，你能够依据属性的变动，通过调用this.setState()来更新你的组件状态，旧的属性还是能够通过this.props来获取,这里调用更新状态是平安的，并不会触发额定的render调用

render()办法是很污浊的，这就意味着不要在这个办法里初始化组件的state，每次执行时返回雷同的值，不会读写DOM或者与服务器交互，如果必须如服务器交互，在componentDidMount()办法中实现或者其余生命周期的办法中实现，放弃render()办法污浊使得服务器更精确，组件更简略

参考:
https://blog.csdn.net/wangche…
https://blog.csdn.net/halo141…