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