ReactDOM.render

既にrenderingされている場合は、その要素を更新する

React v18ではサポートされてない

定義場所

code:flow(ts)

function render(

element: React$Element<any>,

container: Container,

callback: ?Function,

): React$Component<any, any> | PublicInstance | null

引数

element

renderingするReactElement

container

ReactElementをrenderingするDOM要素

callback

Componentがrendering/updateされた後に実行されるcb

返り値

renderingされたComponentの参照を返す

stateless componentの場合はnullを返す

簡易的な再実装

code:js

export function render(element, container) {

const dom =

element.type === "TEXT_ELEMENT"

? document.createTextNode("")

: document.createElement(element.type);

// 属性を更新

Object.keys(element.props)

.filter((key) => key !== "children")

.forEach((name) => {

});

// childrenを再帰的にレンダリング

element.props.children.forEach((child) => {

render(child, dom);

});

// containerにdomを追加

container.appendChild(dom);

}

第1引数がReactElementのツリーになっているので、そこからdomを作って、rendering、というのを子に対して再帰的に行う

これをroot要素に対して一発呼ぶ

code:js

ToyReactDOM.render(<App />, document.getElementById('root'));

GPT-4.icon

ReactDOM.render() は、指定されたコンテナの内容を制御します。初回の呼び出し時にコンテナ内の既存の DOM 要素は置き換えられ、後続の呼び出しでは React の DOM 差分アルゴリズムを使用して効率的に更新されます。

このメソッドは、コンテナの子要素のみを変更し、コンテナノード自体は変更しません。