在前端开发中，经常需要在不同页面之间传递数据。Redux 是一个非常适合在 React 应用中管理应用状态的工具。然而，在一些情况下，如在小型应用中使用 Redux，或者在多个页面之间传递数据时，Redux 可能会显得过于冗余，使用 React Context 可以更好地实现数据的共享和传递。
Redux 跨页传参存在的问题
在使用 Redux 进行应用状态管理时，它的优势之一是能够为所有组件提供一个统一的数据源。但是，Redux 本身并不能直接实现在不同页面之间传递数据的需求，在跨页面传参时，需要进行额外的配置和处理，代码复杂度也会相应变高。
使用 React Context 实现 Redux 跨页传参的替代方案
相比于使用 Redux，React Context 拥有更加轻量级的实现方式，在实现数据共享和传递时具备更高效的性能表现。我们可以使用 React Context 来代替 Redux，在不同页面之间传递数据。
创建 Context
首先，我们需要通过 createContext 函数创建一个 Context：
import { createContext } from 'react';
const AppContext = createContext({});提供 Context
接下来，我们使用 Context.Provider 组件来提供上下文：
-- -------------------- ---- -------
-------- ----- -
----- ------ -------- - ---------------- ---------
------ -
-------------------- -------- ----- ------- ---
--------------- --
----------------------
--
-在这个示例中，我们创建了一个 data 状态，并将其作为上下文的值传递给 ChildComponent 组件。同时，我们还通过 setData 回调函数将上下文的值更新为 Hello, World!。
使用 Context
在另一个页面或组件中，我们可以通过 useContext 钩子来访问提供的上下文：
import { useContext } from 'react';
import AppContext from './AppContext';
function OtherComponent() {
const { data } = useContext(AppContext);
return <div>{data}</div>;
}在这里，我们通过 useContext 钩子获取了 data 状态，以便在组件中进行渲染。
结论
总的来说，使用 React Context 代替 Redux，既可以简化代码，又能提升应用性能。但是需要注意，对于大型应用，Redux 仍然是更好的选择，因为它本质上是一种更加结构化、可维护的数据流方案，能够帮助我们更好地管理应用状态。
然而，在小型应用或者在多个页面之间传递数据时，React Context 也是一个更加优雅的解决方案，建议开发者们根据具体情况选择合适的技术方案。
示例代码
-- -------------------- ---- -------
------ - -------------- ----------- -------- - ---- --------
----- ---------- - ------------------
-------- ----- -
----- ------ -------- - ---------------- ---------
------ -
-------------------- -------- ----- ------- ---
--------------- --
----------------------
--
-
-------- ---------------- -
----- - ----- ------- - - -----------------------
----- ----------- - -- -- -
------------- -- - --- -----------
--
------ -
-----
-----------------
------- -------------------------------------
------
--
-
-------- ---------------- -
----- - ---- - - -----------------------
------ ------------------
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6747e0455883fc5ebfe742c0