Reactで開発してみた　〜色々気づいたことプチまとめ〜

9978 ワード
React react-hooks React テキストリンク

はじめに

2ヶ月ほどReactを使って開発を行ったのですが
その中でも勉強になったことや、こんなミス一生したくないというものをアウトプットしていきたいと思います。

props 受け渡し

親コンポーネントから子コンポーネントへ
値を受け渡す際にpropsで渡しているのですが

その際に関数内でpropsで受け取り、
props.~~~で使用していたのですが

hoge.jsx
 // 例
export default hoge = () => {
  return (
    <hogeChildren data="hogehoge" dataLayout="hogelayout"/>
  )
}

const hogeChildren = (props) => (
  <>
    <div>{props.data}</div>  // =>hogehoge
    <div>{props.dataLayout}</div> // =>hogelayout
  </>
)

受け取る際に ({recommed})とすると
propsでやらなくても済む

hoge.jsx
 // 例
export default hoge = () => {
  return (
    <hogeChildren data="hogehoge" dataLayout="hogelayout"/>
  )
}

const hogeChildren = ({ data, dataLayout }) => (
  <>
    <div>{data}</div>  // =>hogehoge
    <div>{dataLayout}</div> // =>hogelayout
  </>
)

props書かなくていいのは個人的に楽

Custom Hooks

Custom Hooksとは

名前が ”use” で始まり、ほかのフックを呼び出せる JavaScript の関数のことです。（参照: React document 独自フックの作成）

今回は初回以外かつuseEffectで第二引数値が変更した時のみ処理を行う際に使用したのでそれを記します。

hogeUserEffect.jsx
const fisrtFlgRef = useRef(false);

  useEffect(() => {
    if (fisrtFlgRef.current) {
      document.title = `${count} 回クリックしたよー`;
    } else {
      fisrtFlgRef.current = true;
    }
  }, dependencyList);

フラグを用意し、初回は

こちらだと毎回useRefを使って生成しないといけないといけないので

hogeUserEffectCustom.jsx
const useEffectCustom = (func, dependencyList) => {
  const fisrtFlgRef = useRef(false);

  useEffect(() => {
    if (fisrtFlgRef.current) {
      func();
    } else {
      fisrtFlgRef.current = true;
    }
  }, dependencyList);
}

export default useEffectCustom;
hogeUserCustom.jsx
import useEffectCustom from hogeUserEffectCustom.jsx

  useEffectCustom(() => {
    document.title = `${count} 回クリックしたよー`;
  }, [count])

このようにrefから

もっと詳しくuseEffectでの初回レンダリングを走らせずの処理を知りたい方はこちらの記事を
useEffect 初回レンダリングで走るな!!!
お世話になりました

customhooksについてもっと知りたい方はドキュメントへ
独自フックの作成

UseEffect無限ループ

これは恥ずかしいミスですが共感できる方がいらっしゃるととても嬉しいです。

useEffectでの第二引数の指定を第一引数で変更する内容にすると無限ループにはまりました。

hoge.jsx

  useEffect(() => {
    count++
    console.log(`${count}回clickされたよー`)
  }, [count])

この例はおおげさですがこのような記述にしてしまい
すごい量のconsolelogがでてきました。

まとめ

実際に実装してみないと気づかないこととかって結構ありますよね。。

参照記事

Reactドキュメント 独自フック作成
useEffect 初回レンダリングで走るな!!!