在 React 应用中，数据的传递至关重要。正确地管理数据可以帮助我们更轻松地编写维护性高的组件。在 React 中，我们有两种主要的方式来传递数据：props 和 state。但是，当我们使用 Redux 和 Hooks 时，我们可以采用其他方法来传递数据。本文将介绍如何在 React Redux 和 Hooks 中正确地传递数据，并讨论每个选项的优缺点。
传统的数据传递方式
在 React 应用中，我们一般会使用 props 和 state 两种方式来传递数据。props 用于父组件向子组件传递数据，而 state 则用于组件内部管理和修改数据。
-- -------------------- ---- -------
----- ------ ------- --------------- -
----- - - -------- -- --
------------------- - ------- -- -
--------------- -------- ------------------ ---
--
-------- -
------ -
------
----------------------------
------------------------------------------
--
--
-
-
----- ----- - -- -------- --------------- -- -- -
------ --------------- -------------------------- --
--在上述示例中，Parent 组件通过 Child 组件的 message 和 onMessageChange 属性向其传递数据。Child 组件接收 message 和 onMessageChange 属性，并将 message 显示在一个可编辑的输入框中，当输入框的值发生变化时，Child 组件会调用 onMessageChange 回调函数并将新的值传递给 Parent 组件。
这种方式是最常见的，也是最基本的数据传递方式，但是当应用变得更加复杂时，我们可能需要一些具有更高级别的特性来更好地管理数据。
Redux 中的数据传递
Redux 是一个状态管理库，它可以帮助我们更好地管理大型应用程序中的状态。它将应用程序的状态存储在一个中央存储库（即 Redux store）中，而组件可以读取和更改该存储库中的状态。Redux 将应用程序状态分为两个部分：state 和 action。state 包含应用程序的当前状态，而 action 包含用于修改该状态的信息。Redux 还包括一个本身不会修改状态的 reducer 用于处理 action。
在 Redux 应用程序中，我们可以使用 connect 函数将组件与 Redux store 类型。connect 函数接受两个参数：mapStateToProps 和 mapDispatchToProps。
mapStateToProps 这个函数接受一个参数，该参数是当前 Redux store 中的 state 对象，它将返回一个对象，该对象将用于将 state 映射到组件的 props。mapDispatchToProps 用于将 Redux store 中的 action 映射到组件的 props。通常，我们使用 dispatch 函数将 action 提交到 Redux store。在这种情况下，我们可以通过将返回的函数包装在 dispatch 中来触发 Redux store 中的 action。你也可以选择手动调用 dispatch。
下面是一段使用 Redux 的示范：
-- -------------------- ---- ------- ------ - ------- - ---- -------------- ----- ------ - -- -------- --------------- -- -- - ------ ----------------- --------------------------------- -- -- ----- ----- - -- -------- --------------- -- -- - ------ --------------- -------------------------- -- -- ----- --------------- - ----- -- -- -------- ------------- --- ----- ------------------ - -------- -- -- ---------------- ----- -- ---------- ----- -------------- -------- ------------------ --- --- ------ ------- ------------------------ ----------------------------
在上述示例中，我们首先将 Parent 和 Child 组件改写成无状态函数式组件。然后，我们使用 connect 函数将 Parent 组件与 Redux store 关联起来。
在 Parent 组件中，我们通过 mapStateToProps 将 Redux store 的 message 状态映射到组件的 message 属性中。我们还将一个 onMessageChange 回调函数传递给 Child 组件，这个函数会将一个 SET_MESSAGE action 提交到 Redux store。mapDispatchToProps 会将该回调函数映射到组件的 onMessageChange 属性中。当 Child 组件中的输入框的值变化时，该回调函数会被调用。
这种方式需要编写更多的代码，但是它具有更好的可维护性。将组件与 Redux store 相分离可以使代码更清晰易懂。
Hooks 中的数据传递
在 React 16.8 中，Hooks 被引入到 React 中，我们现在可以在函数组件中使用 state 和其他 React 功能。React Hooks 提供了一些其他技术以及更方便的状态管理。例如，useState 和 useContext。
useState 可以将管理组件状态的能力添加到函数式组件中。useState 返回一个数组，该数组包含两个值：第一个是当前状态，第二个是用于更新状态的函数。下面是一个示例：
-- -------------------- ---- -------
------ - -------- - ---- --------
----- ------ - -- -- -
----- --------- ----------- - -------------
----- ----------------- - ----- -- -
-------------------------------
--
------ ------ ----------------- ----------------------------------- ---
--
----- ----- - -- -------- --------------- -- -- -
------ --------------- -------------------------- --
--在这个例子中，useState Hook 用于将状态添加到 Parent 组件中。当输入框中的值发生变化时，onMessageChange 回调函数会被调用，该函数会调用 setMessage 函数并将新值设置为 message 状态。
useContext Hook 用于获取 React Context 中的值。它接受一个 Context 对象并返回该 Context 的当前值。如果使用 useContext 的组件的祖先没有提供 Context 对象的值，则 useContext 将返回该 Context 的默认值。
-- -------------------- ---- -------
------ - -------------- ---------- - ---- --------
----- -------------- - ------------------
----- ------ - -- -- -
------------------------ ------------- --------
------ --
--------------------------
--
----- ----- - -- -- -
----- ------- - ---------------------------
------ -----------------
--在上述示例中，我们创建了一个名为 messageContext 的 Context 对象，并将其默认值设置为 ''。在 Parent 组件中，我们包装了 Child 组件并将 messageContext.Provider 组件的值设置为 "Hello, World!"。在 Child 组件中，我们调用 useContext Hook 并传递 messageContext，它将返回当前的 Context 值，在本例中，为 "Hello, world!"。
通过在代码中添加 Hook 的使用，我们可以将组件的功能分解成更小的、更易于维护的单元。Hooks 还可以帮助我们更好地进行复用和测试。但是，它们不是必须的，因此，在确定使用 Hook 时，确保考虑组件的复杂性和维护性。
结论
数据的正确传递对于构建高效、维护性高、可测试的应用程序至关重要。在 React 应用程序中，我们有不同的选择来传递数据，包括 props、state、Redux 和 Hooks。每个选项都有其特定的优缺点。在编写 React 应用程序时，请确保使用正确的工具进行数据传递。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6772221f6d66e0f9aad4f13e