目录
前言
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 的分身
- 无论我先点击 log 再使 n 值+3,还是先使 n 值+3 再 log。都会打印出 3,原因就是因为
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 变量和对象等。