日9 :完了された反応

fyeamn tehcinuqe syas taht taecinhg sbujcetはそれを良くしてくれます.このポストの間違いを見たなら、あなたは私を訂正するかもしれない

ライフサイクルコンポーネント

componentDidMount()

任意の状態の更新がここで発生すると、自動的にレンダリングされます.これはAPIの更新に便利です.一旦データがそこにあったならば、それは描かれます💫.

class Cupcake extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      flour: 200
    };
  }
  componentDidMount() {
    let newFlourMass = delayedApiCall(); // I should learn how to call an API lol
    this.setState({
      flour: newFlourMass
    });
  }
  render() {
    return (
      <div>
        <p>Flour amount: {this.state.flour}</p>
      </div>
    );
  }
}

また、ほとんどの人は、イベントのリスナーを置くので、これは、それを注🗒️.

componentWillUnmount()

あなたが一時的なコンポーネントを持っていると言いましょうDuolingo ).

コンポーネントが画面の外に出た後(あなたの目袋を見た)、それに関連する何かをクリーンアップする必要があります🪥, イベントリスナーを含む.
この機能を使用すると、次のようになります.

class Cupcake extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      flour: 200
    };
  }
  componentWillUnmount() {
    document.removeEventListener("old-event", eventHandler);
  }
  render() {
    return (
      <div>
        <p>Flour amount: {this.state.flour}</p>
      </div>
    );
  }
}

shouldComponentUpdate()

以前に設定したように、状態変更はUIの再レンダリングを引き起こします.あなたがUIのどんな変化も引き起こさない複数の州を持っているならば、それはちょうどCPU時間とメモリの無駄です.
そして、あなたのユーザは、おそらくこの'機能'を好まないでしょう🥴.
代わりに、コンポーネントを再レンダリングするときに反応することができます.

class justTens extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  shouldComponentUpdate() {
    return this.state.count % 10 === 0
  }
  render() {
    return (
      <div>
        <p>Multiples of 10: {this.state.count}</p>
      </div>
    );
  }
}

のみshouldComponentUpdate() リターンtrue コンポーネントが再描画されます.それは甘い🍬?

インラインCSS

インラインスタイリングは、反応で一般的な練習です.特にUIコンポーネントが来て行くことを考える.
構文は異なるが、

<p style={{backgroundColor: "purple", fontSize: 70}}>Life sucks.</p>

それらのキャメラに注意してください?JSXはここで標準的なCSSを受け付けません.したがって、キーペア値でオブジェクトリテラル(カーリーブラケット)を使用しなければなりません.
また、ユニットのない番号px . 文字列を使用して、その単位で例えばgを渡す必要があります."7em" .

コンポーネントを条件で返す

はい、if 声明はこれを行うことができます(そして、それらの人々のためにternariesも)、しかし、この解決は単に優雅です:

<div>
  <p>Number of Children Captured: {childCount}</p>
  {childCount === 0 && <h3>Dang it.</h3>}
</div>

を返します.true , その後、JSXが返されます.

初期のレンダリング🕊️

あなたが誘惑されている場合は、反応であなたの全体のアプリケーションを書くことができます.
問題は、ユーザーがサイトの負荷を見るのに時間がかかることです.もう一つの問題は、JSはGoogleのクローラ(私も)で理解できる何かではないので、あなたのSEOの機会を壊す.
つの石を1つの石を使用して、それらの一部をサーバーにレンダリングします.

ReactDOMServer.renderToString(<h1>Render pls.</h1>);

余韻

ああ、それはすべての反応である🎉. 私たちの次の冒険はredux、それは国家管理ライブラリ(私はそれが何であるかわからない)です👀.
ハッピー学習みんな!
フォローミーオンGithub !
また!