日7:マスタリング反応

Feynman Technologyは、教科を教えることがあなたをより良くすると言います.このポストの間違いを見たなら、あなたは私を訂正するかもしれない

コンポーネントへの引数の渡し

我々のコンポーネントは、JSXのカスタムHTMLタグとして使用することができます覚えていますか?引数を渡すには、カスタムHTMLattribute そのために

const Recipe = (props) => {
  return <p>Hello, {props.name}</p>;
}

let target = document.body;
ReactDOM.render(<Recipe name="Fred" />, target);

注意props.name は、CUEブラケットの中にあります.なぜなら、DOMに入れる前に評価する必要があるからです.
ES 6クラススタイルのコンポーネントのプロパティについては、this.props.name 代わりに.
また、プロパティの既定値を設定できます

const Cupcake = (props) => {
  return <h1>The Return of {props.evil}!</h1>;
}

Cupcake.defaultProps = {
  evil: "Mr. Green"
};

また、渡されたプロパティの型チェックを行いたい場合は、後に頭痛を避けることもできます.

const Human = (props) => {
  return (<ul>
            <li>Number of arms: {props.armNum}</li>
          </ul>);
}

Human.propTypes = {
  armNum: PropTypes.integer.isRequired
}

PropTypes 反応から輸入されるクラスです.これらのプロパティの種類を比較することができますbool , string , func , そして、ずっと.isRequired このプロパティは、渡された値を持つ必要があることを意味します.
このタイプのチェックが何らかの理由で失敗した場合、Responseは有用なエラーをスローします.
注意:文字列でないプロパティは、かっこ括弧でカプセル化されなければなりません.

州、反応の主な特徴

一言で言えば、状態は、ユーザーの入力、天気予報などの時間をかけて変化するデータは、反応の主な強さであるリアルタイムで自動的に更新状態を反応させるデータです.ステートフルなコンポーネントだけが状態を使用できることに注意してください.
状態は、子コンポーネントに渡されない限り、そのコンポーネントに分離されます.
以下に宣言する構文を示します:

class StatefulComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "Shite"
    }
  }
  render() {
    return (
      <div>
        <h1>{this.state.name}</h1>
      </div>
    );
  }
};

注意this.state コンストラクタ関数で.
状態を更新するには、setter関数を使用しますsetState() , 状態を直接更新することは推奨されません.これは、状態更新がより効果的になるように反応することによって管理されているためです(これもいくつかの非同期問題をもたらします.

このキーワードの恐怖

OK、私は完全にこれによって混乱しています.ES 6スタイルコンポーネント内の関数を参照するにはstates or props , これを使用します.

this.calcLife = this.calcLife.bind(this);

ヘルプミー

余韻

完全に反応の状態とthis キーワード.私は、それについてもっと読む必要があるつもりです.
全体的に、今日の楽しい進歩.今すぐ反応のfreecodecampレッスンのほぼ半分を得た.私は今スナックを食べたい.
フォローミーオンGithub !
また!