class-propertiesクラスフィールド

// 과거
class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0
    };
  }
  ...
}
  
// 요즘
class Counter extends Component {
  state = {
    counter: 0
  };  
  ...
}

反応段素子を用いる場合、
以前はconstructorの内部にthis.stateを設置していたはずです.
現在constructorがなくてもstateが使える理由は
これはclass-properties構文のおかげです.
class-propertiesはmdnのClass fieldsと同じです
JSでは,まだ標準ではなく実験的な段階(段階3)である.
CRAはbabelを使用してclass-properties構文をサポートします.
反応器で使えます.
babelドキュメントを見てください.

class Bork {
  //Property initializer syntax
  instanceProperty = "bork";
  boundFunction = () => {
    return this.instanceProperty;
  };

  //Static class properties
  static staticProperty = "babelIsCool";
  static staticFunction = function() {
    return Bork.staticProperty;
  };
}

let myBork = new Bork();

//Property initializers are not on the prototype.
console.log(myBork.__proto__.boundFunction); // > undefined

//Bound functions are bound to the class instance.
console.log(myBork.boundFunction.call(undefined)); // > "bork"

//Static function exists on the class.
console.log(Bork.staticFunction()); // > "babelIsCool"

上でclassで直接宣言したPropertyについて、
インスタンスオブジェクトmyBorkのインスタンスプログラムとなる!
前の文章に示すように、描画プロトタイプは次のようになります.
(私はプロタイプのプロと混同しました.
classで直接宣言されるProperty=インスタンスProperty
静的構成=静的構成
Bork.prototype.- 书き出すのが原型です.

この場合、babelには2つのコンパイル方法があります.{ "setPublicClassFields": true }ラーメンassignment표현식そうでない場合は、Object.definePropertyを使用します.

// assignment expressions 사용
var Bork = function Bork() {...};
Bork.a = "foo";

// Object.defineProperty 사용
Object.defineProperty(Bork, "a", {
  configurable: true,
  enumerable: true,
  writable: true,
  value: "foo",
});

すくい取る

class Bork {
  //Property initializer syntax
  instanceProperty = "bork";
  boundFunction = () => {
    return this.instanceProperty;
  };

  //Static class properties
  static staticProperty = "babelIsCool";
  static staticFunction = function() {
    return Bork.staticProperty;
  };
}

let myBork = new Bork();

//Property initializers are not on the prototype.
// 프로토타입 메서드라, 인스턴스 메서드이다!!!
console.log(myBork.__proto__.boundFunction); // > undefined

//Bound functions are bound to the class instance.
console.log(myBork.boundFunction.call(undefined)); // > "bork"

//Static function exists on the class.
console.log(Bork.staticFunction()); // > "babelIsCool"

myBork.boundFunction.call(undefined)なぜ中で呼び出されたのか分かりません(undefined)
明細郎、mdnを調べました.
まずecmascriptリストの表示

NOTE 2で矢印関数の場合、thisArgはstep 4で無視されます.
そうだ.矢印関数(mdn)にはこのバインドはありません.
call、apply、bindメソッドは使用できません(効果x).
矢印関数でthisを使用する場合は、LexicalScopeのthisのみを使用できます.
call、applyを使用する場合は、この項目は無視されます.
因子しか伝達できません.
サンプル呼び出し(undefined)の理由は、次のとおりです.
これはmyborkインスタンスにバインドされていることを示すためです.