react プログラミング

reactのrenderは何をやっているのか?コード付きで説明します。

更新日:

 

こんにちは、mabuiです。
下記コードを使用して、reactのコア機能であるレンダリング処理の説明をします。
なお動作環境は1クリックで用意できるオンラインエディタのcodesandboxを使用しています。
CodeSandbox: Online Code Editor Tailored for Web Application Development

 

 
 

二種類のrenderメソッド

Reactには二種類のrenderメソッドがあります。
ReactDOM.render()はReactエレメントをドキュメント(生成されるhtml等の文書)にレンダリングする役割です。
Reactコンポーネントのクラスで呼び出されているrenderでは、JSXなどで定義されたReactエレメントを返す処理を行っています。
両メソッドとも、複数のコンポーネントを返すことは出来ません。

 

下記のようにひとまとめのブロックにしましょう。

 

レンダリングが目的のメソッドなので、その他の処理を持たせないようにしましょう。

 

Reactでレンダリングプロセスを管理する際は、UNIX哲学を念頭に置くべきです。特に「Smal l is beautiful」(小さいものは美しい)、「Make each program do one thing well」(各プログラムが1つのことをうまくやるようにせよ)、「Choose portabillity over efficiency」(効率よりも移植しやすさを選べ)などの設計思想は、持ち込みやすく、扱いやすいReactコンポーネントを生み出す鍵となるでしょう。
石橋 啓太[著] React開発現場の教科書 p46

 
 

Reactコンポーネントとは

React.Componentクラスのrenderメソッドでreturnされるコンポーネントのことです。
JSXでタブ名のように記述できます。

 
 

Reactコンポーネントのrenderメソッドの使い方

React.Componentの中でまっさきに呼び出されるのがrenderです。
Reactで画面を動かしたい場合は、setStateメソッドを使用して、stateを更新します。
そのたびにrenderが自動で呼び出されるため、stateの変更差分が画面に反映されます。

 

紹介したコードでは自動でrenderを呼び出すため、あえてコンストラクタで
stateを更新するメソッドを呼び出しています。
setTimeoutメソッドを使用しているのはsetStateとrenderの実行タイミングが被るためか、
setStateによる2回目のrenderの処理が走らなくなるためです。

 

 

上記はcodesandboxでのコードの実行画面です。
Consoleのログを見ると、コンストラクタ、renderの順に実行されて
再度renderが呼び出されていることが分かります。

 

 

renderはstateの更新のたびに呼ばれるため、ifによる分岐処理等はなるべく入れず、
冪等性を守った実装にしましょう。

 

-react, プログラミング
-,

Copyright© mabui.org , 2018 All Rights Reserved Powered by STINGER.