问题标签 [react-lifecycle-hooks]

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 投票
1 回答
3383 浏览

reactjs - 你将如何在 React 中使用 useEffect 实现 shouldComponentUpdate?

我正在阅读 React 文档,它建议如果你有一些会经常更改的道具,那么应该使用一个好的生命周期方法是shouldComponentUpdate

我的问题是您将如何将useEffect方法与如下功能组件一起使用?

这是我的功能组件:

这是我的看法,但它没有用!哈!有没有人可以提供见解?

更新 我遵循了舒巴姆的处方——但遇到了这个?

在此处输入图像描述

所以我这样做了......但它感觉很hacky:我想它不是因为我正在利用词汇范围

0 投票
1 回答
8875 浏览

reactjs - 如何通过反应钩子在功能组件中使用componentWillUpdate?

如何通过 react hooks 在功能组件中使用 componentWillUpdate?

0 投票
1 回答
134 浏览

reactjs - 为什么 componentDidUpdate 重复执行

我正在尝试在提交时显示用户注释。在 componentDidMount 上,我正在向服务器发送一个 GET 请求以最初显示数据。当用户提交新评论时,我在 componentDidUpdate 上检查 prevState。如果发现任何差异,它应该从服务器加载新数据。

但是在 componentDidUpdate 内部,连续请求正在发送到服务器。

到目前为止我做了什么

成功提交评论后,我收到来自服务器的响应,例如 {"status":"success"}

对于状态管理,我使用 Redux。

但在 componentDidUpdate 内部,它正在向服务器发送连续请求,导致应用程序崩溃。有人可以解释一下我在这里做错了什么吗?

0 投票
3 回答
1774 浏览

javascript - 渲染将在 React 组件中实际运行多少次

当我偶然发现这个时,我正在使用 React LifeCycle 方法:

在此处输入图像描述

当我看到 render() 函数运行 2 次时,我感到很困惑。我所知道的是React Life-Cycle中的任何函数都只运行一次。那么,为什么我在这里看到 2 个渲染函数(或运行 2 次)。它不会影响第二次运行的内存和过度使用。

此外,我们如何知道渲染函数将在哪里运行(或在什么阶段),因为它可以在React Cycle的两个地方运行。金迪,帮忙澄清一下。

参考:

https://gist.github.com/bvaughn/923dffb2cd9504ee440791fade8db5f9

0 投票
2 回答
136 浏览

reactjs - 如何更新道具依赖状态

我有连接到 redux 存储的组件,它从道具获取数据:

组件有自己的状态:

我需要state.pageCountprops.rowData变化时计算新的。我该怎么做?

0 投票
1 回答
48 浏览

javascript - 子组件的 setState 仅在被调用时

我有一个父组件,我已经像这样在其 HTML 中调用了子组件。

EditBank 组件是一种模式,仅在editBankModalStatus为 true 时显示,并且在单击按钮时设置为 true。

现在我只想在单击按钮并且将任何 bankDetails 传递给它时设置 EditBank 的状态。
我已经厌倦了 componentDidMount 生命周期钩子,但它仅在组件渲染时更新。

当 EditBank 组件仅显示在屏幕上时,我想更新它的状态。任何帮助表示赞赏。

0 投票
1 回答
190 浏览

reactjs - 如何在基本应用程序组件中使用 GraphQL 挂钩进行响应而不重新渲染?

我正在尝试 const sliceQuery = useQuery(ALL_SLICES)在 React 上将 redux 与 GraphQL 一起使用,但由于 GraphQL 钩子及其承诺,我似乎无法使用 useEffect 来最小化渲染Object { data: {}, variables: {}, refetch: (), fetchMore: (), updateQuery: (), startPolling: (), stopPolling: (), subscribeToMore: (), loading: true, networkStatus: 1, … }。因此,我不得不在props.slicesuseEffect 之外进行更新,因为我必须等待 GraphQL 挂钩完成以下内容的加载:

这是我完整的 App.js 组件:

这是页面加载的控制台日志:

开发服务器已断开连接。如有必要,刷新页面。

[HMR] 等待来自 WDS 的更新信号...

App.js 运行

./src/App.js 第 1:17 行:'useEffect' 已定义但从未使用 no-unused-va

警告:渲染方法应该是 props 和 state 的纯函数;不允许从渲染触发嵌套组件更新。如有必要,在 componentDidUpdate 中触发嵌套更新。检查 App 的渲染方法。

App.js 运行

App.js 运行

App.js 运行

0 投票
1 回答
89 浏览

reactjs - React Lifecycle- The plot is drawn using the initial state value, and not using the fetched value

I want to fetch the value of the variable 'r2score' from flask. The value is fetched successfully. I even wote a console.log(r2score) statement to see if the fetching works. Here's the problem. Initially it logged a value of 0.1, which is its initial state. then in the next line of the console it logged a value of 0.26, which the value that was fetched from flask. So atleast the fetching was successful. However, the plot that is being drawn, is drawn with a value of 0.1(it's initial state) and not 0.26(it's fetched value).

My Code:

Console Image

React Dev Tools

0 投票
0 回答
54 浏览

reactjs - 如何在与 redux 的反应中获取数据

我不明白为什么我一开始得到 undefined 之后我得到正确的数据,也因为我在 componentDidMount() 中得到 undefined 我无法在这里收集数据所以如果有人知道如何解决这个问题请帮助我,我也使用redux-dev-tools 在那里我得到了正确的数据,但是在控制台上我得到了如下所示的数据

动作.js

减速器.js

组件概览.js

我得到下一个结果,

0 投票
1 回答
284 浏览

reactjs - React hook userRender 调用了两次

我不确定这是否是预期的行为,但是如果您在使用 useReducer 时退出调度( https://reactjs.org/docs/hooks-reference.html#bailing-out-of-a-dispatch )钩子,如果后面跟着渲染,动作会发生两次。让我解释:

当您单击按钮时,state.test 增加 2,而 totalClicks 增加 1。但是,如果我要更改减速器,使其不会像下面那样保释,它们都会增加 1。

为什么是这样?这是预期的行为还是错误?沙盒示例:https ://codesandbox.io/s/sad-robinson-dds63?file=/src/App.js


更新: 在做了一些调试之后,看起来这种行为只在用React.StrictMode包装时发生

有谁知道这是什么原因???