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

目录

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