Reactを初めて触ってみました(tutorialその③)
このページはReact公式ページのtutorialを体験したメモと初心者なりの解釈を記述したページになります。
さて前回ではサンプルからそれてコンポーネントクラスとレンダリング、htmlの理解を自分なりにしましたがサンプルコードへ戻ることにします。
サンプルコードは③つのコンポーネントを持っています。
Square（四角単一のボタンをレンダリング）
Board（9つの四角をレンダリング）
Game（プレースホルダをボードにレンダリング※後で説明するよとのこと）
まずboardコンポーネントからsquareコンポーネントに値propを渡すようにコードを変更していきます。
構成を見て理解していくと
Gameコンポーネントクラスで
<div className="game-board">
<Board />
</div>
となっており<Board />となってることでBoardコンポーネント要素をレンダリングしているということだと思います。
Boardコンポーネントで<div className="board-row"></div>がありここで一つの四角をレンダリングしているrenderSquareメソッドがあります。
renderSquareメソッドは<Square />の記述によりSquareコンポーネント要素をレンダリングしているということになり９つの四角が形成されているというわけですね。
次にSquareのrenderメソッドを変更して、{/ * TODO * /}を{this.props.value}に置き換えてその値を表示してみましょう。
ということでBoradコンポーネントで一つの四角をレンダリングしているメソッド
this.renderSquare(0)
これの引数をSquareコンポーネントのvalueにセットします
renderSquare(i) {
return <Square value={i} />;
}
そしてSquareコンポーネントのvalueをボタンの値として表示
render() {
return (
<button className="square">
{this.props.value}
</button>
);
}
といった流れとして見て取れます。
 |
| レンダリング結果 |
renderSquareの引数をそのまま表示しているのでレンダリング０から８の数字が入った９つの四角がレンダリングされましたね。
ちなみにpropsとは属性オブジェクトみたいです。
<Square value={i}>としているのでSquareコンポネントでpropsのvalue値として利用できるイメージになります。
次にSquareコンポーネントのボタンをクリックしたときに【X】と表示されるようにしていきますがはじめに試すのは個々の四角をクリックしたときにjavascriptのalertを出していきましょう。
Squareコンポーネントでボタンを以下に変更してください。
<button className="square" onClick={() => alert('click')}>
※イベントonClickで()は即時関数だったはず。。で内容はalert()を実行しろとのこと
 |
| クリックするとalertが実行されているのがわかります。 |
次に進みます。
Reactコンポーネントはthis.stateを設定することで状態を保つことができます。
コンストラクタをクラスに追加して状態を初期化します。
javascriptはサブクラスでコンストラクタを定義する時は明示的にsuper()を呼び出す必要がありますとのことです。
class Square extends React.Component {
constructor(props) {
super(props);
this.state = {
value: null,
};
}
・・・・
先ほどのalertの部分を
this.setState（{value： 'X'}）
に置き換えます。クリック操作で状態のstateのvalueをXにするということですね
<button className="square" onClick={() => alert('click')}>
→<button className="square" onClick={() => this.setState({value: 'X'})}>
さらにボタンの内容をstateのvalueにしましょう
{this.props.value}→{this.state.value}
クリックするとconstructorで定義しているthis.stateにthis.setState()でvalueにXをセットして再レンダリンされthis.state.value（つまりはセットされたX）の入った四角ができるというようです。
reactはthis.setStateが呼び出されるとコンポーネントの更新がスケジュールされ、渡された状態の更新でReactがマージされ、子孫とともにコンポーネントが再レンダリングされます。（ほぼ翻訳）ということでなんで再レンダリングされるの？という疑問はここで解決しました。
コメント
コメントを投稿