Review

1. 2023/02/04
2. 2024-08-20 23:18

[!Summary]

一、Introduction #

createContext

Common APIs #

1. createPortal
2. flushSync
3. preconnect
4. prefetchDNS
5. preinit eagerly fetch and evaluate
6. preinitModule for ESM module.
7. preload 预加载；eagerly fetch a resource such as a stylesheet, font, or external script that you expect to use.
8. preloadModule for ESM module

createPortal #

createPortal is a method on the ReactDOM object. It is used to render a React element into another DOM element outside of the parent component. This is useful for cases like modals, popups, or tooltips where you want the component to break out of its container.

ReactDOM.createPortal(child, container);

flushSync detail #

原来的 forceUpdate 已废弃

flushSync lets you force React to flush any updates inside the provided callback synchronously. This ensures that the DOM is updated immediately.

It schedules updates to be performed inside a high-priority task, ensuring that the updates are executed immediately and synchronously before returning control to the caller.

import { flushSync } from 'react-dom';

flushSync(callback);

import { flushSync } from 'react-dom';  

flushSync(() => {  
	setSomething(123);  
});

Caveats #

• flushSync can significantly hurt performance. Use sparingly.
• flushSync may force pending Suspense boundaries to show their fallback state.
• flushSync may run pending Effects and synchronously apply any updates they contain before returning.
• flushSync may flush updates outside the callback when necessary to flush the updates inside the callback. For example, if there are pending updates from a click, React may flush those before flushing the updates inside the callback.

Flushing updates for third-party integrations #

When integrating with third-party code such as browser APIs or UI libraries, it may be necessary to force React to flush updates. Use flushSync to force React to flush any state updates inside the callback synchronously.

This is useful in situations where you need the DOM to be updated immediately, such as for measurements or to ensure synchronous rendering. However, excessive use of flushSync can lead to degraded performance, so it should be used judiciously.

preinit detail #

preinit lets you eagerly fetch and evaluate a stylesheet or external script.

import { preinit } from 'react-dom';

function AppRoot() {
	preinit("https://example.com/style.css", {as: "style", precedence: "medium"});
	preinit("https://example.com/script.js", {as: "script"});
	return ...;
}

If you want the browser to download the script but not to execute it right away, use preload instead. If you want to load an ESM module, use preinitModule.

Client APIs #

react-dom/client

1. createRoot
2. hydrateRoot

hydrateRoot detail #

hydrateRoot lets you display React components inside a browser DOM node whose HTML content was previously generated by react-dom/server.

import { hydrateRoot } from 'react-dom/client';
const root = hydrateRoot(domNode, reactNode, options?)

Server APIs #

react-dom/server

1. renderToNodeStream @Deprecated, use renderToPipeableStream instead
2. renderToPipeableStream
3. renderToReadableStream
4. renderToStaticMarkup
5. renderToStaticNodeStream
6. renderToString

renderToString #

The renderToString function in React is part of the react-dom/server package and is used to render React components on the server-side to a static HTML string. It is commonly used for server-side rendering (SSR) in React.

Reference #