问题标签 [react-lifecycle]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
3 回答
2853 浏览

javascript - 当状态/道具父组件发生变化时,如何防止子组件重新渲染?

现在我有这样的树组件

我从 UserOrderApproval 组件中的 redux 获取道具,并将该道具传递给每个子组件。问题是,当子组件在 redux 中进行一些更改时,来自 UserOrderApproval 组件的状态将发生变化并使所有子组件重新渲染并使组件生命周期再次运行。如何防止这种情况?

像这样将 props 从父级传递给嵌套子级的最佳实践是什么?

非常感谢

0 投票
1 回答
494 浏览

javascript - 未捕获的 RangeError:超出最大调用堆栈大小 - ReactJS

我已经检查了所有像我这样的问题,但找不到任何对这种情况有用的东西。

请帮忙。

这是我的功能:

使用地点:

这会生成以下消息:

它可能与 React 中的生命周期有关,但我不确定。

例如,当我检查:

它们看起来一样。

谢谢。

编辑:

checkForChange()从表单获取值并使用以下方法设置更新状态:

我相信问题在于每次更改的更新..即使我移动鼠标它也会不断更新。

0 投票
1 回答
2780 浏览

reactjs - 使用服务器端渲染获取数据的正确方法(Next.js,何时使用 componentDidMount 以及何时使用 componentWillMount)

我正在使用 Next.js,在 _app.js 页面(我们在其中设置一般 webapp 状态)我有 2 种类型的数据,我需要在标题中拥有(因此对于每个组件)。

1)第一种类型是标题信息,此信息应在应用加载之前呈现。我将使用 get getInitialProps 调用端点并将它们放入 props 中,然后再到 componentWillMount 中将它们添加到状态中。

2)第二种类型是搜索组件的数据,它是很多数据,我不特别介意在应用程序已经呈现时加载它,因为它没有显示在第一个用户视觉中。所以我猜测这里最好使用 componentDidMount 和 asynchorslly 调用获取 serach 对象数据的端点,而不是使用它添加设置状态。

这个问题的目的是双重的:

1) 回顾 - 我是否正确地考虑了这一点,还是我错过了什么?

2)问题 - 现在,当数据在第一次渲染后加载时,我像这样传递数据:_app.js -> Layout -> Menu -> SearchBar 所以我的问题是,在我的 searchBar 我需要做类似的事情

但是,因为 _app.js 正在使用异步调用填充这些数据,这是否意味着我将始终得到一个空对象?W解决这个问题的正确方法是什么?如果我将 TimeOut 设置为 3 秒左右,然后设置数据是正常的解决方案还是非常hacky,还有更好的方法吗?

0 投票
1 回答
4992 浏览

reactjs - 反应:在渲染()之后和孩子的构造函数()之前的函数调用

我有一个名为Parent的组件,其中还有另一个名为Child的组件:

所以生命周期如下:

  1. 父构造函数
  2. 父母的渲染()
  3. 子构造函数
  4. 孩子的渲染()
  5. 孩子装上了
  6. 已安装父级

我可以在步骤 2 之后和步骤 3 之前以某种方式进行额外的父初始化吗?

更新:

在这里我做了一些简化——我不只是改变元素的颜色,我可以在componentDidMount()方法中做到这一点。相反,ThirdPartyLib细节决定了初始化顺序。在创建任何子元素之前,我必须在父元素出现在 DOM 之后立即对其进行初始化。

更具体地说,ParentChild共享完全相同的ThirdPartyLib类实例。我无法将初始化逻辑放入 Parent 的render()函数中,因为该元素尚未在 DOM 中。同样,我无法按照评论中的建议初始化 'sParent之前,因为's在 's之前执行。ChildcomponentDidMount()ChildcomponentDidMount()Parent

0 投票
4 回答
1033 浏览

reactjs - 为什么每当父状态发生变化时,组件更新生命周期就会执行?

我有一个名为“App”的父组件,其中使用了一个名为“NewComp”的子组件。我在子组件中定义了 componentDidUpdate() 生命周期,而不是在父组件中。

父组件:

子组件:

现在每次我通过“添加计数”按钮更改父状态时,即使子组件没有更改,子组件中的 componentDidMount() 也会执行

0 投票
2 回答
1415 浏览

reactjs - 如何修复递归更新状态?

我正在使用 newsapi 构建一个应用程序。我在我的州面临两个问题。我使用 api 获取数据并将其分配给我的状态。并在我看来使用它。

第 1 期

我的视图在我的应用接收数据之前被渲染。

第 2 期

当我尝试在新获取后更新我的状态时。它一次又一次地递归更新数据集。

请帮我解决这个问题。

0 投票
2 回答
52 浏览

reactjs - react组件渲染函数指的是哪个DOM?现实世界还是虚拟世界?

我读过很多文章,相信这个问题不是重复的。

根据react 组件中的 render() 函数的作用是什么?

render 函数是 react 组件生命周期的一部分,其中 ReactDOM 是类对象,它公开了一个名为 render 的方法,该方法用于将 React JSX 内容渲染到您的 DOM 中。

而且我还阅读了许多文章,这些文章解释了反应虚拟 dom 的工作原理,它在将其节点渲染到真实 dom 之前使用 diff 过程。

所有文章(至少我读过的)都提到 render() 反映dom

我想知道这domreal-dom还是virtual-dom

实际上我在理解componentDidUpdate()之后立即调用它时遇到了一些麻烦,意识到我对组件的功能render()缺乏了解render

感谢您的帮助

0 投票
1 回答
804 浏览

javascript - 反应:setState 没有再次呈现页面

我正在为 React 和生命周期而苦苦挣扎。我尝试实现一个非常简单的 Next 按钮,它显示带有下一组项目的下一页。当我手动将状态偏移更改为 3 时,页面将正确呈现下一项。但是当我通过按钮使用 setState 时,不会加载新项目。我认为它与生命周期有关,但我还不明白。

0 投票
4 回答
81715 浏览

javascript - componentWillUnmount 与 React useEffect 挂钩

如何使用useEffect钩子(或任何其他钩子)进行复制componentWillUnmount

在传统的类组件中,我会做这样的事情:

useEffect钩子:

(完整示例:https ://codesandbox.io/s/2oo7zqzx1n )

这不起作用,因为返回的“清理”函数会useEffect捕获安装期间的道具,而不是卸载期间道具的状态。

如何在每次道具更改时运行函数体(或清理)的useEffect情况下获得最新版本的道具?

一个类似的问题没有解决访问最新道具的部分。

反应文档状态:

如果你想运行一个效果并且只清理一次(在挂载和卸载时),你可以传递一个空数组([])作为第二个参数。这告诉 React 你的效果不依赖于任何来自 props 或 state 的值,所以它永远不需要重新运行。

但是在这种情况下,我依赖于道具......但仅限于清理部分......

0 投票
2 回答
1178 浏览

reactjs - 当我有 `display: none` 时调用 ComponentDidMount 函数

我根据display属性有条件地渲染模态组件。

我需要在组件show/上实现切换正文滚动功能hide

见下面的实现,

演示组件

模态组件

但问题是在显示模态之前调用了 componentDidMount 函数。我希望在显示模态后调用它

隐藏 Modal 时应调用 componentWillUnmount。