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>

高次コンポーネント

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

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