render
render γ―γγγ©γ¦γΆοΏ½? DOM γγΌγγ« JSXοΌβReact γγΌγβοΌγγ¬γ³γγΌγγΎγγ
render(reactNode, domNode, callback?)γͺγγ‘γ¬γ³γΉ
render(reactNode, domNode, callback?)
render γεΌγ³εΊγγ¦γγγ©γ¦γΆοΏ½? DOM θ¦η΄ γ« React γ³γ³γγΌγγ³γγ葨瀺γγΎγγ
import { render } from 'react-dom';
const domNode = document.getElementById('root');
render(<App />, domNode);React γ― domNode ε
γ« <App /> γ葨瀺γγγοΏ½?ε
ι¨οΏ½? DOM οΏ½?οΏ½?οΏ½ηγθ‘γγΎγγ
React γ§οΏ½?οΏ½ε
¨γ«ζ§η―γγγγ’γγͺγ«γ―γγ«γΌγγ³γ³γγΌγγ³γγεΌζ°γ«γγ render εΌγ³εΊγγιεΈΈ 1 γ€οΏ½?γΏεε¨γγΎγγγγΌγΈε
γ« React γγζ£γγ°γγ¦γδ½Ώη¨γγγγΌγΈοΏ½?ε ΄εγ―γεΏ
θ¦γͺγ γ render γεΌγ³εΊγγγ¨γγ§γγΎγγ
εΌζ°
-
reactNode: 葨瀺γγγ React γγΌγγιεΈΈγ―<App />οΏ½?γγγͺ JSX γ§γγγcreateElement()γ§ζ§η―γγ React θ¦η΄ γγζεεγζ°ε€γnullγγΎγγ―undefinedγζΈ‘γγγ¨γγ§γγΎγγ -
domNode: DOM θ¦η΄ γReact γ―γζΈ‘γγγreactNodeγγοΏ½? DOM θ¦η΄ ε γ«θ‘¨η€ΊγγΎγγγοΏ½?η¬ιγγγReact γ―domNodeε οΏ½? DOM γοΏ½?οΏ½ηγγReact γγͺγΌγε€ζ΄γγγγ¨γγ«γγγζ΄ζ°γγγγγ«γͺγγΎγγ -
ηη₯ε―θ½
callback: ι’ζ°γζΈ‘γγγε ΄εγReact γ―γ³γ³γγΌγγ³γγ DOM γ«ι οΏ½?γγγεΎγ«γγγεΌγ³εΊγγΎγγ
θΏγε€
render γ―ιεΈΈ null γθΏγγΎγγγγ γγζΈ‘γ reactNode γγ―γ©γΉγ³γ³γγΌγγ³γοΏ½?ε ΄εγγοΏ½?γ³γ³γγΌγγ³γοΏ½?γ€γ³γΉγΏγ³γΉγθΏγγΎγγ
注ζηΉ
-
React 18 γ§γ―γ
renderγ―createRootγ«οΏ½?γζγγγγΎγγγReact 18 δ»₯ιγ§γ―createRootγδ½Ώη¨γγ¦γγ γγγ -
renderγεγγ¦εΌγ³εΊγγγ¨γγReact γ― React γ«γΌγε οΏ½?ζ’εοΏ½? HTML γ³γ³γγ³γγγγΉγ¦γ―γͺγ’γγ¦γγγReact γ³γ³γγΌγγ³γγγ¬γ³γγΌγγΎγγdomNodeγγ΅γΌγδΈγ§γγγγ―γγ«γδΈγ« React γ«γγ£γ¦ηζγγγ HTML γε«γγ§γγε ΄εγ―γ代γγγ«ζ’εοΏ½? HTML γ«γ€γγ³γγγ³γγ©γγ’γΏγγγ§γγhydrate()γδ½Ώη¨γγ¦γγ γγγ -
εγ
domNodeγ«ε―Ύγγ¦renderγθ€ζ°εεΌγ³εΊγγ¨γReact γ―ζζ°οΏ½? JSX γεζ γγγγγ«εΏ θ¦γͺγ γοΏ½? DOM οΏ½?ζ΄ζ°γθ‘γγΎγγReact γ―γζΈ‘γγγ JSX γδ»₯εγ«γ¬γ³γγΌγγγγͺγΌγ¨γγγγγ³γ°γγγ¦γDOM οΏ½?γ©οΏ½?ι¨εγεε©η¨γ§γγγ©οΏ½?ι¨εγεδ½ζγγεΏ θ¦γγγοΏ½?γγζ±ΊοΏ½?οΏ½γγΎγγεγdomNodeγ«ε―Ύγγ¦θ€ζ°εrenderγεΌγ³εΊγγγ¨γ―γγ«γΌγγ³γ³γγΌγγ³γγ§setι’ζ°γεΌγ³εΊγγγ¨γ«δΌΌγ¦γγγReact γ―δΈεΏ θ¦γͺ DOM ζ΄ζ°γειΏγγΎγγ -
γ’γγͺγοΏ½?οΏ½ε ¨γ« React γ§ζ§η―γγγ¦γγε ΄εγγ’γγͺε γ§
renderγεΌγ³εΊγοΏ½?γ―ιεΈΈ 1 εγ γγ§γγοΌγγ¬γΌγ γ―γΌγ―γδ½Ώη¨γγ¦γγε ΄εγγοΏ½?εΌγ³εΊγγ―γγ¬γΌγ γ―γΌγ―γθ‘γγγγγγΎγγγοΌDOM γγͺγΌε οΏ½?γγ³γ³γγΌγγ³γοΏ½?εγ§γ―γͺγε₯οΏ½?ι¨εγ« JSX γγ¬γ³γγΌγγγε ΄εοΌδΎγγ°γ’γΌγγ«γγγΌγ«γγγοΌγcreateRootοΏ½?代γγγ«createPortalγδ½Ώη¨γγ¦γγ γγγ
δ½Ώη¨ζ³
render γεΌγ³εΊγγ¦γReact γ³γ³γγΌγγ³γγγγ©γ¦γΆοΏ½? DOM γγΌγε
γ«θ‘¨η€ΊγγΎγγ
import { render } from 'react-dom';
import App from './App.js';
render(<App />, document.getElementById('root'));γ«γΌγγ³γ³γγΌγγ³γοΏ½?γ¬γ³γγΌ
React γ§οΏ½?οΏ½ε ¨γ«ζ§η―γγγγ’γγͺγ§γ―ιεΈΈγβγ«γΌγβ γ³γ³γγΌγγ³γγγ¬γ³γγΌγγγγγ«γΉγΏγΌγγ’γγζγ«γγγδΈεΊ¦γ γθ‘γγΎγγ
import './styles.css'; import { render } from 'react-dom'; import App from './App.js'; render(<App />, document.getElementById('root'));
ιεΈΈγrender γεεΊ¦εΌγ³εΊγγγθ€ζ°οΏ½?ε ΄ζγ§εΌγ³εΊγγγγγεΏ
θ¦γ―γγγΎγγγγοΏ½?ζηΉγγγReact γ―γ’γγͺγ±γΌγ·γ§γ³οΏ½? DOM γοΏ½?οΏ½ηγγΎγγUI γζ΄ζ°γγγ«γ―γγ³γ³γγΌγγ³γγ state γδ½Ώη¨γγΎγγ
θ€ζ°οΏ½?γ«γΌγοΏ½?γ¬γ³γγΌ
γγΌγΈγοΏ½?οΏ½ε
¨γ«γ― React γ§ζ§η―γγγ¦γγͺγε ΄εγReact γ«οΏ½?οΏ½ηγγγγγγγγ¬γγ«οΏ½? UI γγΌγγ«ε―Ύγγ¦γγγγ render γεΌγ³εΊγγγ¨γγ§γγΎγγ
import './styles.css'; import { render } from 'react-dom'; import { Comments, Navigation } from './Components.js'; render( <Navigation />, document.getElementById('navigation') ); render( <Comments />, document.getElementById('comments') );
γ¬γ³γγΌγγγγγͺγΌγ― unmountComponentAtNode() γ§η ΄ζ£γγγγ¨γγ§γγΎγγ
γ¬γ³γγΌγγγγγͺγΌοΏ½?ζ΄ζ°
εγ DOM γγΌγγ«ε―Ύγγ¦ render γθ€ζ°εεΌγ³εΊγγγ¨γγ§γγΎγγγ³γ³γγΌγγ³γγγͺγΌοΏ½?ζ§ι γδ»₯εγ«γ¬γ³γγΌγγγγοΏ½?γ¨δΈθ΄γγ¦γγγ°γReact γ― state γδΏζγγΎγγδ»₯δΈοΏ½?δΎγ§ε
₯εγγ£γΌγ«γγ«γΏγ€γγ§γγγγ¨γ«ηοΏ½?γγ¦γγ γγγγ€γΎγζ―η§ render γηΉ°γθΏγεΌγ³εΊγγγ¦γγΎγγγζ΄ζ°γ«γγ DOM γη ΄ε£γγγ¦γγͺγγ¨γγγγ¨γ§γγ
import { render } from 'react-dom'; import './styles.css'; import App from './App.js'; let i = 0; setInterval(() => { render( <App counter={i} />, document.getElementById('root') ); i++; }, 1000);
render γθ€ζ°εεΌγ³εΊγγγ¨γ―ζ»
ε€γ«γγγΎγγγιεΈΈγ代γγγ«γ³γ³γγΌγγ³γγ§ state οΏ½?ζ΄ζ°γθ‘γγΎγγ