React 中控制组件实例的秘密
作者：互联网
React 中控制组件实例的秘密
React 中有一个常用的道具。不过，我们不知道它在内部是如何工作的。我们说的魔法道具就是关键道具。
React 使用 key prop 来识别哪些项目已更改、添加或删除。它通常在您使用数组中的元素时使用。
控制反应组件实例
这是关于 React key prop 的另一个鲜为人知的秘密。 React 中的 key prop 允许您仅在一段代码中轻松控制组件实例。它允许您返回完全相同的组件，但强制 React 卸载该组件的前一个实例，并安装一个新实例。
卸载前一个实例仅仅意味着组件中存在的所有状态都被完全删除并重新初始化组件。
上面的组件是一个非常简单的 React 组件，每次单击按钮时计数都会增加。
上面的代码在计数器按钮附近添加了一个重置按钮。当您单击计数器按钮时，它的计数会增加。当按下复位按钮时，它会将计数复位为零。
这里要注意的一件重要事情是 App 组件没有向计数器发送任何值。每次按下按钮时都会更改键。
那段代码正在执行重置魔术。每当更改组件的键时，都会创建新实例。新实例将始终具有一组新状态。这就是为什么重置按钮起作用并且当点击重置时计数器归零的原因。
仔细查看组件内部
以下是加载应用程序时显示的控制台日志：
以下是计数器值更改时显示的控制台日志：
下面是计数器重置时显示的控制台日志：
如果你仔细观察，你会注意到当计数器被重置时，即它的键被改变了。整个组件被重新创建。重新初始化状态并重新安装组件。
当您需要在特定事件或更改上重置整个组件时，此模式很有用。明智地使用此模式，因为更改键会初始化组件，这在数据密集型应用程序中使用时也会导致性能问题。
阅读这篇文章和更多关于我的 Typeshare 社交博客
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
本文链接：https://www.qanswer.top/20656/07370700
标签：重置,React,计数器,实例,按钮,组件 来源： https://www.cnblogs.com/amboke/p/16663816.html