Reactのコンセプト:構成

構成とは何ですか?それがReactアプリの重要な概念である理由

プログラミングでは、コンポジションを使用すると、小さくて焦点を絞った機能を組み合わせて、より複雑な機能を構築できます。

たとえば、使用することを考えてくださいmap()初期セットから新しい配列を作成し、を使用して結果をフィルタリングしますfilter()

const list = ['Apple', 'Orange', 'Egg']
list.map(item => item[0]).filter(item => item === 'A') //'A'

Reactでは、コンポジションによってかなりクールな利点が得られます。

小さくて無駄のないコンポーネントを作成し、それらを使用して作曲それらの上に多くの機能。どうやって?

コンポーネントの特殊なバージョンを作成する

外部コンポーネントを使用して、より一般的なコンポーネントを拡張および特殊化します。

const Button = props => {
  return <button>{props.text}</button>
}

const SubmitButton = () => { return <Button text=“Submit” /> }

const LoginButton = () => { return <Button text=“Login” /> }

小道具としてメソッドを渡す

たとえば、コンポーネントはクリックイベントの追跡に焦点を当てることができ、クリックイベントが発生したときに実際に何が起こるかは、コンテナコンポーネント次第です。

const Button = props => {
  return <button onClick={props.onClickHandler}>{props.text}</button>
}

const LoginButton = props => { return <Button text=“Login” onClickHandler={props.onClickHandler} /> }

const Container = () => { const onClickHandler = () => { alert(‘clicked’) }

return <LoginButton onClickHandler={onClickHandler} /> }

子供を使う

ザ・props.childrenプロパティを使用すると、他のコンポーネント内にコンポーネントを挿入できます。

コンポーネントは出力する必要がありますprops.childrenそのJSXで:

const Sidebar = props => {
  return <aside>{props.children}</aside>
}

そして、より多くのコンポーネントを透過的な方法で埋め込みます。

<Sidebar>
  <Link title="First link" />
  <Link title="Second link" />
</Sidebar>

高次コンポーネント

コンポーネントがコンポーネントを小道具として受け取り、コンポーネントを返す場合、それは高階コンポーネントと呼ばれます。

私の記事で高次コンポーネントの詳細を学ぶことができます高次コンポーネントに反応する

私の無料ダウンロードReactハンドブック


その他の反応チュートリアル: