也是很無聊，竟然寫這玩意，畢竟不是學術研究，普通工作沒那么多概念性東西，會用就行╮(╯▽╰)╭
在React中，變量是用于存儲和管理數據的基本單位。根據其用途和生命周期，React中的變量可以分為以下幾類：

---

1. 狀態變量（State）

• 用途：用于存儲組件的內部狀態，狀態變化會觸發組件的重新渲染。
• 定義方式：
  • 函數組件：使用useState鉤子。

    const [count, setCount] = useState(0);
    

  • 類組件：使用this.state和this.setState。

    class MyComponent extends React.Component {state = { count: 0 };render() {return <div>{this.state.count}</div>;}
    }
    

• 特點：
  • 狀態是組件私有的，外部無法直接訪問。
  • 更新狀態需要使用特定的方法（如setCount或this.setState）。

---

2. 屬性變量（Props）

• 用途：用于從父組件向子組件傳遞數據。
• 定義方式：
  • 父組件傳遞：

    <ChildComponent name="John" age={25} />
    

  • 子組件接收：

    function ChildComponent(props) {return <div>{props.name}, {props.age}</div>;
    }
    

• 特點：
  • Props是只讀的，子組件不能直接修改。
  • 可以通過defaultProps設置默認值。

---

3. 局部變量

• 用途：在函數或組件內部定義的臨時變量，用于存儲中間數據。
• 定義方式：

  function MyComponent() {const message = "Hello, World!";return <div>{message}</div>;
  }
  

• 特點：
  • 局部變量的生命周期僅限于函數或組件的執行過程。
  • 不會觸發組件的重新渲染。

---

4. 上下文變量（Context）

• 用途：用于在組件樹中跨層級傳遞數據，避免逐層傳遞Props。
• 定義方式：
  • 創建上下文：

    const MyContext = React.createContext();
    

  • 提供上下文值：

    <MyContext.Provider value={{ theme: "dark" }}><ChildComponent />
    </MyContext.Provider>
    

  • 使用上下文值：

    function ChildComponent() {const context = useContext(MyContext);return <div>{context.theme}</div>;
    }
    

• 特點：
  • 適用于全局或共享數據的場景。
  • 避免“Props Drilling”問題。

---

5. Ref變量（Refs）

• 用途：用于直接訪問DOM元素或存儲可變值，且不會觸發重新渲染。
• 定義方式：
  • 使用useRef鉤子：

    const inputRef = useRef(null);
    

  • 綁定到DOM元素：

    <input ref={inputRef} />
    

  • 訪問DOM元素：

    inputRef.current.focus();
    

• 特點：
  • Ref的值在組件重新渲染時保持不變。
  • 適用于需要直接操作DOM的場景。

---

6. 全局變量

• 用途：在組件外部定義的變量，可以在多個組件中共享。
• 定義方式：

  const globalVar = "This is a global variable";
  

• 特點：
  • 全局變量的生命周期與應用程序一致。
  • 不推薦過度使用，可能導致代碼難以維護。

---

7. 計算變量（Derived State）

• 用途：基于狀態或屬性計算得出的變量。
• 定義方式：

  const total = count * price;
  

• 特點：
  • 通常用于根據現有狀態或屬性生成新的數據。
  • 避免在狀態中存儲冗余數據。

---

8. 模塊變量

• 用途：在模塊中定義的變量，可以在模塊內的多個組件中共享。
• 定義方式：

  // module.js
  export const moduleVar = "This is a module variable";
  

• 特點：
  • 模塊變量的作用域僅限于當前模塊。
  • 適用于模塊內共享數據的場景。