没有 Redux 的 React 如何组织父子组件间的通信
Redux 是一个非常流行的用于状态管理的库。但是，有时候在小型项目中使用 Redux 会显得过于繁琐。在这种情况下，我们需要一种更轻量级的方案来管理 React 应用程序中的状态。在这篇文章中，我们将介绍如何在没有 Redux 的情况下组织 React 应用程序中的父子组件间的通信。
为何不使用 Redux
在小型项目中使用 Redux 可能会造成一些不必要的工作量。Redux 的核心概念是 Store，Action 和 Reducer。在创建 React 应用程序时，我们必须同时编写多个文件和代码，这会使得开发过程变得繁琐和费时。因此，在小型项目中，我们可以采用更简单的方式来管理状态。
使用 Context API
React 16.3 引入了 Context API，它提供一种在 React 组件之间共享数据的方式，而不需要通过 props 将数据一层层向下传递。Context 对于如何共享数据提供了更好的解决方案。
在使用 Context 时，我们可以创建一个可存储任意数据的容器。这个容器可以在应用程序的任何组件中被读取和更新。Context API 包含三个步骤：创建 Context、提供器 Provider 和使用 Consumer。
创建 Context
首先，在我们的应用程序中，我们需要创建一个 Context 对象。我们可以在需要使用共享数据的组件上方创建一个 context.js 文件，并在其中导出一个 Context 对象。例如：
import { createContext } from 'react';
const MyContext = createContext();
export default MyContext;提供器 Provider
接下来，我们需要在顶级组件中创建一个共享数据的 Provider 组件。Provider 组件使用我们在上一步中创建的 Context 对象并提供了一个值。这个值可以在任何子组件中通过 Context API 读取到。例如：
-- -------------------- ---- -------
------ --------- ---- --------------
-------- ----- -
------ -
------------------- ------------- --------
--------
---
---------
------
---
-------
---------------------
--
-消费者 Consumer
最后，在任何需要共享数据的组件中，我们可以通过 Consumer 组件使用 Context。Consumer 组件在函数组件中是一个函数，它接收提供者提供的当前 Context 值，并返回一个 React 组件。例如：
-- -------------------- ---- -------
------ --------- ---- --------------
-------- -------------- -
------ -
--------------------
--- ---- -- -- -
-----------------
--
---------------------
--
-一个完整的示例
现在，让我们看一个完整的示例，使用 Context API 来管理状态。我们将创建一个基本列表应用程序，它包括一个带有添加和删除按钮的父组件和一个可以列出所有条目的子组件。此外，我们还将创建一个可以更新列表名称的其他组件。
创建 Context
首先，我们需要在 src 文件夹中创建一个名为 list-context.js 的新文件来存储我们的 Context 对象：
import { createContext } from 'react';
const ListContext = createContext();
export default ListContext;创建 Provider
接下来，我们将在 App.js 文件中创建一个 Provider 组件。Provider 组件将管理我们的列表数组。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ----------- ---- ----------------
------ ---- ---- ---------
------ -------- ---- -------------
-------- ----- -
----- ------ -------- - -------------
----- ----------- - ---- -- -
----------------- -------
--
----- -------------- - ----- -- -
----- ------- - ----------
--------------------- ---
-----------------
--
------ -
--------------------- -------- ----- ------------ -------------- ---
---- ----------------
------ -- ---------
--------- --
----- --
------
-----------------------
--
-
------ ------- ----我们使用 useState 钩子来创建带有两个函数的状态：addListItem 和 removeListItem。addListItem 用于向我们的列表数组中添加新的条目，而 removeListItem 则用于从列表中删除选定的项目。我们将状态和功能存储在一个对象中，并通过 Provider 组件将其提供给子元素。
使用 Consumer
现在，我们来看一下列表组件如何使用 Consumer 组件读取 Context 中的状态和功能。我们将在 List.js 文件中创建一个 Consumer 组件。我们将使用 map() 函数来列出所有的条目。每个条目都将呈现为一个红色的方框，其中包含一个按钮，用于从列表中删除该条目。
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- -----------------
-------- ------ -
------ -
----------------------
--- ----- -------------- -- -- -
----
---------------- ------ -- -
--- -----------
---- ------------------ ----------- -- -----------------------
-------
------
---- -----------------------------
-----
---
-----
--
-----------------------
--
-
------ ------- -----创建添加条目表单
最后，我们将创建一个表单，用于添加新的条目。我们将在 ListForm.js 文件中创建一个组件。我们使用 useState 钩子来记录我们的 input 值，并使用 Consumer 组件中提供的 addListItem 函数将新的条目添加到列表中。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ----------- ---- -----------------
-------- ---------- -
----- ------------ -------------- - -------------
----- ------------ - - -- -
------------------------------
--
----- ------------ - --- ------------ -- -
-------------------
------------------------
------------------
--
------ -
----------------------
--- ----------- -- -- -
----- ----------- -- --------------- --------------
------
-----------
---------------- --- -----
------------------
-----------------------
--
------- --------------------------
-------
--
-----------------------
--
-
------ ------- ---------结论
在这篇文章中，我们使用 Context API 替代了 Redux，来管理 React 应用程序中的父子组件传递状态的问题。通过创建 Context、Provider 和 Consumer，我们能够轻松共享数据，同时还能避免在小型项目中使用 Redux 带来的繁琐。希望这篇文章可以帮助您更好地理解如何使用 Context API 来组织 React 应用程序中的父子组件间的通信。
完整的示例代码可以在以下地址找到： https://github.com/geekergo/react-app-without-redux
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f61d24c5c563ced57fb4a7