Question

我使用的是react.js v 16.3，我对getDerivedStateFromProps感到困惑。

我想更新state，但我希望仅在初始渲染时对状态进行特定更改。我怎么能确定 - 首先是渲染还是不渲染？

Answer 1

getDerivedStateFromProps有两个参数：nextProps和prevState。您可以检查prevState以确定它是否是初始渲染。

基本上，prevState在null次通话中为getDerivedStateFromProps。所以，你可以很容易地做到：

static getDerivedStateFromProps(nextProps, prevState) {
  if (prevState === null) { return whatever_you_want } 
}

如果组件中存在某种默认状态，则可以将其提取到变量：

const INITIAL_STATE = { sentence: 'bla-bla-bla' }

class Paragraph extends React.Component {
  state = INITIAL_STATE

  static getDerivedStateFromProps(nextProps, prevState) {
    if (prevState === INITIAL_STATE) { return whatever_you_want }

    ...
  }

  ...
}

Answer 2

即使您使用 getDerivedStateFromProps 来计算您的状态，您也应该始终在构造函数中设置您的初始状态。如果你不这样做，React 实际上会抱怨——见下面的例子：

class Foo extends Component {
  constructor(props) {
    super(props)
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    setState({bar: 10})
  }
}

这将导致以下警告：

Foo 使用 getDerivedStateFromProps 但其初始状态未定义。不建议这样做。相反，通过在 this.state 的构造函数中将对象分配给 Foo 来定义初始状态。这可确保 getDerivedStateFromProps 参数具有一致的形状。

这意味着检查 prevState 是否未定义不是一个可行的选项，因为在构造函数中设置状态是一个很好的做法。相反，您可以检查 bar 是否具有有效值或使用某种标志：

class Foo extends Component {
  constructor(props) {
    super(props)
    this.state = {
      bar: 0,
      inited: false
    }
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    if(prevState.inited) {
      setState({
        bar: 20
      })
    } else {
      setState({
        bar: 10,
        inited: true
      })
    }
  }
}

我怎么知道它在`getDerivedStateFromProps` react.js生命周期中的初始渲染？

2 个答案: