Reactのクラスコンポーネント renderとreturnの間に書くコードの意味

Question

タイトルの、
Reactのクラスコンポーネント　renderとreturnの間に書くコードの意味、についてなのですが、

現在Functionコンポーネントが主流になっていて、renderをかくことはなくなっているかと思います。

ただ、過去にクラスコンポーネントで、renderとreturnの間に何かしらのコードの記述があるものを見た気がしていて、

• renderとreturnの意味の違い
• renderとreturnの間にはなにを書くのか、書くことの意味

が気になっています。

なにかご存知の方いらっしゃったらアドバイス頂けますと嬉しいです????‍♂️

Comments

[maisumakun]

実際のコードを挙げていただければと思います。

[mika2002]

過去に見た記憶があり、探したのですが見つからなくて、、
改めて探してみますので、できれば一旦現時点でアドバイス頂けますと嬉しいです。。

Answer 1

renderとreturnの意味の違い

renderはReactNodeを返却するただのメソッドになります。この返却されたReactNodeが、画面に表示されます。

renderとreturnの間にはなにを書くのか、書くことの意味

上述の通り、renderはただのメソッドであり、戻り値がReactNodeになっているというだけのものです。
なので普通のメソッドと同じように考えて貰えればと思います。

renderとreturnの間には、戻り値を生成するための事前処理を書いたりします。

例

render() {
  const sum = this.props.num1 + this.props.num2;
  
  return <div>{sum}</div>
}

上記はあまり良い例ではないですが、propsとして2つの数字を受け取り、その合計値を描画するコンポーネントです。
この場合、

render() {  
  return <div>{this.props.num1 + this.props.num2}</div>
}

と書いても動きは同じですが、return内に長い式を書くと見にくいので、事前処理としてreturnの前で先に合計値を算出しているという例になります。

普通のメソッドでも、

function someMethod(arg1, arg2) {
  // なんか色々処理
  return 戻り値;
}

のように書かれると思いますが、この「なんか色々処理」をreturnの前に行っているだけです。

Comments

[mika2002]

ありがとうございます！！！

関数コンポーネントだと、
`const sum = this.props.num1 + this.props.num2;`にあたる部分を
`const 〇〇 = () => {`　と`return`の間に書くと思うのですが、

クラスコンポーネントだと、`const 〇〇 = () => {`　と`render`の間にはかけず、renderとreturnの間に書くのでしょうか？

すみません、初心者で質問に分かりづらい部分があるかと思うのですが、教えて頂けますと嬉しいです、、

[nabenabe11234]

おそらくReact云々というよりかは、JavaScriptの関数とクラスがまだ苦手なのかなって印象ですので、そのあたりを復習してみると理解が進むかなと思われます。

一応ざっくり説明しますと、関数コンポーネントとクラスコンポーネントで、レンダリング時の動きが異なります。

関数コンポーネントは、レンダリング時にその関数全体が実行されます。
クラスコンポーネントは、レンダリング時にクラス全体が再生成されるのではなく、renderメソッドが実行されます。

つまり、再レンダリングごとに実行したい処理は、renderメソッドの外ではなく中に書くことになります。
（ライフサイクルに関連した処理はrenderの外に書くことになりますが、その辺は複雑な話になるので追々学習していけば良いかと思います）

○クラスコンポーネント
```
class SomeComponent extends Component {
// コンストラクタ。これはインスタンス生成時に一度のみ実行される。
constructor(props) {
// ・・・
}

// 任意のメソッド。呼び出されたら実行される。
handleClick() {
// ・・・
}

// renderメソッド。再レンダリング時に実行される。
// つまり、レンダリングごとに実行したい処理はここに書く
render() {
const sum = this.props.num1 + this.props.num2;
return <div>{sum}</div>
}
}
```

ただし、以下のようにメソッドとして処理をrenderの外に出すのは可能です。
```
class SomeComponent extends Component {
constructor(props) {
super(props);
this.getSum = this.getSum.bind(this);
}

// 合計値を算出する処理をメソッド化
getSum(num1, num2) {
return num1 + num2;
}

// renderメソッド。再レンダリング時に実行される。
render() {
return <div>{this.getSum(this.props.num1, this.props.num2)}</div>
}
}
```

[mika2002]

本当にありがとうございます！！

特に、
```
クラスコンポーネントは、レンダリング時にクラス全体が再生成されるのではなく、renderメソッドが実行されます。

つまり、再レンダリングごとに実行したい処理は、renderメソッドの外ではなく中に書くことになります。
```

こちらがわかっていなかったです、、、、
大変勉強になりました。改めてありがとうございます！