【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>  

  );  

}

4.useRef

useRef 返回一个可变的 ref 对象&#