在 React class 式中父组件向子组件传递参数可以通过 props ，context。但是在函数式组件中需要向多层组件传递数据时，此时就可以使用 useContext/
- 这里要注意的是，很多同学觉得可以使用useContext结合useReducer来替代redux，其实两者的作用是不同的。
- useContext：解决组件间传值的问题。
- redux：统一管理应用状态。
- 所以，我们可以使用useContext结合useReducer来模拟一个小型redux场景，而无法替代redux
import React, { useState } from "react";
let Theme = React.createContext("red");
const Inner = () => {
let color = React.useContext(Theme);
return <div><span style={{color: color}}>文字</span></div>
}
const Con = () => {
return <Inner />
}
const Side = () => {
console.log("side")
return <><span>side</span></>
}
export default function App() {
const [color, setColor] = useState("red")
return (
<div className="App">
<button onClick={() => setColor("red")}>红色</button>
<button onClick={() => setColor("green")}>绿色</button>
<Theme.Provider value={color}>
<Con />
<Side />
</Theme.Provider>
</div>
);
}
在上面的例子中，我通过在顶层创建 Provider 组件，深层次的子组件通过 useContext 取得 值，这样使得在父组件修改 context 的值之后，子组件也能取得相对应的值，并重新渲染。
需要注意的是，useContext 函数接收的参数对象是 context 自身。
存在于Provider 组件下的子组件在context 的值发生变化后，都会重新渲染，这样可能会引发一些性能问题，我们可以通过 memo 去避免一些不必要的重渲染。
const Side = memo(() => { console.log("side") return <><span>side</span></> })
Context 是通过新旧值检测来确定变化，使用了与Object.is相同的算法。
如果传给Context 是个字面对象的话，有可能使得每次值的检测都会使得子组件重新渲染。
import React, { useState, memo } from "react";
let Theme = React.createContext({color:"red"});
const Inner = memo(() => {
let theme = React.useContext(Theme);
console.log("Inner")
return <div><span style={{color: theme.color}}>文字</span></div>
})
const Con = () => {
return <Inner />
}
const Side = memo(() => {
console.log("side")
return <><span>side</span></>
})
export default function App() {
const [color, setColor] = useState("red")
const [count, setCount] = useState(0);
return (
<div className="App">
<div>
{count}
<button onClick={() => setCount((v) => v + 1 )}>count</button>
</div>
<button onClick={() => setColor("red")}>红色</button>
<button onClick={() => setColor("green")}>绿色</button>
<Theme.Provider value={{color}}>
<Con />
<Side />
</Theme.Provider>
</div>
);
}
上述的代码中，因为父组件 App 重新渲染时提供给Conext 的都是一个新的字面量对象，导致Inner 组件会在父组件的每次重渲染中去跟着重新渲染，这实际上是没有必要的。
import React, { useState, memo } from "react";
let Theme = React.createContext({color:"red"});
const Inner = memo(() => {
let theme = React.useContext(Theme);
console.log("Inner")
return <div><span style={{color: theme.color}}>文字</span></div>
})
const Con = () => {
return <Inner />
}
const Side = memo(() => {
return <><span>side</span></>
})
export default function App() {
const [theme, setTheme] = useState({color: "red"})
const [count, setCount] = useState(0);
return (
<div className="App">
<div>
{count}
<button onClick={() => setCount((v) => v + 1 )}>count</button>
</div>
<button onClick={() => setTheme({color: "red"})}>红色</button>
<button onClick={() => setTheme({color: "green"})}>绿色</button>
<Theme.Provider value={theme}>
<Con />
<Side />
</Theme.Provider>
</div>
);
}
通过上面的修改后，使得 Inner 避免了不必要的渲染。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。