【React】React 内置 Hook

React 内置 Hook 是一组允许你在函数组件中使用 state 和其他 React 特性的函数。它们极大地扩展了函数组件的功能，使得在无需编写 class 的情况下也能使用 React 的全部功能。以下是一些主要的 React 内置 Hook 的介绍：

1.useState

useState 是用于在函数组件中添加状态（state）的 Hook。它返回一个状态变量和一个更新该状态的函数。你可以使用它来管理组件的本地状态。

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

useEffect 允许你在函数组件中执行副作用操作。这些副作用操作包括数据获取、订阅、手动修改 DOM 等。它类似于类组件中的生命周期方法（如 componentDidMount、componentDidUpdate 和 componentWillUnmount），但更加统一和灵活。

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

确保在组件卸载时清理资源，例如取消网络请求或释放内存。可以使用 useEffect 的清理函数来做到这一点。

3.useContext

useContext 允许你订阅 React 的 Context。这使得组件能够访问到由父组件提供的值，而无需显式地通过 props 传递。

import React, { useContext } from 'react';  import ThemeContext from './ThemeContext';    function ThemedButton() {    const theme = useContext(ThemeContext);      return (      <button style={{ color: theme.color }}>        I am styled by theme context!      </button>    );  }