あなたが反応することができる5つの涼しいこと

1 -スプレッド小道具
時々あなたのタグは、このようないくつかの小道具を少し厄介なリストを得ることができます.

const Component = (props) => {

  return <Child firstProp={1} secondProp={"cheese"}>
}

これは、すべての小道具を持つオブジェクトを作成し、プログラムを実行して子要素に個別に追加するために、スプレッド演算子を使用することによって簡素化できます.

const Component = (props) => {

  const childProps = {
    firstProp: 1,
    secondProp: "cheese"
  }

  return <Child {...childProps}>
}

これは前のスニペットと同じですが、JSXはクリーナーに見えます.

2 -あなたの小道具を破壊する
以上のように小道具をタイプすることは、本当に退屈でありえます.

const Component = props => {
  return (
    <div>
      <h1>{props.firstProp}</h1>
      <h2>{props.secondProp}</h2>
    </div>
  )
}

これを簡素化するためにオブジェクトの破壊を使用できます.

const Component = props => {
  const { firstProp, secondProp } = props

  return (
    <div>
      <h1>{firstProp}</h1>
      <h2>{secondProp}</h2>
    </div>
  )
}

より良いパラメータ定義で小道具を変更することができます.

const Component = ({ firstProp, secondProp }) => {
  return (
    <div>
      <h1>{firstProp}</h1>
      <h2>{secondProp}</h2>
    </div>
  )
}

今私は単語の小道具を入力する必要はありませんでした!さらに良いのは、さまざまな小道具にデフォルト値を与えるために構文を破壊することを利用することができます.

const Component = ({ firstProp = 1, secondProp = "cheese" }) => {
  return (
    <div>
      <h1>{firstProp}</h1>
      <h2>{secondProp}</h2>
    </div>
  )
}

レンダリング関数
条件付きのレンダリングは、反応世界での人生の非常に退屈で必要な部分でありえます、そして、結果はあなたのコードをこれのようなすべての三元演算子で読むのを難しくすることができます.

const Component = props => {
  return props.dataArray != undefined ? (
    <h1>The Data Exists</h1>
  ) : (
    <h1>The Data Doesn't Exist</h1>
  )
}

これは動作しますが、JSXが長く複雑になっているので、これは少しトリッキーに読むことができますので、JSXをレンダリングする関数に出力を束ねることでクリーンアップを助けることができます.

const Component = props => {
  const loaded = () => <h1>The Data Exists</h1>

  const loading = () => <h1>The Data Doesn't Exist</h1>

  return props.dataArray != undefined ? loaded() : loading()
}

これは確かに読みやすくなります.また、三項演算子が好きでない場合は次のように書き換えることができます.

const Component = props => {
  const loaded = () => <h1>The Data Exists</h1>

  const loading = () => <h1>The Data Doesn't Exist</h1>

  if (props.dataArray != undefined) {
    loaded()
  } else {
    loading()
  }
}

4 - JSX支柱
デフォルトでは、小道具の小道具が含まれます.あなたのJSXの特定の場所にすべての子供たちを貸す子供たち.

const Child = (props) => {
  return <div>
    <header></header>
    <main>{props.children}</main>
    <footer></footer>
  </div>
}

const Parent = props => {
  return <Child>
  <h1>Hello World</h1>
  </Child>
}

それで、「Hello World」と一緒のH 1は、我々が子供のどんな子供でもあると決定したところで、子供の原因で主なタグの範囲内で表示されます.他のコードをヘッダーとフッターのように別の場所に表示したい場合.残念ながら、Vue、角、svelte、およびWebコンポーネントとは異なり、スロットやスロットのようなものを行うためのスロットがありません.代わりに、以下のような小道具を使うことができます.

const Child = (props) => {
  return <div>
    <header>{props.header}</header>
    <main>{props.children}</main>
    <footer>{props.footer}</footer>
  </div>
}

const Parent = props => {
  return <Child header={<h1>I am the Header</h1>} footer={<h1> I am the Footer </h1>}>
  <h1>Hello World</h1>
  </Child>
}

これは我々が以前の小道具オブジェクトトリックを使用して、子供をきれいにするために我々の小道具を破壊するならば、これがよりきれいに見えるかもしれません.

const Child = ({header, children, footer}) => {
  return <div>
    <header>{header}</header>
    <main>{children}</main>
    <footer>{footer}</footer>
  </div>
}

const Parent = props => {

  const childProps = {
    header: <h1>I am the Header</h1>,
    footer: <h1> I am the Footer </h1>
  }

  return <Child {...childProps}>
  <h1>Hello World</h1>
  </Child>
}

5 -カスタムフックを作成する
あなたのコードで使用する独自のカスタムフックを作成することができます.彼らは単に使用される単語から始めなければならなくて、コンポーネントの本体で起動されることができるだけです.APIデータを取得して更新するためのUseFetchフックの迅速で汚れた例です.

const useFetch = (url, initialValue) => {
  // The State to Hold our API Data
  const [state, setState] = React.useState(initialValue)

  // function to fetch data and store into state
  const getData = async () => {
    const response = await fetch(url)
    const data = await response.json()
    setState(data)
  }

  // Initial Fetch
  getData()

  // return state and function to fetch
  return [state, getData]
}

// Now this hook can be used in a component

const Component = (props) => {
  const [APIData, refetch] = useFetch("http://api.com/endpoint")

  return <h1>Hello World</h1>
}

それで、あなたがすべての時間を書き直す必要がないように、すべてのカスタムフックはビルトインフックで多くのロジックを取り扱う機能です.もう一度、大きな空腹は、それらのネイティブフックが機能部品の本体で使われなければならないので、あなたのカスタムフックをします.