Question 1

componentWillReceiveProps被depcricated因为react16：使用getDerivedStateFromProps代替

如果我理解正确，您有一个父组件传递start_time给ModalBody组件，该组件将其分配给自己的状态？并且您想从父组件而不是子组件更新该时间。

React 有一些处理这种情况的技巧。（请注意，这是一篇已从网络上删除的旧文章。这是当前组件 props 文档的链接）。

使用props生成状态getInitialState通常会导致“真实数据来源”的重复，即真实数据在哪里。这是因为getInitialState仅在首次创建组件时调用。

只要有可能，即时计算值以确保它们以后不会失去同步并导致维护麻烦。

基本上，每当您将父级分配给props子级时state，渲染方法并不总是在props更新时调用。您必须使用该componentWillReceiveProps方法手动调用它。

componentWillReceiveProps(nextProps) {
  // You don't have to do this check first, but it can help prevent an unneeded render
  if (nextProps.startTime !== this.state.startTime) {
    this.setState({ startTime: nextProps.startTime });
  }
}

Question 2

显然事情正在发生变化...... getDerivedStateFromProps()现在是首选函数。

class Component extends React.Component {
  static getDerivedStateFromProps(props, current_state) {
    if (current_state.value !== props.value) {
      return {
        value: props.value,
        computed_prop: heavy_computation(props.value)
      }
    }
    return null
  }
}

Expand snippet

（以上代码由 danburzo @ github 提供）

Question 3

componentWillReceiveProps 正在被弃用，因为使用它“通常会导致错误和不一致”。

如果外部发生了变化，请考虑使用key.

为key子组件提供prop 可确保每当key外部的值发生变化时，都会重新渲染此组件。例如，

<EmailInput
  defaultEmail={this.props.user.email}
  key={this.props.user.id}
/>

关于它的表现：

虽然这听起来可能很慢，但性能差异通常是微不足道的。如果组件具有在更新时运行的大量逻辑，则使用键甚至可以更快，因为该子树绕过了差异。

Question 4

这样做的新钩子方法是使用 useEffect 而不是 componentWillReceiveProps 的旧方法：

componentWillReceiveProps(nextProps) {
  // You don't have to do this check first, but it can help prevent an unneeded render
  if (nextProps.startTime !== this.state.startTime) {
    this.setState({ startTime: nextProps.startTime });
  }
}

在功能钩子驱动组件中变为以下内容：

// store the startTime prop in local state
const [startTime, setStartTime] = useState(props.startTime)
// 
useEffect(() => {
  if (props.startTime !== startTime) {
    setStartTime(props.startTime);
  }
}, [props.startTime]);

我们使用 setState 设置状态，使用 useEffect 我们检查指定props的更改，并在props更改时采取行动更新状态。

Question 5

还有componentDidUpdate可用。

函数签名：

componentDidUpdate(prevProps, prevState, snapshot)

以此为契机，在组件更新后对 DOM 进行操作。不会在 initial 上被调用render。

见你可能不需要派生状态文章，它描述了componentDidUpdate和的反模式getDerivedStateFromProps。我发现它非常有用。

Answer 1