javascript - 将新 Prop 合并到状态中的正确方法

Question

我目前正在使用react-big-calendar开发日历组件。

我目前有一个包装器，可以从数据库中提取数据并将其发送到日历组件中。不过，我正在开发一项功能，可以从任何地方将日历事件“发送”到该组件。

目前我只有用例，来自网站的内置通知系统，将有一个功能可以将外部事件作为通知发送到您自己的日历中。 不过，我可能想通过我的套接字服务器 (socket.io) 将事件从另一个 Web 应用程序推送到用户日历。

从技术上来说，我不确定在 React 中“正确”的处理方式是什么。

我现在的做法是添加

 static getDerivedStateFromProps(nextProps, prevState){
    if(nextProps.propInput === true){
        nextProps.reset()
        return {events : {...prevState.events, ...nextProps.events}}
    } else return null
}

在我的 CalendarWrapper 中，它基本上为我执行以下操作: 1)我更新发送到包装器的 Prop ，无论是从父组件还是从 redux 存储(我将使用第二个) 2) 这会触发 getDrivedStateFromProps 并检查它是否接收到 propInput 为 true，如果是这样，它将作为 props 向下发送的新事件合并到日历的当前事件中。 3) 然后它运行一个回调函数(nextProps.reset())，将 propInput 重置为 FALSE，这会触发 getDrivedStateFromProps 的另一次运行，但这次返回 null 并且不会导致新的 setState。

这是我自己梦想的解决方案，涉及如何将新事件从 redux 存储推送到此日历包装器。这似乎很不正统，但对我来说，这是获得纯 redux 和所有内容都保存在 redux 中的中间立场，并拥有每个组件的本地状态的唯一方法。

有没有技术上更好、更有效的方法来解决这个问题？

提前致谢。

Answer 1

我会保存发送到 redux 的新事件的时间戳(而不是 bool 值 propInput)。比较“上次更新时间”足以做出更新决定 - 无需清除 propInput 标志(没有 reset() 调用...reducers...等。 )。

您甚至不需要将此时间戳存储在状态中 - 无需使用 getDerivedStateFromProps (“在每次渲染时触发，无论原因如何”)- 经典解决办法:

componentDidUpdate(prevProps) {
  if (this.props.newEventsTime !== prevProps.newEventsTime) {
    setState({events : {...this.state.events, ...this.props.newEvents}})
  }
}

应该更优化

shouldComponentUpdate(nextProps, nextState) {
  if (nextProps.newEventsTime !== this.props.newEventsTime) {
    setState({events : {...this.state.events, ...this.props.newEvents}});
    return false; // no render needed in this pass
  }
  return (nextState.events === this.state.events) ? false : true;
}

- 更新事件对象引用更改。