正文

React全局引用示例代码

/0 浏览量
0616

在React应用中，有时候我们需要在多个组件之间共享状态或方法，这时全局引用就派上用场了。以下是一些使用全局引用的示例代码，包括如何在React中创建和使用全局状态、上下文（Context）以及高阶组件（Higher-Order Components, HOCs）。

1. 使用全局状态（Global State）

React 提供了 useState 和 useReducer 钩子，我们可以通过创建一个全局状态管理库来实现全局状态。

// GlobalState.js
import React, { createContext, useReducer, useContext } from 'react';

const GlobalStateContext = createContext();

const globalStateReducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

export const GlobalStateProvider = ({ children }) => {
  const [state, dispatch] = useReducer(globalStateReducer, { count: 0 });

  return (
    <GlobalStateContext.Provider value={{ state, dispatch }}>
      {children}
    </GlobalStateContext.Provider>
  );
};

export const useGlobalState = () => useContext(GlobalStateContext);

在组件中使用全局状态：

// Counter.js
import React from 'react';
import { useGlobalState } from './GlobalState';

const Counter = () => {
  const { state, dispatch } = useGlobalState();

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
    </div>
  );
};

在应用中使用 GlobalStateProvider 包裹：

// App.js
import React from 'react';
import { GlobalStateProvider } from './GlobalState';
import Counter from './Counter';

const App = () => {
  return (
    <GlobalStateProvider>
      <Counter />
    </GlobalStateProvider>
  );
};

export default App;

2. 使用上下文（Context）

使用React的 Context API，我们可以创建一个全局上下文，让任何组件都可以访问到全局状态。

// GlobalContext.js
import React, { createContext, useContext } from 'react';

const GlobalContext = createContext();

export const useGlobalContext = () => useContext(GlobalContext);

export const GlobalProvider = ({ children }) => {
  const [count, setCount] = React.useState(0);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <GlobalContext.Provider value={{ count, increment, decrement }}>
      {children}
    </GlobalContext.Provider>
  );
};

在组件中使用全局上下文：

// Counter.js
import React from 'react';
import { useGlobalContext } from './GlobalContext';

const Counter = () => {
  const { count, increment, decrement } = useGlobalContext();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

在应用中使用 GlobalProvider 包裹：

// App.js
import React from 'react';
import { GlobalProvider } from './GlobalContext';
import Counter from './Counter';

const App = () => {
  return (
    <GlobalProvider>
      <Counter />
    </GlobalProvider>
  );
};

export default App;

3. 使用高阶组件（Higher-Order Components, HOCs）

HOCs 是一种设计模式，允许我们将共享的功能封装到一个组件中，然后将其作为参数传递给其他组件。

// withGlobalState.js
import React from 'react';
import { useGlobalContext } from './GlobalContext';

const withGlobalState = (WrappedComponent) => {
  return (props) => {
    const { count, increment, decrement } = useGlobalContext();

    return <WrappedComponent {...props} count={count} increment={increment} decrement={decrement} />;
  };
};

export default withGlobalState;

在组件中使用HOC：

// Counter.js
import React from 'react';
import { withGlobalState } from './withGlobalState';

const Counter = ({ count, increment, decrement }) => {
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default withGlobalState(Counter);

在应用中使用 GlobalProvider 包裹：

// App.js
import React from 'react';
import { GlobalProvider } from './GlobalContext';
import Counter from './Counter';

const App = () => {
  return (
    <GlobalProvider>
      <Counter />
    </GlobalProvider>
  );
};

export default App;

以上就是在React中实现全局引用的三种方法。根据你的需求，你可以选择最合适的方法来实现全局状态管理。

-- 展开阅读全文 --