我收到了setTimeout handler took 500 ms嚴重阻塞我的應用程式型別的 chrome 違規錯誤，并且每次附加到 websocket 有效負載的操作出現并被處理時都會發生一些錯誤。我嘗試使用 chrome profiler 除錯它，這就是它在處理有效負載時準確顯示的內容。
https://imgur.com/a/ZnS0ZlG
該(anonymous)函式是reducer中的一個，運行的時間與錯誤一致。
這是一些代碼。
// ACTION
const someAction = (data): Thunk => async dispatch => {
try {
const t = performance.now();
dispatch(someAction(data));
console.log('after dispatching cellReceived', performance.now() - t);
// logs 800 ms and is consistent with chrome violation errors (setTimeout handler took <N> ms
}
}
// REDUCER
export default(state: State, action: Actions) {
switch(action.type) {
...
case ActionType.someAction: {
const { data } = action.payload;
const t = performance.now();
(... do calculations here)
console.log(performance.now() - t) // logs 30ms
}
}
}
我將不勝感激任何幫助，這周我一定花了 20 多個小時閱讀有關此問題并嘗試對其進行除錯。我沒有找到任何關于如何使用 chrome 的分析器正確除錯的好資源。
uj5u.com熱心網友回復：
它實際上并不需要是 dispatch 或 reducer。在某些情況下，React 會同步開始重新渲染，這是dispatch- 所以在您的console.log('after dispatching cellReceived', performance.now() - t); 行之前的直接結果
所以這也可能是一個非常慢的 React 渲染。
如果您想確保：
import { batch } from 'react-redux'
const someAction = (data): Thunk => async dispatch => {
try {
batch(() => {
const t = performance.now();
dispatch(someAction(data));
console.log('after dispatching cellReceived', performance.now() - t);
})
} catch {/*...*/}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/363491.html