可以 useMemo
仅用于在渲染期间设置状态时避免额外的引用相等性检查代码/变量?
示例:useMemo
与 setState
在渲染过程中取自此 rare documented use case :
function ScrollView({row}) {
let [isScrolling, setIsScrolling] = useState(false);
const lessCodeThanCheckingPrevRow = useMemo(
() => {
// Row changed since last render. Update isScrolling.
setIsScrolling(true); // let's assume the simplest case where prevState isn't needed here
},
[row]
);
return `Scrolling down: ${isScrolling}`;
}
以上大大减少了代码和额外的变量,仅用于相等性检查,那么为什么文档暗示应该手动完成引用相等性检查?
最佳答案
对我来说,这似乎是一种减少样板的优雅方式。我创建了一个代码沙盒来验证它的行为。
const UnitUnderTest = ({prop}) => {
let [someState, setSomeState] = useState(false);
const lessCodeThanCheckingPrevRow = useMemo(
() => setSomeState(current => !current),
[prop],
);
useEffect(() => console.log('update finished'), [prop])
console.log('run component');
return `State: ${someState}`;
}
const App = () => {
const [prop, setProp] = useState(false);
const handleClick = () => setProp(current => !current);
return (
<div>
<button onClick={handleClick} >change prop</button>
<UnitUnderTest prop={prop} />
</div>
)
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
单击按钮更改传递给组件的 prop 时的输出:
> run component
> run component
> update finished
如您所见,该组件在更新周期完成之前已运行两次。这相当于
getDerivedStateFromProps
的行为.我想为什么文档提出了一种略有不同的技术,背后没有更深入的思考。在某种程度上,这也是手动检查,但方式简洁。 +1 的想法。
关于reactjs - 使用 useMemo 在渲染期间更新 React Hooks 状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58102182/