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

目录

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

一、前言

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

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

有，这两个就是useRef和useContext

二、React.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

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 变量和对象等。