React-在父级或子级中获取数据



注意:我没有使用Redux(仅上下文+挂钩(

简介

我有一个屏幕">配置文件";,渲染选项卡视图

此选项卡视图将两个组件渲染为场景:

  1. 用户帖子
  2. 用户信息

My Profile屏幕,从我的数据库中获取用户数据,因为它必须呈现一些依赖于这些数据的内容。

而且,它是通过道具传给我的">用户信息";组件,因为它只是呈现用户数据。所以…在我的">用户信息";组成部分

另一方面,我的">UserPosts";组件负责获取用户帖子UserPostsGrid";它用分页(无尽的平面列表(来渲染这些帖子。

注意:数据提取是在自定义挂钩中执行的,而不是直接在内部执行组件(同时,这些钩子管理各自的状态数据(。

问题

主要问题出现在我需要刷新用户数据的用户帖子配置文件";屏幕

这个屏幕获取用户数据没有问题配置文件";屏幕负责那个动作。

但这些帖子是我孩子的状态数据。。。

多种解决方案

我曾想过使用当前的解决方案来解决这个问题:

React.forwardRef() + React.useImperativeHandle()

有了这一点,我将能够将裁判传给我的">UserPosts";并使用命令式编程访问数据获取方法:userPostsRef.current.refreshPosts();

我从未见过解决这个问题的其他方案,但它应该有效。相反,其他编码程序实现了ContextProvider来处理所有数据,并能够在任何地方访问数据。我在这里注意到的主要问题是:额外的记忆+额外的重新渲染。

另一种解决方案可能是在父级中实现所有的数据获取,并通过props将相应的回调传递给子级。我在这里注意到的主要问题是;God组件";我们可能有多行代码。。。

我的问题

实现第一个解决方案是反模式还是不良做法

要回答您的问题:

是的,它是React中的一个反模式,因为React是围绕着这样一个想法构建的,即指定应用程序的状态,然后让React根据给定的状态渲染组件。

如果某个状态发生了更改,您应该指定一个新的状态来表示与旧状态的差异。

只有在没有其他选项的情况下才应使用引用。基本上,如果你使用Ref,你会说";我不想对我代码的这一特定部分使用React;。

和往常一样,在大多数情况下应该避免使用引用的命令式代码

要使用状态而不是命令:

我会通过尝试命令式操作转换为某种信息状态来解决这类问题。

  • 用户说"给我最新的数据";,这是一个命令,即命令
  • 现在我会问";用户现在告诉我的数据状态是什么">
  • 答案是";该数据不再是最新的";,这可以表现为一种状态,并通过道具传递

问题的解决方案:

例如,您可能使用一个道具needsUpdate,当数据应该更新时,它被设置为true,而当数据被提取时,它则被设置为false

为了避免不必要的渲染(设置needsUpdate = false会导致另一个调用,例如useEffect,即使那里什么都没发生(,我可能会使用像latestUpdateRequest这样的子组件道具和像latestUpdate这样的子状态,后者保存计数器或时间戳,然后比较if(latestUpdateRequest > latestUpdate)

要通知父级更改,只需传递一个回调函数,如dataUpdated()作为道具。

相关内容

  • 没有找到相关文章

最新更新