gpt4 book ai didi

reactjs - 使用 useMemo 在渲染期间更新 React Hooks 状态

转载 作者:行者123 更新时间:2023-12-03 17:19:32 25 4
gpt4 key购买 nike

可以 useMemo仅用于在渲染期间设置状态时避免额外的引用相等性检查代码/变量?

示例:useMemosetState在渲染过程中取自此 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);

Edit recursing-hopper-4ynjm

单击按钮更改传递给组件的 prop 时的输出:
> run component 
> run component
> update finished

如您所见,该组件在更新周期完成之前已运行两次。这相当于 getDerivedStateFromProps 的行为.

我想为什么文档提出了一种略有不同的技术,背后没有更深入的思考。在某种程度上,这也是手动检查,但方式简洁。 +1 的想法。

关于reactjs - 使用 useMemo 在渲染期间更新 React Hooks 状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58102182/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com