如何避免react(dva.js)多次渲染？

Question

问题描述：
当在浏览器中刷新页面时，如下示例代码：

class Test extends Component {

  constructor(props) {
    super(props)
    this.state = {}
  }

  componentWillMount() {
    // 获取所有活动数据
    ...code
  }


  render() {
    const { Test } = this.props;
    
    console.log(Test)
    
    return (
      <div>
          <span>这是一段测试代码</span>
      </div>
    )
  }

会发现在浏览器后台打印出多次Test，其中前几次多为空对象，那么应该如何避免这种情况呢？

Answer 1

shouldComponentUpdate 是可以控制是否渲染更新的

class Test extends Component {

  constructor(props) {
    super(props)
    this.state = {}
  }

  componentWillMount() {
    // 获取所有活动数据
    ...code
  }

  shouldComponentUpdate(nextProps) {
    if (isEqual(nextProps.Test, this.props.Test) {
        return false
    }
  }

  render() {
    const { Test } = this.props;
    
    console.log(Test)
    
    return (
      <div>
          <span>这是一段测试代码</span>
      </div>
    )
  }

Answer 2

1、如果代码结构正确，这种多次渲染并不会存在问题（没获取到数据之前为空，得到数据再次渲染，正常现象），当然如果没正确控制好代码渲染，就会带来各种bug
2、如果想减少不必要渲染，使用shouldcomponenmtupdate

Answer 3

Test来自于props，父组件传过来的，和自己无关， 渲染的时候，给个空值判断就好了吧

Answer 4

PureComponent

Answer 5

如果是函数组件，可以看看 Reac.memo