在SocketIO的帮助下,我为实时更新创建了一个小的ReactJS仪表盘.尽管我更新了仪表板,但我不太确定是否正确,这让我很恼火.

最让我困扰的是Props in getInitialState as anti-pattern篇帖子.我创建了一个仪表板,可以从服务器获取实时更新,除了加载页面之外,无需用户交互.从我读到的内容来看,this.state应该包含决定组件是否应该重新渲染的内容,this.props....我还不知道.

但是,当您最初呼叫React.render(<MyComponent />, ...)时,您只能传递props .在我的例子中,我从服务器获取所有数据,所以最初的props 最终只会出现在this.state中.所以我所有的组件都是这样的:

getInitialState: function() {
    return {
        progress: this.props.progress,
        latest_update: this.props.latest_update,
        nearest_center: this.props.nearest_center
    }
}

除非我误解了前面提到的博文,否则这是一种反模式.但我看不到其他将状态注入组件的方法,我不明白为什么这是一种反模式,除非我重新标记所有props ,在它们上预先添加initial.如果有什么区别的话,我觉得that's是一种反模式,因为现在我必须比以前跟踪更多的变量(那些预先设置了initial,而那些没有).

推荐答案

Disclaimer:当我回答这个问题时,我正在学习/试图

将初始状态作为prop传递给组件是一种反模式,因为只有在组件第一次渲染时才会调用getInitialState方法.这意味着,如果将通过different值的组件重新渲染为prop,该组件将不会做出相应的react ,因为该组件将保持第一次渲染时的状态.这很容易出错.

下面是你应该做的:

尽量使组件无状态.无状态组件更容易测试,因为它们基于input呈现output.就这么简单.

But hey.. my components data change.. I can't make them stateless

是的,你可以,对大多数人来说.为此,请 Select 一个外部组件作为状态持有者.使用您的示例,您可以创建一个包含数据的Dashboard组件,以及一个完全无状态的Widget组件.Dashboard负责获取所有数据,然后呈现多个Widgets,这些Widgets通过props接收他们需要的一切.

But my widgets have some state.. the user can configure them. How do I make them stateless?

您的Widget可以公开事件,当处理这些事件时,会导致Dashboard中包含的状态发生更改,从而导致每Widget个事件都被重新提交.通过让props个接收函数,可以在Widget中创建"事件".

Ok, so now, Dashboard keeps the state, but how do I pass the initial state to it?

你有两个 Select .最受推荐的方法是,在Dashboard getInitialState方法中进行Ajax调用,以从服务器获取初始状态.您还可以使用Flux,这是一种更复杂的数据管理方式.流量更多的是一种模式,而不是一种实现.您可以在Facebook的Dispatcher实现中使用pure Flux,但也可以使用第三方实现,比如ReduxAltFluxxor.

或者,您可以将这个初始状态作为prop传递给Dashboard,明确声明这只是初始状态..比如说initialData.但是,如果 Select 此路径,则不能向后传递不同的初始状态,因为它将在第一次渲染后"记住"状态.

OBS

你的定义不太正确.

State用于存储可变数据,即在组件生命周期中将要更改的数据.状态的更改应通过setState方法进行,并将导致组件重新渲染.

Props用于向组件传递可模拟数据.它们不应在部件生命周期 周期内发生变化.只使用props 的组件是无状态的.

This是"如何将初始状态传递给组件"的相关来源.

Reactjs相关问答推荐

react应用程序中的字体不适用于.scss扩展名

使用setInterval判断数据的时间,然后在过期后从对象中删除;遇到性能问题

我想删除NextJs中的X轴标签APEXCHARTS

这两个子元素在Reaction Native中使用的有什么不同?

蚂蚁 Select .列表弹出窗口不会';有时不会出现

React useEffect 问题...异步函数内的变量正在获取延迟的更新值

ctx.strokeStyle 在 canvas html 5 中不起作用

验证 Yup 中的对象项

React useEffect 依赖项

React Js和Firestore中如何将当前ID与集合中的ID查询以仅显示具有相似字段和值的文档-第二部分

无法设置 null 的属性(设置src)

useEffect 渲染没有依赖数组的组件

在 Nextjs13 应用程序目录中呈现从 supabase 获取的数据

react-router v6 中的 BrowserRouter 和 createBrowserRouter 有什么区别?我可以在不使用数据 API 的情况下使用 createBrowserRouter 吗?

如何在 React map 函数循环中使用
标签

如何保留我的下一个授权用户会话?所以我可以使用提供的 ID 在其他路由中获取数据

Reactjs 表单未反映提交时的更改

React Router 6.4CreateBrowserRouter子元素不显示

如何定制 React 热 toastr ?

如何从另一个切片中的不同切片获取状态并对其进行处理?