【React全解5】useRef和createContext/useContext详解

2,034 阅读3分钟

目录

  • 前言
  • React.useRef
  • React.createContext/useContext
  • 总结

一、前言

在原先的文章中,我们知道了 React 的 state 里的变量的值,只要变量的值发生变化更新了一次,那么就会产生新的变量来等于新的值。

那么在 React 中,我们如何能像 Vue 一样,使用和改变一个变量贯穿始终呢?

有,这两个就是useRef和useContext

二、React.useRef

const n=React.useRef(初始值)

如何表示 n 的值:n.current

useRef 的值发生改变,不会触发 UI 更新。 useRef 的值只能在当前组件生效,贯穿当前的组件直至组件消亡。

1、使用 React.useRef

const App = () => {
  /* 定义一个Ref的变量n */
  const n = React.useRef(0);
  const log = () => {
    setTimeout(() => {
      /* 使用n.current表示n的当前值 */
      console.log("n:", n.current);
    }, 3000);
  };
  return (
    <div>
      n:{n.current} /* 并不会触发更新 */
      <button onClick={log}>log</button>
      <hr />
      <button
        onClick={() => {
          n.current += 1;
        }}
      >
        n+1
      </button>
    </div>
  );
};
ReactDOM.render(<App />, document.getElementById("root"));
  • 效果展示
    • 无论我先点击 log 再使 n 值+3,还是先使 n 值+3 再 log。都会打印出 3,原因就是因为 useRef 只有一个变量值贯穿始终,且不会像 state 那样延展出 n 的分身

2、useRef 值变化时自动触发 UI 更新

我们知道,React 中的 useState 中的值发生改变后,会自动触发 UI 重新渲染(re-render)。那么我们能不能直接沿用这种思想,在 state 值更新后夹带着重新渲染,使得 useRef 的值在这个时间段发生更新。

const App = () => {
  const n = React.useRef(0);
  const update = React.useState(null)[1]; /* 我们只需要setX的函数即可 */
  const log = () => {
    setTimeout(() => {
      console.log("n:", n.current);
    }, 3000);
  };
  return (
    <div>
      n:{n.current}
      <button onClick={log}>log</button>
      <hr />
      <button
        onClick={() => {
          n.current += 1;
          /* 只要useState中的值发生变化,就会重新触发页面渲染 */
          update(n.current);
        }}
      >
        n+1
      </button>
    </div>
  );
};
ReactDOM.render(<App />, document.getElementById("root"));
  • 效果展示
    • 加上 useState 中的 setX 函数后,这样就可以使得 useRef 的值在发生变化的同时自动触发重新渲染,让页面显示 useRef 更新后的值。

三、React.createContext/useContext

创建一个上下文对象。当 React 渲染一个订阅该 Context 对象的组件时,它将从树中它上面最接近的匹配 Provider 读取当前上下文值。仅当组件在树中上方没有匹配的提供者时才使用 defaultValue 参数。这对于隔离测试组件而不包装它们很有帮助。

注意:将 undefined 传递为 Provider 值不会导致使用组件使用 defaultValue。

其实这个上下文对象更像是一个:块级作用域,在这个上下文对象的里面,组件可以使用上一级及最上级的上下文对象中的 JS 的变量和对象。

1、使用 React.createContext/useContext

首先先要创建一个上下文对象 globalText。然后再创建一个"块级作用域"。在 Provider 的 value 属性中写上要传递的一个 JS 变量或对象。

const globalText = React.createContext(null);
const App = () => {
  const [n, setN] = React.useState(0);
  const [m, setM] = React.useState(0);
  return (
    /* 被globalText.Provider包裹的就相当于一个块级作用域 */
    <globalText.Provider value={{ n, setN, m, setM }}>
      <div className="wrapper">
        <div>n:{n}</div>
        <div>m:{m}</div>
        <ChildA />
        <ChildB />
      </div>
    </globalText.Provider>
  );
};
const ChildA = () => {
  /* 解构赋值:对象匹配 */
  const { n, setN } = React.useContext(globalText);
  return (
    <div>
      <button
        onClick={() => {
          setN(n + 1);
        }}
      >
        ChildA:n+1
      </button>
    </div>
  );
};
const ChildB = () => {
  const { m, setM } = React.useContext(globalText);
  return (
    <div>
      <button
        onClick={() => {
          setM(m + 1);
        }}
      >
        ChildB:m+1
      </button>
    </div>
  );
};
ReactDOM.render(<App />, document.getElementById("root"));
  • 效果展示
    • 可以看见,我们可以直接在 ChildA 和 ChildB 组件中使用最上级组件的 setN 和 setM 函数来对 n 和 m 进行修改。

四、总结

  • React.useRef是为了声明有且只有一个值的变量(对比 useState),并且贯穿当前整个组件直至组件消亡

  • React.createContext/useContext是创建一个上下文对象,其实就是一个"块级作用域"。在这个"块级作用域"里面,Context 提供的 JS 变量和对象等能贯穿整个上下文对象(块级作用域),里面的组件及里面所有嵌套的组件都能使用 Context 提供的 JS 变量和对象等。