[详 细 解 析] [详 细 解 析] [详 细 解 析] [详 细 解 析] [详 细 解 析] [详 细 解 析]
Writing in the front
Recently in learning React18 relevant updates, also can saying is a whim want to translate some thing, also is for their own learning, also want to learn together with the community students, first time translation, semantics may be different, there are a lot of students if there are any wrong place, you can refer to the original, also expect students to point out that this paper is not the fact.
An overview of the
React 18 adds out-of-the-box performance improvements by doing more batching by default, removing manual batch updates in application or library code. This article will explain what batch processing is, how it used to work, and what has changed.
Note: This is an underlying new feature (new change) that we don’t want to make many users think. However, it may be relevant to educators and library developers.
What is batch processing
Batch processing is the merging of a set of status updates into a single re-render for better performance.
For example, if you have two states that need to be updated in a click event, React will always put them in a re-render. If you click on the code below, you’ll notice that React only rerenders once every time you click, even though you updated the state twice.
function App() {
const [count, setCount] = useState(0);
const [flag, setFlag] = useState(false);
function handleClick() {
setCount(c= > c + 1); // Do not rerender for the time being
setFlag(f= >! f);// Do not rerender for the time being
// React will only be rerendered one last time
// React will only re-render once at the end (that's batching!)
}
return (
<div>
<button onClick={handleClick}>Next</button>
<h1 style={{ color: flag ? "blue" : "black}} ">{count}</h1>
</div>
);
}
Copy the codeReact 17 Batches Inside Event Handlers
This is a great performance boost because it avoids a lot of unnecessary rerendering. It can also prevent your component from showing a half-finished state due to a single state update, and some may even cause problems. This might remind you that the server doesn’t go to the kitchen to place your order until after you’ve finished, not right after you order your first dish.
But react doesn’t behave consistently in batch processing. For example, if you take online data and update the status in a callback, React doesn’t batch those updates, but instead makes separate updates.
This is because React used to do batch processing only at browser time (click, for example), but we update the state in the callback that handles the event
function App() {
const [count, setCount] = useState(0);
const [flag, setFlag] = useState(false);
function handleClick() {
fetchSomething().then(() = > {
// React 17 and earlier does NOT batch these because
// they run *after* the event in a callback, not *during* it
setCount(c= > c + 1); // Causes a re-render
setFlag(f= >! f);// Causes a re-render
});
}
return (
<div>
<button onClick={handleClick}>Next</button>
<h1 style={{ color: flag ? "blue" : "black}} ">{count}</h1>
</div>
);
}
Copy the codeReact 17 does NOT batch outside event handlers.
Until Act18, we only did batch processing in React event handling. We will not do batch processing in the Promise setTimeout Native Event Handle.
What is automatic batching
Focusing on Act18, all updates are automatically batched, no matter where they come from.
This means that promise native Event Handles, or any other Event, will be batched like React events. We expect this to result in less rerendering and better performance in your application.
function App() {
const [count, setCount] = useState(0);
const [flag, setFlag] = useState(false);
function handleClick() {
fetchSomething().then(() = > {
// React 18 and later DOES batch these:
setCount(c= > c + 1);
setFlag(f= >! f);// React will only re-render once at the end (that's batching!)
});
}
return (
<div>
<button onClick={handleClick}>Next</button>
<h1 style={{ color: flag ? "blue" : "black}} ">{count}</h1>
</div>
);
}
Copy the code-
✅ Demo: React 18 with
createRootbatches even outside event handlers! (Notice one render per click in the console!) -
🟡 Demo: React 18 with legacy
renderkeeps the old behavior (Notice two renders per click in the console.)
React automatically batches updates regardless of where they come from, as in the following example
function handleClick() {
setCount(c= > c + 1);
setFlag(f= >! f);// React will only re-render once at the end (that's batching!)
}
Copy the codeThe following example shows the same
setTimeout(() = > {
setCount(c= > c + 1);
setFlag(f= >! f);// React will only re-render once at the end (that's batching!)
}, 1000);
Copy the codefetch(/ *... * /).then(() = > {
setCount(c= > c + 1);
setFlag(f= >! f);// React will only re-render once at the end (that's batching!)
})
Copy the codeelm.addEventListener('click'.() = > {
setCount(c= > c + 1);
setFlag(f= >! f);// React will only re-render once at the end (that's batching!)
});
Copy the codeNote: React ensures that each batch is secure. React ensures that for each user-initiated event, such as a click or keystroke, the DOM will be updated before the next event. For example,
What if I don’t want batch processing
In general, batch processing is safe, but some code may rely on getting something from the DOM immediately after a status update. Reactdom.flushsync () is used to exit batch processing
import { flushSync } from 'react-dom'; // Note: react-dom, not react
function handleClick() {
flushSync(() = > {
setCounter(c= > c + 1);
});
// React has updated the DOM by now
flushSync(() = > {
setFlag(f= >! f); });// React has updated the DOM by now
}
Copy the codeWe don’t want this to become common practice
Whether this will affect the function of hook
If you are using hook we expect batch processing to work (please let us know if it doesn’t)
Does this affect class functionality
Remember that updates in React time are always batched, so there is no impact on these updates.
So here are some boundary cases that we can talk about
handleClick = () = > {
setTimeout(() = > {
this.setState(({ count }) = > ({ count: count + 1 }));
// { count: 1, flag: false }
console.log(this.state);
this.setState(({ flag }) = > ({ flag: !flag }));
});
};
Copy the codeIn Act18 this won’t be a problem, because even updates in setTimeout will be batched, React won’t render the first setState synchronously, the render will appear in the next frame of the browser, so the render hasn’t been updated yet
handleClick = () = > {
setTimeout(() = > {
this.setState(({ count }) = > ({ count: count + 1 }));
// { count: 0, flag: false }
console.log(this.state);
this.setState(({ flag }) = > ({ flag: !flag }));
});
};
Copy the codeCase.
If this prevents you from updating React18, you can use reactdom.flushsync to force the update, but we recommend caution
handleClick = () = > {
setTimeout(() = > {
ReactDOM.flushSync(() = > {
this.setState(({ count }) = > ({ count: count + 1 }));
});
// { count: 1, flag: false }
console.log(this.state);
this.setState(({ flag }) = > ({ flag: !flag }));
});
};
Copy the codeCase.
This problem does not affect function components that have hooks, because updating state does not update existing variables in useState.
function handleClick() {
setTimeout(() = > {
console.log(count); / / 0
setCount(c= > c + 1);
setCount(c= > c + 1);
setCount(c= > c + 1);
console.log(count); / / 0
}, 1000)
Copy the codeWhile this behavior may surprise you when you use hooks, it paved the way for automatic batching.
aboutunstable_batchedUpdates
Batch multiple updates, typically in functions such as setTimeout that didn’t batch before React 18
import { unstable_batchedUpdates } from 'react-dom';
unstable_batchedUpdates(() = > {
setCount(c= > c + 1);
setFlag(f= >! f); });Copy the codeThe API still exists in Act18, but it’s no longer needed because of automatic batching. We won’t remove it in version 18 for now, but it may be removed once the main React library no longer relies on it