React学习（二）-变量

也是很无聊，竟然写这玩意，毕竟不是学术研究，普通工作没那么多概念性东西，会用就行╮(╯▽╰)╭
在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";
  

• 特点：
  • 模块变量的作用域仅限于当前模块。
  • 适用于模块内共享数据的场景。