问题标签 [rerender]

列表的非常基本的代码示例：

这里是项目：

当我单击按钮时，状态会更新，因此 List 组件会重新呈现。

但是，如果我的理解是正确的，则不应重新渲染这些项目，因为关键项目没有改变。但它确实会重新渲染，因为时间戳已更新。

有人可以解释我为什么吗？

在我的 React App 的根组件中，我有这个：

我注意到当 App 组件通过 setState 或 forceUpdate() 重新渲染时，子组件实际上被重新安装（因此每次更新都会调用 componentWillUnmount、componentWillMount、componentDidMount）。我期望的行为是再次调用 Child 组件的渲染函数。我最近升级到 React-router 4.x，所以我不确定它是否与此有关。

有人可以告诉我这是否是设计使然吗？当我尝试在其中获取数据时，多次调用我的 componentDidMount 会导致一些问题，并且我不想在调整大小期间多次执行该昂贵的操作。

更新：

我找到了这个问题的可能原因。我有多个嵌套组件，由于很难发布整个项目，因此有时很难发布导致问题的实际代码。但我认为就是这样：

在这里，我试图将道具传递给路由中的组件（React-router 4.x），我通过提供一个创建主页的函数来做到这一点，该函数可能在每次渲染时重新创建主页。

所以问题就变成了，如何在路由内的每次渲染时不重新创建页面的情况下传递道具？

按下提交按钮后，我使用获取按钮从 git api 获取有关 git 用户的信息。获取信息后，我将其写入数据库，然后使用 setStateuserIsFetched: true并有条件地渲染组件。

问题是，在我更改状态后，userIsFetched: true我看到了一秒钟我的<Chat />组件，但随后我看到了<Signup />组件。在控制台中，我看到状态已删除。如果我使用 xmlhttprequest 那么它工作正常。为什么会这样？

这是工作示例：https ://codepen.io/RinatRezyapov/pen/WEEqJW

尝试输入 RinatRezyapov 并单击提交。

我正在尝试重新渲染一个 angular 2 html 模板，到目前为止，经过研究我发现我需要使用 NgZone。所以我在做什么，在我的主要组件中我调用导航栏组件，它调用 userdetails 组件。

在 userdetails 组件中显示用户详细信息，也就是名称和内容。我有另一个更改用户名称的组件。因此，当我在那里更改名称时，导航栏（userdetails 组件）上的名称不会更改。

所以我在我的更改详细信息组件中尝试这种方式初始化一个 usedetails 组件并从中调用一个方法，初始化一个 ngZone 并调用 .run() 方法，在该方法中我用新名称更新 curretName ...并登录安慰。

因此，当我在 http 完成后立即更新名称时，我在控制台中收到了新名称，但在导航栏上名称仍然相同。

到目前为止，唯一的解决方案是重新加载窗口……但这对用户不友好，因为用户不会知道更改发生了什么。

所以我跳过了一些东西但是什么？

提前致谢 ！

我还没有找到一篇关于如何做到这一点的文章，所以我想知道在我更改子对象在其父对象中使用的主要对象的情况下，但这种情况发生的方式是没有触发任何方法推荐的触发重新渲染的方法？

我的方法是只传递一个虚拟道具，它会引发“onComponentWillReceiveProps”方法的触发器，在该方法中我将传递的道具与道具进行比较，从而检测到发生了变化，最终将触发该组件的重新渲染（孩子）。

这并没有损坏，也没有什么我只是想我有点把它破解了，想知道是否有一个干净的、推荐的、“反应方式”来解决这个问题。

谢谢

更新：我实际上认为这会起作用，但我的 hack 甚至不起作用。

背景

我正在开发一个基于反应的（MERN.io）项目（Eve's Temptation）。本项目的栈主要有 React、Redux、Webpack、Node 和 Express。在我实现服务器端渲染之后。我发现，在没有良好的网络连接的情况下，用户可以在一些渲染完成后看到全屏空白，然后重新渲染。所以它可能应该是一个重新渲染的问题。我在 MERN.io 上进行了测试，并在服务器端呈现的字符串中添加了一个额外的 div

从：

至：

这可以解决

warning.js?8a56:33 警告：React 尝试在容器中重用标记，但校验和无效。这通常意味着您正在使用服务器渲染，并且在服务器上生成的标记不是客户端所期望的。React 注入了新的标记来补偿哪些工作，但您已经失去了服务器 > 渲染的许多好处。相反，找出为什么生成的标记在客户端或服务器上是不同的：

虽然我用这个方法解决了上面的问题，但是还是出现了白屏（客户端重新渲染）的问题。

这里我以代码 fromhttps://github.com/Hashnode/mern-starter为例，这是我们项目的基础。

客户端 index.js：

服务器：server.js

请看https://github.com/Hashnode/mern-starter

=======这里是如何重现问题：=======

步骤1：

关闭生产模式的缩小，以便我们可以在浏览器中读取 js 代码并定位关键代码：

注释 webpack.config.prod.js 中的 UglifyJSPlugin（第 80~85 行）：

第2步：

运行 mongodb 并在项目文件夹中运行npm run bs以运行产品模式

第 3 步：

在 Chrome 浏览器资源中，我们可以看到 js 文件app.cb4f935522b22f1d48a0.js，我们可以在 10316 行附近找到代码

第4步：

在 上设置断点(0, _reactDom.render)...，在运行这个函数之前，客户端已经用服务器端渲染的文档渲染了一些内容，在跨过这个函数之后，屏幕将是空白的。

我正在尝试找到一种解决方案来避免这种重新渲染，但这对我来说有点困难，

我有一个画布元素到一个组件中，我需要做很多微积分来绘制一些东西，但是每次我调用一个方法时组件都会重新渲染，所以这会使应用程序非常慢。

任何想法如何在不执行重新渲染函数的情况下调用方法？

谢谢...

I update Store and it logged on my console but the content of component doesn't change. I render Question in my render function and here is my reducers. I update the question[0] but nothing change.

Render function

我对 React Redux 间隔操作有疑问。它使用 Axios 以 20 秒的间隔调用 Twitch api 并更新 redux 状态。Redux 状态每次都成功更新，但组件不刷新。我必须采取一些其他措施来刷新组件。怎么了？

店铺

零件

行动

dispatch(userActions.userSet) 成功改变了我在 redux 开发工具中看到的 redux 状态，它改变了我组件中的 props state.user 和 state.live。怎么了？应用程序中的其他非间隔操作效果很好。此代码示例是应用程序的一部分，如果需要其他详细信息，请告诉我，我会分享。

更新

这是我的userReducer：

创建减速器：

用户集

我的 live reducer 有一组来自 user.get('groups") 所以如果我在 userReducer 中更新它，那么 liveReducer 也会更新。

在 ReactJs 的一个函数中重新渲染相同的组件。我正在添加评论，然后我想重新渲染相同的组件。任何人都可以帮忙吗？