注意:我没有使用Redux(仅上下文+挂钩(
简介
我有一个屏幕">配置文件";,渲染选项卡视图。
此选项卡视图将两个组件渲染为场景:
- 用户帖子
- 用户信息
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()
作为道具。