关于前端:小程序填坑记-子组件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...