React 之主要的内置 Hook（十）

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;