栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

ReactJS:为什么将组件的初始状态传递为prop是反模式?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

ReactJS:为什么将组件的初始状态传递为prop是反模式?

免责声明 :当我回答这个问题时,我正在学习/尝试实现Vanilla
Flux,对此我有些怀疑。后来我将所有内容迁移到Redux。因此,建议:只需使用Redux或MobX。您甚至可能不再需要该问题的答案(科学除外)。

将初始状态作为a传递给组件

prop
是一种反模式,因为该
getInitialState
方法仅在组件首次呈现时才调用。这意味着,如果重新渲染该组件并传递一个
不同的 值a
prop
,则该组件将不会做出相应的反应,因为该组件将从首次渲染起就保持该状态。这很容易出错。

这是您应该做的:

尝试使您的组件尽可能无状态。无状态组件更易于测试,因为它们基于 输入* 呈现 输出 。这样简单。 *

但是,嘿..我的组件数据发生了变化..我无法使它们成为无状态

是的,您可以,对于大多数人来说。为此,请选择一个外部组件作为状态持有者。使用您的示例,您可以创建一个

Dashboard
包含数据的
Widget
组件,以及一个完全无状态的组件。该
Dashboard
负责获取所有数据,然后呈现多个
Widgets
接收他们需要通过一切
props

但是我的窗口小部件具有某种状态。用户可以对其进行配置。 我如何使它们无状态?

Widget
可以公开事件,这些事件在处理后会导致其中包含的状态
Dashboard
发生更改,从而导致每个事件都被
Widget
重新呈现。您可以
Widget
通过
props
接收事件来创建“事件”

好的,所以现在,仪表板保留状态,但是如何将初始状态传递给它?

您有两个选择。最推荐的

Dashboard

getInitialState
方法是,您在方法中进行Ajax调用以从服务器获取初始状态。您还可以使用Flux,这是一种用于管理数据的更复杂的方法。助焊剂更多是一种模式,而不是一种实现。您可以在Facebook的实现中使用纯Flux
Dispatcher
,但可以使用Redux,Alt或Fluxxor等第三方实现。

或者,您可以将此初始状态作为传递

prop
给,例如
Dashboard
,明确声明这只是初始状态
initialData
。但是,如果选择此路径,则无法向后传递不同的初始状态,因为它会“记住”第一次渲染后的状态。

OBS

您的定义不太正确。

状态 用于存储可变数据,即在组件生命周期中将要更改的数据。状态的更改应通过

setState
方法进行,并将导致组件重新呈现。

道具 用于将不可更改的数据传递到组件。它们在组件生命周期中不应更改。仅使用道具的组件是无状态的。

这是“如何将初始状态传递给组件”的相关资料。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/448869.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号