reactの処理順がわからない。

Question

以下のサイトを参考にJSONをパースして
レンダリングするプログラムを作りたいです。
リンク内容

私の理解と考え方
すみません。初心者です。おかしいところがあればご指摘願います。
・最終的には、ReactDOM.renderでレンダリングするので
レンダリングしたい対象とレンダリングする場所を引数で指定する。
今回は、<App />とdocument.getElementById("root")。
ここまでは理解できました。
・Appのreturnの中でDOMで記述されている部分が、レンダリングしたい対象のはずなので

      <div>
        <button onClick={this.getJson}>Get Json</button>
        {this.memberList(this.state.member)}
      </div>

　が初期表示で描画される。　
onClickでgetJsonが指定されているのでgetリクエストが実行され、レンダリングされる。

memberListやconstructor(が実行されるタイミングがまったくわかりません。
＊追記
{this.memberList(this.state.member)}
の一文から、初期表示時とonClickの２回実行されていると予想した。
＊
それとthis.state = { member: [] };が必要なのかもわかりません。
また、list.map((member, index)構文の使い方がわかりません
具体的な実装方法はわかりませんが
items.map((item) => みたいな書き方で
item数<li>すれば同じことができるのではないでしょうか？

リンク内容
この辺りをご教示願います。

Answer 1

memberListやconstructor(が実行されるタイミングがまったくわかりません。

まずconstructorのタイミングですが、そのクラスコンポーネントが呼ばれたタイミングです。
参考元のリンクを見ましたが、Appというクラスコンポーネントだったので、具体的には
<App />のようにJSXの記法で呼び出され、実際に描画されるタイミングでconstructorが実行されます。

続いてmemberListですが、追記にて

初期表示時とonClickの２回実行されていると予想した。

とされてる通りの認識です。
クラスコンポーネントは通常、自身が持つ状態(state)が変わる度に再描画されるため、
onClickを実行する度にstateが更新されるなら、その都度再描画が行われ、ひいてはthis. memberListも実行されます。

それとthis.state = { member: [] };が必要なのかもわかりません。

おそらくconstructor内の記述の話だと思いますが、必要です。
そのクラスコンポーネントでどういったstateを用いるかの定義をしています。

また、list.map((member, index)構文の使い方がわかりません
item数<li>すれば同じことができるのではないでしょうか？

mapはざっくり説明すると、特定の配列から新しい配列を作ります。
参考元ではlistという配列からmemberListというJSX.Elementの配列を作っています。

• MDN | map()

もしmapを使わずfor等を使っていたら、memberList関数は下記のようになります。

memberList(list) {
  let memberList = [];
  for(let i = 0; i < list.length ; i++) {
    const member = list[i];
    // ※参考元にもなかったため省きましたが、本来は<li>に`key`を付けるべきです。
    memberList.push(
      <li>
        {member.name} {member.age}
      </li>
    );
  }
  
  return (<ul>{memberList}</ul>);
}