一：定义

1：useRef：用于在函数组件中创 建一个可变的引用，类似于在类组件中创建一个实例变量。返回一个可变的 ref 对象，可以通过 .current 属性来访问和修改其值

2 ：useContext：用于在函数组件中访问上下文（Context）对象。接收一个上下文对象作为参数，返回该上下文的当前值

二：用途

1：useRef保存对 DOM 元素的引用，以便在需要时进行操作或获取信息

在组件的多次渲染之间共享和保存数据，而不引起重新渲染

存储的值在组件重新渲染时保持不变，类似于在类组件中创建的实例变量

返回的引用对象在组件的整个生命周期内保持不变，即使 组件重新渲染，它也不会重新创建

2：useContext在嵌套组件中访问共享的上下文数据，减少嵌套层级和代码复杂性

上下文的值发生变化时，使用 useContext 的组件将会重新渲染，以保持与上下文数据的同步

三：代码

1：useRef

import React, { useRef, useEffect } from 'react';

function Example() {
  const timerRef = useRef(null);

  useEffect(() => {
    timerRef.current = setInterval(() => {
      console.log('Timer is running...');
    }, 1000);

    return () => {
      clearInterval(timerRef.current);
    };
  }, []);

  return <div>Example component</div>;
}

2：useContext

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

function Example() {
  const theme = useContext(ThemeContext);

  return <div>Current theme: {theme}</div>;
}