クリーンクリーナーコードを書く

この記事はクリーンコードを書く際の低レベルガイドラインについてではありません.この記事は、対処されないか、しばしば話しられない高水準概念に集中します.
私たちは、クリーンなコードを書くことについてよく耳を傾けます.これが本当である間、これは確かにあなたがクリーナーコンポーネントを書くことができる方法を明確にしません.
反応成分を書く間、あなたが従うことができるわずかに独禁法の規則の小さなセットは、ここにあります.

コンポーネントを書く間、一貫した構造を実施してください。

単純な構造をコンポーネントに適用することで、コードをナビゲートして読みやすくなります.これは簡単に見えるが、最初はそれに慣れるのは難しいことができます.このセクションでは、各セクションのコメントを書いてハックするには、一度は、これらのコメントは、構造を維持しながらフェードを見始めるために十分な快適されます.
構造体に続くコンポーネントを書く方法の簡単な例を次に示します.

// Sort imports alphabetically

// Package Imports
import merge from 'lodash/merge'
import React from "react";
// Package Type Imports
import type { Resolvers, TypePolicies } from '@apollo/client'
import type { useState, useEffect } from "react";

// App Imports
import BarChart from 'components/charts/BarChart'
import Block from 'components/blocks/Block'
import Card from 'components/card/Card'
import Loader from 'components/loaders/Loader'
// App Type Imports
import type { BlockProps } from 'components/blocks/Block'

// Component types
type ComponentProps {
 ...
}

// Styled components
const StyledText = styled('p', {
 ...
}

// Constants or variables that's has no effect on rerender
const URL = "https://www.google.com/";

const CleanComponent = (props) => {
  // Store/State/Callbacks/Refs/Context/Memo
  const [open, setOpen] = useState(false);

  // UI State
  const [isLoading, setIsLoading] = useState(props.isLoading);

  // Events
  const handleAction = () => {
    setOpen(true)
  }

  // Networking
  const fetchDataFromAPI = () => {
    fetch(URL).then(() => {
      // do something
    })
  }

  // Effects
  useEffect(() => {
    // do something 
  }, [])

  // JSX
  return (
    <div>
      <p>Writing clean react code</p>
    </div>
  )
}

// Type exports
export type { ComponentProps }

export default CleanComponent

コンポーネント抽象化

これは非常に誤解されている最も強力なコンセプトですが.コンポーネントを小さなものに壊すときに決定するかどうかは、多くの練習が付属していますが、いくつかのルールをするときに疑問に従うことができます.

同じレベルの抽象化されたコンポーネントは一緒になければなりません

コンポーネントを書くとき、あなたはしばしばより小さな構成要素にそれを壊すという感覚を得ます.コンポーネントが抽象化の同じレベルになっている場合は、同じファイルに保存したり、コンポーネントのコンポーネントフォルダを作成します.

const Menu = () => {
    return (
        <i className="fa fa-menu" />
    )
}

const Navbar = () => {
    return (
        <div>
            <Menu />
            <h1>App</>
        </div>
    )
}

コンポーネントをより小さいものに分けるときの決定

これは特に複雑なコンポーネントで作業しているときには些細なことです.これを解決するには、コンポーネントが複雑になったときに続く規則のセットを作成します.

単一の責任原則に従ってください.

再利用性は、部品を破壊するもう一つの重要な基準である.あなた自身が同じコンポーネントを何度も何度も書いているのを見るなら、それを抽象化してみてください.

明確な抽象化を見るとき、すなわち、複雑なコンポーネントの小さな部分が抽出され、それ自身の世界に住んでいるとき(これは、ローカル州、ネットワークコール、イベント処理などのようなものを含んでいます).

コンポーネント小道具が数xより高いとき、これはあなたの構成要素が複雑になっていて、より小さなコンポーネント

に壊れている必要があるという指示です