ReactDOMのrender()とReact.Componentのrender()の違いを理解する #React

どちらも同じ名前のrender()というメソッドですが、やっていることは全然違いますね。

ReactDOMのrender()

ReactDOM
react-domパッケージは、アプリケーションの最上位のレベルで使用できるDOM固有のメソッドと必要に応じてReactモデルの外に出るエスケープハッチを提供しています。

render()以外にも、hydrate(), unmountComponentAtNode(), findDOMNode(), createPortal()なんかがあります。


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
Reactでは、コンポーネントをクラスまたは関数として定義できますが、クラスで定義する時にReact.Componentをextendsしてサブクラスを定義する必要があります。


render()

React.Componentのサブクラスで定義する必要のある唯一のメソッドがrender()です。
これば呼ばれると、this.propsとthis.stateを調べて次のいずれかを返す必要があります。

React elements
- 通常であればJSXで作成され、例えば<div />といったDOMノードや<MyComponent />とったユーザー定義コンポーネントです。
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要素などを返しているだけとなります。