如何解决使用钩子时,React批状态更新功能是否起作用?
–如果状态更改是异步触发的(例如,包装在Promise中),则不会进行批处理;如果直接触发它们,将对其进行批处理。
我已经设置了一个沙箱来尝试一下:https ://codesandbox.io/s/402pn5l989
import React, { Fragment, useState } from 'react';
import ReactDOM from 'react-dom';
import './styles.css';
function Component() {
const [a, setA] = useState('a');
const [b, setB] = useState('b');
console.log('a', a);
console.log('b', b);
function handleClickWithPromise() {
Promise.resolve().then(() => {
setA('aa');
setB('bb');
});
}
function handleClickWithoutPromise() {
setA('aa');
setB('bb');
}
return (
<Fragment>
<button onClick={handleClickWithPromise}>
{a}-{b} with promise
</button>
<button onClick={handleClickWithoutPromise}>
{a}-{b} without promise
</button>
</Fragment>
);
}
function App() {
return <Component />;
}
const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);
我做了两个按钮,一个触发状态更改,就像您的代码示例一样,包装在一个promise中,另一个触发状态更改。
如果您查看控制台,则在单击“ promise”按钮时,它将首先显示a aa
和b b
,然后显示a aa
和b bb
。
因此答案是否定的,在这种情况下,它不会立即渲染aa - bb
,每次状态更改都会触发一个新的渲染,没有批处理。
但是,当您点击按钮“不承诺”,控制台将显示a aa
和b bb
马上。
因此,在这种情况下,React会批处理状态更改,并为两者一起进行一个渲染。
解决方法
对于类组件,this.setState
如果在事件处理程序内部,则调用批处理。但是,如果在事件处理程序外部并使用useState
钩子来更新状态,会发生什么?
function Component() {
const [a,setA] = useState('a');
const [b,setB] = useState('b');
function handleClick() {
Promise.resolve().then(() => {
setA('aa');
setB('bb');
});
}
return <button onClick={handleClick}>{a}-{b}</button>
}
它会立即渲染aa - bb
吗?还是会aa - b
然后aa - bb
呢?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。