どちらも同じ名前のrender()というメソッドですが、やっていることは全然違いますね。
ReactDOMのrender()
そもそもReactDOMって？
ReactDOM
react-domパッケージは、アプリケーションの最上位のレベルで使用できるDOM固有のメソッドと必要に応じてReactモデルの外に出るエスケープハッチを提供しています。
render()以外にも、hydrate(), unmountComponentAtNode(), findDOMNode(), createPortal()なんかがあります。
render()
ReactDOM.render(element, container[, callback])
ReactDOM.render()はReact要素を指定されたcontainerの中のDOMにレンダリングし、そのコンポーネントへの参照を返します。(ステートレスの場合はnull)
React要素がすでにcontainerにレンダリングされていた場合、最新のReact要素を反映するために必要に応じてDOMを更新するだけとなります。
callbackがある場合はコンポーネントのレンダリングまたは更新後に実行されます。
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
この場合はrootのIDをもつDOM要素(コンテナ)に<h1>Hello, world</h1>という要素をレンダリングします。
ReactDOM.render()は、渡したコンテナノードの内容を制御しており、内部の既存のDOM要素は最初の呼び出しで全て置き換えられ、その後の呼び出しでは効率的な更新のために差分を利用します(DOM diffing algorithm)
React.Componentのrender()
そもそもReact.Componentって？
React.Component
Reactでは、コンポーネントをクラスまたは関数として定義できますが、クラスで定義する時にReact.Componentをextendsしてサブクラスを定義する必要があります。
render()
render()
React.Componentのサブクラスで定義する必要のある唯一のメソッドがrender()です。
これば呼ばれると、this.propsとthis.stateを調べて次のいずれかを返す必要があります。
-
React elements
- 通常であればJSXで作成され、例えば
<div />といったDOMノードや<MyComponent />とったユーザー定義コンポーネントです。
- 通常であればJSXで作成され、例えば
-
Array and fragments
- 複数の要素を返すようにします。詳しくはFragments参照
-
Portals
- 子要素を別のDOMサブツリーにレンダリングさせます。（親要素の階層の外にレンダリング可能）。詳しくはportals
-
String and numbers
- DOM内のテキストノードとしてレンダリングされます。
-
Booleans or null
- なにもレンダリングしません。(
return test && <Child />パターンをサポートするため、testはブール値)
- なにもレンダリングしません。(
class Welcome extends React.Component {
render() {
return !!this.props.name && <h1>Hello, {this.props.name}</h1>;
}
}
この場合だとthis.props.nameを調べてから<h1>Hello, {this.props.name}</h1>という要素を返していますね(this.props.nameがない場合はfalse)。
まとめ
React.DOMのrender()が実際のDOM要素にレンダリングを行なっているのに対し、
React.Componentのrender()はthis.propsとthis.stateを調べた後React要素などを返しているだけとなります。