在没有状态管理库的情况下在客户端上管理React服务器状态

时间:2020-09-04 21:54:33

标签: javascript reactjs server-side-rendering react-context

描述这种典型的React SSR场景:

  • React应用程序已在服务器上呈现
  • 提供数据以呈现应用程序
  • 在服务器上渲染应用程序后,用于执行服务器端渲染的数据将传递给客户端进行水化处理。它作为JSON Blob在页面上提供。
  • 由我们决定如何在客户端上管理对该状态的进一步修改

问题:我们如何最好地从客户端的初始形式修改数据?

示例1 :服务器上显示的页面显示了10个用户。然后,客户端异步加载下一个10。新的10个需要与最初的10个合并。

示例2:服务器上呈现的用户名在客户端中得到更新。原始值需要更改。

这里有一些选择:

1-使用状态管理库(例如Redux)。提供给客户端的数据被泵送到Redux存储中,这成为事实的唯一来源,并且所有更新都是通过Redux动作/化简器等来完成的。我想避免使用Redux。该应用程序不够复杂,无法使用Redux。

2-通过props将初始服务器提供的数据从顶层传递到子组件中。子组件可以读取该数据,但它是只读的。如果要修改它,则需要对其进行复制并将其存储在本地状态/上下文中。然后,您将数据复制到两个位置。原始数据属性和容纳更新数据的新状态/上下文位置。这使我感到不理想。

3-使用React Context,并使用服务器中的数据作为上下文的初始值,将组件包装在各种提供程序中。如果需要更改数据,则可以通过上下文提供者提供的set方法来完成。不利之处在于重新渲染和其他复杂性。

我在这里还有其他选择或事情吗?

0 个答案:

没有答案