Question

我在状态为shouldComponentUpdate的React应用上实现loadingData时遇到麻烦。我要防止当nextProps尚未从this.props更改而正常工作并且将loadingData的值弄乱了一些，但我找不到原因的时候，再次加载组件。

即使Redux中的数据（nextProps和this.props）没有变化，为什么loadingData最终还是true？

  constructor(props){
    super(props)
    this.state = {
      loadingData: false,
    }
  }

  async componentDidMount() {
    this._isMounted = true;
    const { username } = this.state
    this.setState({ loadingData: true })

    try {
      await this.props.getUserData(username)
      this.setState({ loadingData: false })
    } catch (err) {
      console.log(err)
      this.setState({ loadingData: false })
    }
  }

  shouldComponentUpdate(nextProps, nextState) {
    return this.props !== nextProps
  }

render() {
  return(
    <div>{this.state.loadingData ? "Loading..." : this.props.userData}</div>
  )
}

更新了代码，以显示我如何设置loadingData状态。出于某种原因，添加shouldComponentUpdate会在屏幕上显示“正在加载...”，而不是Redux的userData。我不确定为什么...

Answer 1

这将始终返回false，因为每个渲染之间的this.props与nextProps是不同的对象。

最简单的例子：

console.log({} === {}) // false

默认情况下（如果使用React.PureComponent），React将执行“浅相等性”检查。它将检查每个道具的相等性（但由于性能原因不会递归地进行检查）。（see the source）。

作为第一次尝试，您是否尝试过使用React.PureComponent代替React.Component？

如果那没有帮助，我建议您共享整个代码段。 shouldComponentUpdate通常被认为是“代码异味”，通常意味着代码的另一部分存在问题。它不应用作控制流，而应仅用作性能优化的。

如果您仍然必须实现shouldComponentUpdate，take a look at the default shallowEqual helper，以获取一些启发。

Answer 2

也许您应该仔细阅读。

var jangoFett = {
    occupation: "Bounty Hunter",
    genetics: "superb"
};

var bobaFett = {
    occupation: "Bounty Hunter",
    genetics: "superb"
};

var callMeJango = jangoFett;

// Outputs: false
console.log(bobaFett === jangoFett);

// Outputs: true
console.log(callMeJango === jangoFett);

React在加载状态下在我的React应用上实现shouldComponentUpdate

2 个答案: