[Reac] React 18

本文主要是介绍[Reac] React 18，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

Replace Legacy Root API with New Root API

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

Use React 18's New Root API Alongside the Legacy Root API

Behavior of each type of API for React 17 and 18:

let root1 = document.getElementById("root");
let root2 = document.getElementById("root-2");

ReactDOM.createRoot(root1).render(<App root="18" />);
ReactDOM.render(<App root="17" />, root2)

Replace Legacy Root API's Callback Argument

React's legacy root API (render) took a callback function. React called this function once the post-render. With new streaming capabilities scheduled for React 18, this feature becomes unpredictable. Replace it with a ref callback — or one of these other strategies.

There are several ways to fix the previous warning. First one is by using useEffect

function App() {
   React.useEffect(() => console.log("React rendered"), [])
   return <div> Hello, React! </div>
}

we can also use callback function:

ReactDOM.createRoot(root).render(
   <App callback={(ref) => console.log(ref.tagName)} />
   );

function App({ callback }) {
   return <div ref={callback}> Hello, React! </div>
}

Conditionally Render with Legacy Root API or New Root API

const REACT_18 = true; 

if (REACT_18) {
   ReactDOM.createRoot(root).render(<App />);
} else {
   ReactDOM.render(<App />, root);
}

Opt-in to Automatic Batching with createRoot

In previous versions of React, state update batching only happened inside of event handlers. In React 18, all updates are batched, regardless of when or where they are called. Opt into automatic batching with createRoot.

function App() {
    let [count, updateCount] = React.useState(1);
    let [isOdd, updateIsOdd] = React.useState(true);

    function handleClick() {
        setTimeout(() => {
            updateCount((count) => count + 1);
            updateIsOdd((oddness) => !oddness);
        }, 0);
    }

    console.count("re-rendered");

    return (
        <div>
            <button type="button" onClick={handleClick}>
                {count} {isOdd.toString()}
            </button>
        </div>
    );
}

In v17, each time button was clicked, will console log two times. This is because we call the update function in setTimeout.

If we did following, then it only log once

    function handleClick() {
       updateCount((count) => count + 1);
       updateIsOdd((oddness) => !oddness);
    }

But in v18 the problem was solved.

Remove unstable_batchedUpdates Calls

React 17 exposes an undocumented API named unstable_batchedUpdates. It batches multiple useState update calls — inside of asynchronous callbacks — and reduces extraneous renders.

In React 18, all useState updates are batched, making unstable_batchedUpdates inert. Remove all uses of unstable_batchedUpdates.

Opt-out of Automatic Batching with ReactDOM.flushSync

In React 18, useState update calls are batched for improved performance. A new API — ReactDOM.flushSync — lets us selectively escape batching. This option is useful when reading the DOM after state changes. Use ReactDOM.flushSync to exempt specific state updates from batching.

ReactDOM.flushSync(() => {
    updateCount((count) => count + 1)
});
updateIsOdd((oddness) =>!oddness)

这篇关于[Reac] React 18的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！