reactはなぜ、値を参照するときにthis.から始まるのか

Question

今、progateでreactを学んでいるのですが、下のコードを見て一つ疑問がわいたので質問させていただきます。

javascriptを先に勉強して、当然オブジェクトも勉強しましたが、jsでクラス内から参照する場合は、このコードだったら
console.log(state.name);
と、頭にthis.をつける必要はなかったはずですが、今回reactは付いていますよね。何故でしょうか？

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: 'にんじゃわんこ'};
  }
  
  render() {
    return (
    	<div>
        {/* 「こんにちは、にんじゃわんこさん！」の名前の部分をstateを使って置き換えてください */}
    	  <h1>こんにちは、{this.state.name}さん！</h1>
    	  
        <button onClick={() => {console.log('ひつじ仙人')}}>ひつじ仙人</button>
        <button onClick={() => {console.log('にんじゃわんこ')}}>にんじゃわんこ</button>
      </div>
    );
  }
}

export default App;

Answer 1

頭にthis.をつける必要はなかったはずですが

いえ、JavaScriptでメソッド内からプロパティを参照する場合は、thisが必要です。

Comments

[maisumakun]

逆に、Reactでも関数コンポーネントを使っている場合は、thisの出番はありません。