React 之主要的内置 Hook（十）

最新推荐文章于 2024-09-13 17:25:30 发布

**之火

最新推荐文章于 2024-09-13 17:25:30 发布

阅读量529

点赞数 1

分类专栏： React 文章标签： react.js javascript 前端框架

本文链接：https://blog.csdn.net/qq_35876316/article/details/138474351

版权

React 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文详细介绍了React中的三个重要内置Hook：useState用于管理组件状态，useEffect执行副作用操作，useContext简化跨组件数据传递。通过实例演示了如何在函数组件中使用这些Hook。

摘要由CSDN通过智能技术生成

React 重要的主要内置 Hook 包括以下几个：

1. useState

用于在函数组件中添加状态。它返回一个状态变量和一个更新该状态的函数。这使得函数组件能够像类组件一样具有状态。

useState使用代码栗子：

import React, { useState } from 'react';  
  
function Example() {  
  const [count, setCount] = useState(0);  
  return (  
    <div>  
      <p>You clicked {count} times</p>  
      <button onClick={() => setCount(count + 1)}>Click me</button>  
    </div>  
  );  
}

2. useEffect

用于在函数组件中执行副作用操作，比如数据获取、订阅、手动修改 DOM 等。它的工作方式与类组件中的
componentDidMount、componentDidUpdate 和 componentWillUnmount 生命周期方法类似。

useEffect使用代码栗子：

import React, { useState, useEffect } from 'react';  
  
function Example() {  
  const [count, setCount] = useState(0);  
  
  useEffect(() => {  
    // 类似于componentDidMount和componentDidUpdate:  
    console.log(`You clicked ${count} times`);  
  
    // 返回一个清理函数，类似于componentWillUnmount:  
    return () => {  
      console.log('Component will unmount');  
    };  
  }, [count]); // 依赖项数组，当依赖项发生变化时，useEffect会重新执行  
  
  return (  
    <div>  
      <p>You clicked {count} times</p>  
      <button onClick={() => setCount(count + 1)}>Click me</button>  
    </div>  
  );  
}

3. useContext

它使得你可以无需明确地逐层通过 props 来传递数据，而是在组件之间的任何位置直接访问 React 的 Context
值。useContext 接收一个 React Context 对象（React.createContext 的返回值）并返回该
Context 的当前值。

useContext使用代码栗子：

import React, { createContext, useContext, useState } from 'react';  
  
// 创建一个 Context 对象  
const ThemeContext = createContext('light');  
  
// 使用 ThemeContext 的组件  
function ThemedButton() {  
  // 使用 useContext 来获取 ThemeContext 的值  
  const theme = useContext(ThemeContext);  
  
  return (  
    <button style={{ backgroundColor: theme }}>  
      I am styled by theme context!  
    </button>  
  );  
}  
  
// 提供 ThemeContext 值的组件  
function App() {  
  // 声明一个状态变量来作为主题  
  const [theme, setTheme] = useState('light');  
  
  // 一个处理函数，用于切换主题  
  const toggleTheme = () => {  
    setTheme(theme === 'light' ? 'dark' : 'light');  
  };  
  
  // 使用 ThemeContext.Provider 来包裹组件，并提供主题值  
  return (  
    <div>  
      <button onClick={toggleTheme}>Toggle Theme</button>  
  
      <ThemeContext.Provider value={theme}>  
        <ThemedButton />  
      </ThemeContext.Provider>  
    </div>  
  );  
}  
  
export default App;