react 中如何将一个局部变量变成全局变量

在 React 中，可以通过状态提升（lifting state up）的方式将局部变量变成全局变量。具体来说，可以将该局部变量定义在共同的父组件中，然后通过 props 将其传递给需要使用该变量的子组件。这样，子组件就可以通过 props 访问到该变量，实现了全局变量的效果。

另外，如果需要在多个组件中共享某个变量，还可以使用 React 的上下文（Context）机制，将变量存储在上下文中，然后在需要使用该变量的组件中通过 useContext 钩子来获取该变量。这样，就可以避免通过层层传递 props 来实现变量共享的繁琐过程。

相关问题

在 React 中，可以通过状态提升（lifting state up）的方式将局部变量变成全局变量。具体来说，可以将该局部变量定义在共同的父组件中，然后通过 props 将其传递给需要使用该变量的子组件。这样，子组件就可以通过 props 访问到该变量，实现了全局变量的效果。 另外，如果需要在多个组件中共享某个变量，还可以使用 React 的上下文（Context）机制，将变量存储在上下文中，然后在需要使用该变量的组件中通过 useContext 钩子来获取该变量。这样，就可以避免通过层层传递 props 来实现变量共享的繁琐过程。 写个案例

好的，以下是一个使用 React 上下文（Context）共享变量的案例：

假设我们有一个组件 `A`，以及它的两个子组件 `B` 和 `C`，它们都需要使用一个共同的变量 `theme`，我们可以使用 React 上下文（Context）机制来将 `theme` 存储在上下文中，并在需要使用该变量的子组件中通过 useContext 钩子来获取该变量。

import React, { createContext, useContext, useState } from "react";

const ThemeContext = createContext("light");

function A(props) {
  return (
    <div>
      <p>子组件 B 中的 theme 值为：{useContext(ThemeContext)}</p>
      <p>子组件 C 中的 theme 值为：{useContext(ThemeContext)}</p>
    </div>
  );
}

function B(props) {
  return (
    <div>
      <p>子组件 B 中的 theme 值为：{useContext(ThemeContext)}</p>
    </div>
  );
}

function C(props) {
  return (
    <div>
      <p>子组件 C 中的 theme 值为：{useContext(ThemeContext)}</p>
    </div>
  );
}

function App() {
  const [theme, setTheme] = useState("light");

  return (
    <ThemeContext.Provider value={theme}>
      <p>父组件中的 theme 值为：{theme}</p>
      <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
        切换主题
      </button>
      <A />
    </ThemeContext.Provider>
  );
}

export default App;

在上面的代码中，我们首先使用 `createContext` 函数创建了一个名为 `ThemeContext` 的上下文对象，并将其初始值设为 `"light"`。然后，在组件 `A` 中通过 `useContext` 钩子来获取 `ThemeContext` 上下文中的值，并将其显示出来。同样的，子组件 `B` 和 `C` 中也使用了相同的方式来访问 `ThemeContext` 中的值。

在父组件 `App` 中，我们将 `theme` 变量存储在 `ThemeContext` 的 `Provider` 中，并通过 `value` 属性将其传递给子组件。当我们点击父组件中的切换主题按钮时，`theme` 变量的值会更新，并且子组件中的 `theme` 值也会相应地更新。

这就是一个简单的 React 上下文共享变量的案例，通过这种方式，我们可以避免通过层层传递 props 来实现变量共享的繁琐过程，并将变量存储在上下文中，让需要使用该变量的组件可以方便地获取到它。

useRef 替代全局变量 存储二维数组

`useRef` 是 React 内置的一个 hook，它返回一个引用当前节点的可变对象，通常用于存储一些不可变的状态，比如 DOM 元素或者在组件生命周期内需要长期存在的值。如果你想用 `useRef` 来替代全局变量存储二维数组，你可以这样做：

1. 首先，创建一个空的 `useRef` 对象，用来保存数组实例：

const arrayRef = useRef([]);

2. 当你需要初始化二维数组时，可以在组件的渲染函数中赋值给这个引用：

function MyComponent() {
  const [rows, setRows] = useState([]);
  
  // 初始化二维数组
  useEffect(() => {
    const data = [
      // 二维数组内容
      [...]
    ];
    arrayRef.current = data;
    setRows(data); // 如果需要同步状态到 state
  }, []);

  // 然后通过 arrayRef.current 访问和修改数组
  function updateArray(newData) {
    arrayRef.current = newData;
  }

  return <div>{/* 使用 rows 或者 arrayRef.current */}
}

在这个例子中，`arrayRef.current` 就像是一个局部的、组件级别的“全局”变量，你可以随时更新它，而不会影响其他组件。