在 React 和 Redux 中，当使用 Redux 存储数据并将其传递给 React 组件时，有一种常见的场景是将 Redux 中存储的值作为 input 元素的 value。然而，在使用此方法时，可能会出现输入时反应迟缓的问题。本文将深入探讨这个问题，并提供解决方案。
问题描述
假设我们有一个包含输入框的 React 组件，其值来自 Redux store：
-- -------------------- ---- -------
------ - ------- - ---- --------------
----- ------- ------- --------------- -
-------- -
------ -
------
-----------
------------------------
----------------------------
--
--
-
------------ - ------- -- -
----- -------- - -------------------
-- ------ ----- -----
-
-
----- --------------- - ------- -- --
------ --------------
---
------ ------- ----------------------------------在这个组件中，value 的值来自 Redux store，我们想要实现的是每次用户输入时更新 Redux store。但是，当我们输入时，发现输入框的内容会反应迟缓，甚至会出现字符丢失的情况。这是由于 React 使用了受控组件（controlled component）的方式来渲染输入框，每次输入都会触发重新渲染组件，导致输入时的反应迟缓。
解决方案
要解决这个问题，我们需要将输入框的值从 Redux store 中独立出来，以便能够更快地响应用户的输入。可以通过以下两种方式实现：
方式一：使用在组件内部维护的 state
将 value 从 Redux store 中取出，存储在组件内部的 state 中，然后在 handleChange 中更新该 state 的值，并将新值发送给 Redux store。示例代码如下：
-- -------------------- ---- -------
------ - ------- - ---- --------------
----- ------- ------- --------------- -
----- - -
------ -----------------
--
-------- -
------ -
------
-----------
------------------------
----------------------------
--
--
-
----------------------------- -
-- ---------------- --- ----------------- -
--------------- ------ ---------------- ---
-
-
------------ - ------- -- -
----- -------- - -------------------
--------------- ------ -------- ---
-- ------ ----- -----
--
-
----- --------------- - ------- -- --
------ --------------
---
------ ------- ----------------------------------在上面的代码中，我们将 value 存储在组件内部的 state 中，并在 componentDidUpdate 中更新它的值。在 handleChange 中，我们更新了组件内部的 state，并将新的值发送给 Redux store。
方式二：使用 React Hooks
另一种方法是使用 React Hooks。我们可以使用 useState Hook 来维护输入框的值，将其从 Redux store 中分离出来。示例代码如下：
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - --------- --------- - ---- --------
-------- -------------- -
----- ------- --------- - ----------------------
------------ -- -
----------------------
-- ---------------
-------- ------------------- -
----- -------- - -------------------
-------------------
-- ------ ----- -----
-
------ ------ ----------- ------------- ----------------------- ---
-
----- --------------- - ------- -- --
------ --------------
---
------ ------- ----------------------------------在上面的代码中，我们使用了 useState Hook 来存储输入框的值，并使用 useEffect Hook 来更新该值。在 handleChange 中，我们更新了输入框的值，并将新的值发送给 Redux store。
总结
当使用 Redux 存储数据并将其传递给 React 组件时，
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/606f26b02d2a29a3c120382e