小程序填坑记 ， 子组件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 ?  {  this.renderIdCardBtn()} :null
        }
        
        
        //方法操作了state
          renderIdCardBtn() {
    //  调解中又有签字又有上传身份证的时候优先展示上传身份证，上传提交完再展示签字入口
    const { caseStatus, cardsContent } = this.state
    let viewBox    
    if (cardsContent.idCardStatus === 1 && caseStatus == 30) {
      this.setState({
        isShowIdBtn: true
      }, () => {
        viewBox = (
          
            上传本人身份证
          
        )
      })
    } 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...