createRoot
createRoot γ―γγγ©γ¦γΆοΏ½? DOM γγΌγε
γ« React γ³γ³γγΌγγ³γγ葨瀺γγγγοΏ½?γ«γΌγγδ½ζγγΎγγ
const root = createRoot(domNode, options?)γͺγγ‘γ¬γ³γΉ
createRoot(domNode, options?)
createRoot γεΌγ³εΊγγ¦γγγ©γ¦γΆοΏ½? DOM θ¦η΄ ε
γ«γ³γ³γγ³γγ葨瀺γγγγοΏ½? React γ«γΌγγδ½ζγγΎγγ
import { createRoot } from 'react-dom/client';
const domNode = document.getElementById('root');
const root = createRoot(domNode);React γ― domNode γ«ε―ΎεΏγγγ«γΌγγδ½ζγγγοΏ½?ε
ι¨οΏ½? DOM γοΏ½?οΏ½ηγγΎγγγ«γΌγγδ½ζγγεΎγγοΏ½?ε
ι¨γ« React γ³γ³γγΌγγ³γγ葨瀺γγγγγ« root.render γεΌγ³εΊγεΏ
θ¦γγγγΎγγ
root.render(<App />);React γ§οΏ½?οΏ½ε
¨γ«ζ§η―γγγγ’γγͺγ«γ―γγ«γΌγγ³γ³γγΌγγ³γοΏ½?γγοΏ½? createRoot εΌγ³εΊγγιεΈΈ 1 γ€οΏ½?γΏεε¨γγΎγγγγΌγΈε
γ« React γγζ£γγ°γγ¦γδ½Ώη¨γγγγΌγΈοΏ½?ε ΄εγ―γεΏ
θ¦γͺγ γθ€ζ°οΏ½?γ«γΌγγζγ€γγ¨γγ§γγΎγγ
εΌζ°
-
domNode: DOM θ¦η΄ γReact γ―γοΏ½? DOM θ¦η΄ γ«ε―ΎεΏγγγ«γΌγγδ½ζγγγ¬γ³γγΌγγγ React γ³γ³γγ³γγ葨瀺γγγγοΏ½?renderγͺγ©γι’ζ°γγ«γΌγδΈγ§εΌγ³εΊγγγγγ«γγΎγγ -
ηη₯ε―θ½
options: γοΏ½? React γ«γΌγγ«ι’γγγͺγγ·γ§γ³γε«γΎγγγͺγγΈγ§γ―γγ- ηη₯ε―θ½
onRecoverableError: React γθͺεηγ«γ¨γ©γΌγγεεΎ©γγγ¨γγ«εΌγ³εΊγγγγ³γΌγ«γγγ―γ - ηη₯ε―θ½
identifierPrefix: React γuseIdγ«γγ£γ¦ηζγγ ID γ«δ½Ώη¨γγζεεγγ¬γγ£γγ―γΉγεγγγΌγΈδΈγ«θ€ζ°οΏ½?γ«γΌγγδ½Ώη¨γγιγ«γη«ΆεγιΏγγγγγ«η¨γγΎγγ
- ηη₯ε―θ½
θΏγε€
createRoot γ―γrender γ¨ unmount οΏ½? 2 γ€οΏ½?γ‘γ½γγγζγ€γͺγγΈγ§γ―γγθΏγγΎγγ
注ζηΉ
- γ’γγͺγγ΅γΌγγ¬γ³γγͺγ³γ°γδ½Ώη¨γγ¦γγε ΄εγ
createRoot()οΏ½?δ½Ώη¨γ―γ΅γγΌγγγγ¦γγΎγγγ代γγγ«hydrateRoot()γδ½Ώη¨γγ¦γγ γγγ - γ’γγͺε
γ§
createRootγεΌγ³εΊγοΏ½?γ―ιεΈΈ 1 εγ γγ§γγγγ¬γΌγ γ―γΌγ―γδ½Ώη¨γγ¦γγε ΄εγγοΏ½?εΌγ³εΊγγ―γγ¬γΌγ γ―γΌγ―γ代γγγ«θ‘γε―θ½ζ§γγγγΎγγ - DOM γγͺγΌε
οΏ½?γγ³γ³γγΌγγ³γοΏ½?εγ§γ―γͺγε₯οΏ½?ι¨εγ« JSX γγ¬γ³γγΌγγγε ΄εοΌδΎγγ°γ’γΌγγ«γγγΌγ«γγγοΌγ
createRootοΏ½?代γγγ«createPortalγδ½Ώη¨γγ¦γγ γγγ
root.render(reactNode)
root.render γεΌγ³εΊγγ¦γReact γ«γΌγοΏ½?γγ©γ¦γΆ DOM γγΌγγ« JSXοΌβReact γγΌγβοΌγ葨瀺γγΎγγ
root.render(<App />);React γ― root γ« <App /> γ葨瀺γγγοΏ½?ε
ι¨οΏ½? DOM οΏ½?οΏ½?οΏ½ηγθ‘γγΎγγ
εΌζ°
reactNode: 葨瀺γγγ React γγΌγγιεΈΈγ―<App />οΏ½?γγγͺ JSX γ§γγγcreateElement()γ§ζ§η―γγ React θ¦η΄ γγζεεγζ°ε€γnullγγΎγγ―undefinedγζΈ‘γγγ¨γγ§γγΎγγ
θΏγε€
root.render γ― undefined γθΏγγΎγγ
注ζηΉ
-
root.renderγεγγ¦εΌγ³εΊγγγ¨γγReact γ― React γ«γΌγε οΏ½?ζ’εοΏ½? HTML γ³γ³γγ³γγγγΉγ¦γ―γͺγ’γγ¦γγγReact γ³γ³γγΌγγ³γγγ¬γ³γγΌγγΎγγ -
γ«γΌγοΏ½? DOM γγΌγγγ΅γΌγγγγ«γδΈγ« React γ«γγ£γ¦ηζγγγ HTML γε«γγ§γγε ΄εγ―γζ’εοΏ½? HTML γ«γ€γγ³γγγ³γγ©γγ’γΏγγγ§γγ
hydrateRoot()γδ½Ώη¨γγ¦γγ γγγ -
εγγ«γΌγγ«ε―Ύγγ¦
renderγθ€ζ°εεΌγ³εΊγγ¨γReact γ―ζζ°οΏ½? JSX γεζ γγγγγ«εΏ θ¦γͺγ γοΏ½? DOM οΏ½?ζ΄ζ°γθ‘γγΎγγReact γ―γζΈ‘γγγ JSX γδ»₯εγ«γ¬γ³γγΌγγγγͺγΌγ¨γγγγγ³γ°γγγ¦γDOM οΏ½?γ©οΏ½?ι¨εγεε©η¨γ§γγγ©οΏ½?ι¨εγεδ½ζγγεΏ θ¦γγγοΏ½?γγζ±ΊοΏ½?οΏ½γγΎγγεγγ«γΌγγ«ε―Ύγγ¦θ€ζ°εrenderγεΌγ³εΊγγγ¨γ―γγ«γΌγγ³γ³γγΌγγ³γγ§setι’ζ°γεΌγ³εΊγγγ¨γ«δΌΌγ¦γγγReact γ―δΈεΏ θ¦γͺ DOM ζ΄ζ°γειΏγγΎγγ
root.unmount()
root.unmount γεΌγ³εΊγγ¦γReact γ«γΌγε
γ«γ¬γ³γγΌγγγγγͺγΌγη ΄ζ£γγΎγγ
root.unmount();React γ§οΏ½?οΏ½ε
¨γ«ζ§η―γγγγ’γγͺγ«γ―γιεΈΈγroot.unmount οΏ½?εΌγ³εΊγγ―δΈεγγγΎγγγ
γγγ―δΈ»γ«γReact γ«γΌγοΏ½? DOM γγΌγοΌγΎγγ―γοΏ½?η₯ε
οΏ½?γγγγοΌγδ»οΏ½?γ³γΌγγ«γγ£γ¦ DOM γγει€γγγε―θ½ζ§γγγε ΄εγ«ζη¨γ§γγδΎγγ°γιγ’γ―γγ£γγͺγΏγγ DOM γγει€γγ jQuery οΏ½?γΏγγγγ«γγγγ¨ζ³εγγ¦γΏγ¦γγ γγγγΏγγει€γγγγ¨γοΌReact γ«γΌγγε«γγ οΌε
ι¨οΏ½?γγΉγ¦γ DOM γγει€γγγΎγγγοΏ½?ε ΄εγει€γγγγ«γΌγοΏ½?γ³γ³γγ³γοΏ½?οΏ½?οΏ½ηγγεζ’γγγγγ React γ«δΌγγγγγ« root.unmount γεΌγ³εΊγεΏ
θ¦γγγγΎγγγγγγͺγγ¨γει€γγγγ«γΌγε
οΏ½?γ³γ³γγΌγγ³γγ―γγγΌγΏθ³Όθͺγͺγ©οΏ½?γ°γγΌγγ«γͺγ½γΌγΉγγ―γͺγΌγ³γ’γγγγ¦θ§£ζΎγγεΏ
θ¦γγγγ¨γγγγ¨γεγγγͺγγΎγΎγ«γͺγγΎγγ
root.unmount γεΌγ³εΊγγγ¨γ§γγ«γΌγε
οΏ½?γγΉγ¦οΏ½?γ³γ³γγΌγγ³γγγ’γ³γγ¦γ³γγγγReact γγ«γΌγ DOM γγΌγγγγεγι’γγγγΎγγγγγ«γ―γγγͺγΌε
οΏ½?γ€γγ³γγγ³γγ©γ state οΏ½?ει€γε«γΎγγΎγγ
εΌζ°
root.unmount γ―εΌζ°γεγδ»γγΎγγγ
θΏγε€
root.unmount γ― undefined γθΏγγΎγγ
注ζηΉ
-
root.unmountγεΌγ³εΊγγ¨γγγͺγΌε οΏ½?γγΉγ¦οΏ½?γ³γ³γγΌγγ³γγγ’γ³γγ¦γ³γγγγReact γγ«γΌγ DOM γγΌγγγγεγι’γγγγΎγγ -
root.unmountγεΌγ³εΊγγεΎγεδΈγ«γΌγγ§εεΊ¦root.renderγεΌγ³εΊγγγ¨γ―γ§γγΎγγγγ’γ³γγ¦γ³γζΈγΏοΏ½?γ«γΌγγ§root.renderγεΌγ³εΊγγγ¨γγγ¨γβCannot update an unmounted rootβ γ¨γγγ¨γ©γΌγγΉγγΌγγγΎγγγγ γγγγ DOM γγΌγγ«ε―Ύγγδ»₯εοΏ½?γ«γΌγγγ’γ³γγ¦γ³γγγγεΎγ§γεγ DOM γγΌγγ«ε―Ύγγ¦ζ°γγγ«γΌγγδ½ζγγγγ¨γ―ε―θ½γ§γγ
δ½Ώη¨ζ³
React γ§οΏ½?οΏ½ε ¨γ«ζ§η―γγγγ’γγͺοΏ½?γ¬γ³γγΌ
γ’γγͺγοΏ½?οΏ½ε ¨γ« React γ§ζ§η―γγγ¦γγε ΄εγ―γγ’γγͺε ¨δ½οΏ½?γγοΏ½?εδΈοΏ½?γ«γΌγγδ½ζγγΎγγ
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />);ιεΈΈγγοΏ½?γ³γΌγγ―θ΅·εζγ«δΈεΊ¦γ γοΏ½?οΏ½θ‘γγεΏ θ¦γγγγΎγγγοΏ½?γ³γΌγγ―δ»₯δΈοΏ½?γγ¨γθ‘γγΎγγ
- HTML γ§οΏ½?οΏ½ηΎ©γγγ¦γγγγ©γ¦γΆοΏ½? DOM γγΌγγθ¦γ€γγΎγγ
- γ’γγͺοΏ½? React γ³γ³γγΌγγ³γγγοΏ½?ε ι¨γ«θ‘¨η€ΊγγΎγγ
import { createRoot } from 'react-dom/client'; import App from './App.js'; import './styles.css'; const root = createRoot(document.getElementById('root')); root.render(<App />);
γ’γγͺγοΏ½?οΏ½ε
¨γ« React γ§ζ§η―γγγ¦γγε ΄εγγγγ«γ«γΌγγδ½ζγγγγroot.render γεεΊ¦εΌγ³εΊγγγγγεΏ
θ¦γ―γγγΎγγγ
γοΏ½?ζηΉγγγReact γγ’γγͺε
¨δ½οΏ½? DOM γοΏ½?οΏ½ηγγΎγγγγγ«γ³γ³γγΌγγ³γγθΏ½ε γγγ«γ―γApp γ³γ³γγΌγγ³γοΏ½?δΈγ«γγΉγγγΎγγUI γζ΄ζ°γγεΏ
θ¦γγγε ΄εγεγ³γ³γγΌγγ³γγ state γδ½Ώη¨γγ¦θ‘γγΎγγγ’γΌγγ«γγγΌγ«γγγγͺγ©οΏ½?θΏ½ε γ³γ³γγ³γγγοΏ½? DOM γγΌγοΏ½?ε€ι¨γ«θ‘¨η€ΊγγεΏ
θ¦γγγε ΄εγγγΌγΏγ«γδ½Ώγ£γ¦γ¬γ³γγΌγγΎγγ
React γ§ι¨εηγ«ζ§η―γγγγγΌγΈοΏ½?γ¬γ³γγΌ
γγΌγΈγοΏ½?οΏ½ε
¨γ«γ― React γ§ζ§η―γγγ¦γγͺγε ΄εγcreateRoot γθ€ζ°εεΌγ³εΊγγ¦γReact γ«οΏ½?οΏ½ηγγγγγγγγ¬γγ«οΏ½?ε UI γγΌγγ«ε―Ύγγ¦γ«γΌγγδ½ζγγγγ¨γγ§γγΎγγεγ«γΌγγ§ root.render γεΌγ³εΊγγ¦γγγγγγ«η°γͺγγ³γ³γγ³γγ葨瀺γγγγ¨γγ§γγΎγγ
δ»₯δΈγ§γ―γindex.html γγ‘γ€γ«γ«οΏ½?οΏ½ηΎ©γγγ¦γγ 2 γ€οΏ½?η°γͺγ DOM γγΌγγ« 2 γ€οΏ½?η°γͺγ React γ³γ³γγΌγγ³γγγ¬γ³γγΌγγγ¦γγΎγγ
import './styles.css'; import { createRoot } from 'react-dom/client'; import { Comments, Navigation } from './Components.js'; const navDomNode = document.getElementById('navigation'); const navRoot = createRoot(navDomNode); navRoot.render(<Navigation />); const commentDomNode = document.getElementById('comments'); const commentRoot = createRoot(commentDomNode); commentRoot.render(<Comments />);
γΎγγdocument.createElement() γδ½Ώη¨γγ¦ζ°γγ DOM γγΌγγδ½ζγγγγγζεγ§γγγ₯γ‘γ³γγ«θΏ½ε γγγγ¨γγ§γγΎγγ
const domNode = document.createElement('div');
const root = createRoot(domNode);
root.render(<Comment />);
document.body.appendChild(domNode); // You can add it anywhere in the documentDOM γγΌγγγ React γγͺγΌγει€γγγγγ«γγ£γ¦δ½Ώη¨γγγγγΉγ¦οΏ½?γͺγ½γΌγΉγγ―γͺγΌγ³γ’γγγγγ«γ―γroot.unmount γεΌγ³εΊγγΎγγ
root.unmount();γγγ―δΈ»γ«γReact γ³γ³γγΌγγ³γγε₯οΏ½?γγ¬γΌγ γ―γΌγ―γ§ζΈγγγγ’γγͺοΏ½?δΈγ«γγε ΄εγ«ε½Ήη«γ‘γΎγγ
γ«γΌγγ³γ³γγΌγγ³γοΏ½?ζ΄ζ°
εγγ«γΌγγ«ε―Ύγγ¦ render γθ€ζ°εεΌγ³εΊγγγ¨γγ§γγΎγγγ³γ³γγΌγγ³γγγͺγΌοΏ½?ζ§ι γδ»₯εγ«γ¬γ³γγΌγγγγοΏ½?γ¨δΈθ΄γγ¦γγγ°γReact γ― state γδΏζγγΎγγδ»₯δΈοΏ½?δΎγ§ε
₯εγγ£γΌγ«γγ«γΏγ€γγ§γγγγ¨γ«ηοΏ½?γγ¦γγ γγγγ€γΎγζ―η§ render γηΉ°γθΏγεΌγ³εΊγγγ¦γγΎγγγζ΄ζ°γ«γγ DOM γη ΄ε£γγγ¦γγͺγγ¨γγγγ¨γ§γγ
import { createRoot } from 'react-dom/client'; import './styles.css'; import App from './App.js'; const root = createRoot(document.getElementById('root')); let i = 0; setInterval(() => { root.render(<App counter={i} />); i++; }, 1000);
render γθ€ζ°εεΌγ³εΊγγγ¨γ―ζ»
ε€γ«γγγΎγγγιεΈΈγγ³γ³γγΌγγ³γγ―代γγγ« state οΏ½?ζ΄ζ°γθ‘γγΎγγ
γγ©γγ«γ·γ₯γΌγγ£γ³γ°
γ«γΌγγδ½ζγγγδ½γ葨瀺γγγͺγ
γ’γγͺγοΏ½?οΏ½ιγ«γ«γΌγγ«γ¬γ³γγΌγγοΏ½?γεΏγγ¦γγͺγγη’Ίθͺγγ¦γγ γγγ
import { createRoot } from 'react-dom/client';
import App from './App.js';
const root = createRoot(document.getElementById('root'));
root.render(<App />);γγγθ‘γγΎγ§γ―δ½γ葨瀺γγγΎγγγ
βTarget container is not a DOM elementβ γ¨γγγ¨γ©γΌγεΊγ
γοΏ½?γ¨γ©γΌγ―γcreateRoot γ«ζΈ‘γγ¦γγγοΏ½?γ DOM γγΌγγ§γͺγγγ¨γζε³γγΎγγ
δ½γθ΅·γγ£γ¦γγοΏ½?γγγγγͺγε ΄εγ―γγγ°γεΊεγγ¦γΏγ¦γγ γγγ
const domNode = document.getElementById('root');
console.log(domNode); // ???
const root = createRoot(domNode);
root.render(<App />);δΎγγ°γdomNode γ null οΏ½?ε ΄εγgetElementById γ null γθΏγγγγ¨γζε³γγΎγγγγγ―γεΌγ³εΊγζηΉγ§γγγ₯γ‘γ³γε
γ«ζοΏ½?οΏ½γγ ID οΏ½?γγΌγγεε¨γγͺγε ΄εγ«ηΊηγγΎγγγγγͺγηη±γ―γγγ€γθγγγγΎγγ
- ζ’γγ¦γγ ID γ HTML γγ‘γ€γ«γ§δ½Ώη¨γγ ID γ¨η°γͺγ£γ¦γγγγΏγ€γγγΉγγγ§γγ―γγ¦γγ γγοΌ
- DOM γγΌγγγγ³γγ«οΏ½?
<script>γΏγ°γγεΎγγ«γγγγγγΉγ―γͺγγγγγθ¦γγγͺγγ
γοΏ½?γ¨γ©γΌγηΊηγγγγγ²γ¨γ€οΏ½?δΈθ¬ηγͺηη±γ―γcreateRoot(domNode) γ§γ―γͺγ createRoot(<App />) γ¨ζΈγγ¦γγΎγ£γ¦γγγγ¨γ§γγ
βFunctions are not valid as a React child.β γ¨γγγ¨γ©γΌγεΊγ
γοΏ½?γ¨γ©γΌγ―γroot.render γ«ζΈ‘γγ¦γγγοΏ½?γ React γ³γ³γγΌγγ³γγ§γͺγγγ¨γζε³γγΎγγ
γγγ―γroot.render γ <Component /> γ§γ―γͺγ Component οΏ½?γγγ«εΌγ³εΊγγε ΄εγ«ηΊηγγγγ¨γγγγΎγγ
// π© Wrong: App is a function, not a Component.
root.render(App);
// β
Correct: <App /> is a component.
root.render(<App />);γΎγγ―γroot.render γ«ι’ζ°γεΌγ³εΊγγη΅ζγ§γ―γͺγι’ζ°θͺδ½γζΈ‘γγ¦γγΎγ£γε ΄εγ«γηΊηγγΎγγ
// π© Wrong: createApp is a function, not a component.
root.render(createApp);
// β
Correct: call createApp to return a component.
root.render(createApp());γ΅γΌγγ¬γ³γγͺγ³γ°γγγ HTML γεδ½ζγγγ
γ’γγͺγγ΅γΌγγ§γ¬γ³γγΌγγε½’εΌγ§γγγReact γ«γγ£γ¦ηζγγγεζ HTML γγγε ΄εγγ«γΌγγδ½ζγγ¦ root.render γεΌγ³εΊγγ¨γγοΏ½? HTML γγγΉγ¦ει€γγγ¦ DOM γγΌγγγΌγγγεδ½ζγγγγγ¨γ«ζ°δ»γγγγγγγγΎγγγγγγ«γγε¦ηγι
γγͺγγγγ©γΌγ«γΉγγΉγ―γγΌγ«δ½οΏ½?γγͺγ»γγγγγγ¦γΌγΆε
₯εγε€±γγγε―θ½ζ§γγγγΎγγ
γ΅γΌγγ§γ¬γ³γγΌγγγγ’γγͺγ―γcreateRoot οΏ½?代γγγ« hydrateRoot γδ½Ώη¨γγεΏ
θ¦γγγγΎγγ
import { hydrateRoot } from 'react-dom/client';
import App from './App.js';
hydrateRoot(
document.getElementById('root'),
<App />
);API γη°γͺγγγ¨γ«ζ³¨ζγγ¦γγ γγγηΉγ«γιεΈΈγ―γοΏ½?εΎγγγ« root.render γεΌγ³εΊγγγ¨γ―γγγΎγγγ