问题标签 [react-lifecycle-hooks]

自从我阅读 React 0.14 的发行说明（和其他相关炒作）以来，这个问题一直在我脑海中转来转去——我是 React 的忠实粉丝，我认为无状态组件（https://facebook.github。 io/react/blog/2015/09/10/react-v0.14-rc1.html#stateless-function-components）是一个很好的主意，无论是为了便于编写此类组件，还是为了在代码中表达这些组件的意图对于相同的道具数据，组件应该是“纯”的。

问题是：React 怎么可能优化这些无状态的组件功能，而无需全力以赴并假设 props 引用不仅是不可变的，因为它们不应该在组件内被操纵，而且它们永远不会改变在组件生命周期之外？“常规”组件（也称为有状态组件——换句话说，贯穿整个生命周期的组件；componentWillMount、getInitialState 等）具有可选的“shouldComponentUpdate”函数的原因是 React没有假设所有的 props 和 state 引用都是完全不可变的。渲染组件后，props 引用的某些属性可能会发生变化，因此相同的“props”实例稍后可能具有不同的内容。这就是为什么人们对使用完全不可变的结构有很多兴奋的部分原因，以及为什么有人说将 Om 与 React 结合使用可以提供巨大的性能提升；因为那里使用的不可变结构保证了任何对象的任何给定实例永远不会被改变，所以 shouldComponentUpdate 可以对 props 和 state 执行非常便宜的引用相等检查（http://swannodette.github.io/2013/12/17/the -future-of-javascript-mvcs/）。

我一直在尝试找到有关此的更多信息，但一无所获。如果不假设 props 数据将由不可变类型组成，我无法想象围绕无状态组件可以做出哪些性能改进。也许对非不可变 props 类型进行一些初步分析，以尝试猜测“props”和“nextProps”是否代表相同的数据？

我只是想知道是否有人对此有任何内幕消息或其他一些启发性的见解。如果 React确实开始要求 props 类型是“完全不可变的”（允许引用相等比较以确认数据没有改变），那么我认为这将是一个很大的进步，但它也可能是一个很大的变化。

如何在文本输入中调用异步函数？

有一个错误“等待是保留字”，知道吗？

我试图了解反应生命周期钩子，并遇到了 componentDidMount() 生命周期钩子的问题。

假设您正在渲染一个组件列表。每个列表项的 componentDidMount() 方法总是在所有列表项都呈现后在最后触发。为什么它没有在每个项目的开头触发？

这是我的根 App 组件中的 render() 方法

单个组件 A,A1,A2,B,B1,B2 的结构看起来都一样，只是名称不同。

我已经在所有组件的每个方法中编写了控制台日志。下面是我得到的截图。 https://snag.gy/wyi5Ta.jpg

在我们得到的截图中

我期待着

我已经在我期望 componentDidMount() 方法触发的地方放置了箭头。这是什么原因？

我找不到这个问题的确切答案。我还发现 react 遵循“深度优先搜索”遍历方法。我看了一些视频，但无法理解这个奥秘。有人可以解释一下吗？我一直在努力解决这个问题。谢谢。

我不明白 shouldComponentUpdate() 方法如何访问旧状态，据我所知， shouldComponentUpdate() 在道具或状态更改后被触发。

假设您调用 setState() ，之后当前状态将被更改并将更新为新状态。但是即使在将状态更新到最新版本之后也会触发 shouldComponentUpdate()。因此， shouldComponentUpdate() 中的“this.state”如何返回旧状态？

有人有想法吗？非常感谢。

Okies，所以，我正在开发一个简单的食谱集合应用程序，其中有 foodReducer.js 和 RecipeReducer.js。

在我的管理仪表板上，管理员用户可以创建、删除和编辑任何美食组，还可以为任何美食组创建、删除和编辑食谱。当用户点击任何菜系组时，它会使用菜系 ID 呈现菜谱面板中的所有菜谱。用户也可以通过在食谱或美食组上按“x”来删除。我需要解决的冲突是当一个配方被删除时，它也应该从用户界面中删除，而不需要刷新。我不知道如何实现。这是我的代码。

CuisineReducer.js

CuisineActions.js

recipeReducer.js

RecipeActions.js

管理员.js

这是我正在使用的调用的 json 数据：getCuisinesByCategory() GET 调用输出：

我正在尝试div使用反应钩子创建这个旋转示例的副本。https://codesandbox.io/s/XDjY28XoV

到目前为止，这是我的代码

目前 mouseMoveHandler 的调用状态为 ，isActive = false即使该状态实际上为真。如何让这个事件处理程序以正确的状态触发？

此外，控制台正在记录警告：

为什么我必须在 useEffect 依赖数组中包含组件方法？对于使用 React Hooks 的其他更简单的组件，我从来不需要这样做。

谢谢

我们知道，如果 Redux 操作触发了对服务器的API 调用（无论是在 Redux 中间件还是 Redux Thunk 中），从服务器接收应答需要时间。在这个等待阶段，UI必须以某种方式向用户显示正在完成某些加载（例如显示 Spinner）。在 React 和 React native 中，处理这些常见情况的一个著名技巧是Redux 状态中的isLoading布尔标志，当然还有正在调度的加载操作。一旦准备好显示答案，这个布尔值将被切换，以便我可以更新 UI。

然而，在应用这个技巧多年之后，我得到的是一个充满错误和错误的应用程序以及一个带有大量冗余代码的超级脏代码。

我检查了所有的 React生命周期钩子，检查了调用钩子的顺序以及Redux 调度的过程。似乎 Redux 和 React 完全分开工作。（我知道一旦商店更新就会调用getDerivedStateFromProps，但这并不能解决我的问题）

我需要一种更好的方法来处理这些常见情况。我不知道我是否需要在我的应用程序的 Redux 部分进行修改，或者在 UI 中，或者......

我有一个组件（显示列表）在更新道具（redux）之前呈现（有新项目添加到列表中并且应该显示但它不是，除非重新加载应用程序）。我写这个是为了防止这种行为：

它在渲染之前使组件更新，但是在控制台上 onFetchAction() 会不停地触发。我怎样才能防止这种情况？？？？？任何帮助将不胜感激。

我知道 React 有一个名为 的生命周期方法shouldComponentUpdate，默认情况下返回 true，这就是组件决定更新的方式

但是，当该组件的状态或道具发生变化时，如何调用该生命周期方法。当我们收到新的 props 或 state 时会发生什么？当我们将组件连接到 redux state 和 mapStateToProps 时，我们是否正在检查组件内部值的变化？如果没有，当我们在寻找状态或道具的变化时？

当道具或状态发生变化时，如何调用生命周期方法？当 props 或 state 发生变化时，我们是否有一个监听器来调用这些方法？

我创建了一个Checklist组件，其中所有检查都是默认的FALSE，当我单击以检查任何一个我设置 Component State 并将 State 发送到Store reducer. 这样做之后，问题就来了。问题是：-我希望MyComp借助 . 将数据存储在另一个 Component() 中mapStateToProps。但是componentWillReceiveProps当我更改清单数据时不会触发。

我搜索了这个问题，发现React 无法对即将到来的 props 进行深度检查。我尝试使用单个toggle(true/false)道具，它对我有用。

这是 MyComp.js，它使用 Store State(toggle, platforms) 作为道具

...

这是来自商店的道具。在这个唯一选定的属性正在改变。

预期：当我在 CheckList 中通过选中或取消选中更改“ selected ”属性值（true/false）时，我想在MyComp中触发 componentWillReceiveProps 。

当前状态：反应未触发 componentWillReceiveProps。因为 React 无法识别深度检查。

我如何编写代码以便 React 开始深入检查即将推出的道具？