4 Suggerimenti React per migliorare istantaneamente il tuo codice

Feb 03 2023

Una solida conoscenza di React è una delle competenze più preziose per uno sviluppatore front-end. Molte aziende sono costantemente alla ricerca di sviluppatori React e vogliono pagarli sempre di più. Ecco perché è importante migliorare costantemente come sviluppatore, poiché è uno sforzo altamente gratificante.

Per aiutarti nel tuo viaggio, vorrei condividere quattro suggerimenti che mi sono stati utili per scrivere un codice React migliore. Spero che troverai qualcosa di nuovo e utile. Quindi entriamo subito in esso!

Sommario

Funzioni di ritorno dai gestori
Responsabilità separate
Usa la mappa degli oggetti invece delle condizioni
Metti le variabili indipendenti al di fuori del ciclo di vita di React

Se hai familiarità con la programmazione funzionale, sai di cosa sto parlando. Possiamo facilmente chiamarlo " currying " in qualche modo. In sostanza, impostiamo in anticipo alcuni parametri di funzione.

Abbiamo un problema esplicito con il codice boilerplate qui sotto. Questa tecnica ci aiuterà!

export default function App() {
  const [user, setUser] = useState({
    name: "",
    surname: "",
    address: ""
  });

  // First handler
  const handleNameChange = (e) => {
    setUser((prev) => ({
      ...prev,
      name: e.target.value
    }));
  };

  // Second handler!
  const handleSurnameChange = (e) => {
    setUser((prev) => ({
      ...prev,
      surname: e.target.value
    }));
  };

  // Third handler!!!
  const handleAddressChange = (e) => {
    setUser((prev) => ({
      ...prev,
      address: e.target.value
    }));
  };

  // What if we need one more input? Should we create another handler for it?

  return (
    <>
      <input value={user.name} onChange={handleNameChange} />
      <input value={user.surname} onChange={handleSurnameChange} />
      <input value={user.address} onChange={handleAddressChange} />
    </>
  );
}

export default function App() {
  const [user, setUser] = useState({
    name: "",
    surname: "",
    address: ""
  });

  const handleInputChange = (field) => {
    return (e) => {
      setUser((prev) => ({
        ...prev,
        [field]: e.target.value
      }));
    };
  };

  return (
    <>
      <input value={user.name} onChange={handleInputChange("name")} />
      <input value={user.surname} onChange={handleInputChange("surname")} />
      <input value={user.address} onChange={handleInputChange("address")} />

      {JSON.stringify(user)}
    </>
  );
}

Realizzare un componente "Dio" è un errore comune commesso dagli sviluppatori. Si chiama “Dio” perché contiene molte righe di codice difficili da capire e mantenere. Consiglio vivamente di dividere i componenti in gruppi di sottomoduli indipendenti.

Una struttura tipica per questo sarebbe:

Modulo UI, responsabile solo della rappresentazione visiva.
Modulo modello , contenente solo la logica aziendale. Un esempio di ciò è un hook personalizzato.
Modulo Lib , contenente tutte le utilità necessarie per il componente.

export function ListComponent() {
  // Our local state
  const [list, setList] = useState([]);

  // Handler to load data from the server
  const fetchList = async () => {
    try {
      const resp = await fetch("https://www.url.com/list");
      const data = await resp.json();

      setList(data);
    } catch {
      showAlert({ text: "Something went wrong!" });
    }
  };

  // We want to fetch only on mount
  useEffect(() => {
    fetchList();
  }, []);

  // Handler responsible for deleting items
  const handleDeleteItem = (id) => {
    return () => {
      try {
        fetch(`https://www.url.com/list/${id}`, {
          method: "DELETE"
        });
        setList((prev) => prev.filter((x) => x.id !== id));
      } catch {
        showAlert({ text: "Something went wrong!" });
      }
    };
  };

  // Here we just render our data items
  return (
    <div className="list-component">
      {list.map(({ id, name }) => (
        <div key={id} className="list-component__item>">
          {/* We want to trim long name with ellipsis */}
          {name.slice(0, 30) + (name.length > 30 ? "..." : "")}

          <div onClick={handleDeleteItem(id)} className="list-component__icon">
            <DeleteIcon />
          </div>
        </div>
      ))}
    </div>
  );
}

export async function getList(onSuccess) {
  try {
    const resp = await fetch("https://www.url.com/list");
    const data = await resp.json();

    onSuccess(data)
  } catch {
    showAlert({ text: "Something went wrong!" });
  }
}

export async function deleteListItem(id, onSuccess) {
  try {
    fetch(`https://www.url.com/list/${id}`, {
      method: "DELETE"
    });
    onSuccess()
  } catch {
    showAlert({ text: "Something went wrong!" });
  }
}

export function trimName(name) {
  return name.slice(0, 30) + (name.lenght > 30 ? '...' : '')
}

export function useList() {
  const [list, setList] = useState([]);

  const handleDeleteItem = useCallback((id) => {
    return () => {
      deleteListItem(id, () => {
        setList((prev) => prev.filter((x) => x.id !== id));
      })
    };
  }, []);

  useEffect(() => {
    getList(setList);
  }, []);

  return useMemo(
    () => ({
      list,
      handleDeleteItem
    }),
    [list, handleDeleteItem]
  );
}

export function ListComponentItem({ name, onDelete }) {
  return (
    <div className="list-component__item>">
      {trimName(name)}

      <div onClick={onDelete} className="list-component__icon">
        <DeleteIcon />
      </div>
    </div>
  );
}

export function ListComponent() {
  const { list, handleDeleteItem } = useList();

  return (
    <div className="list-component">
      {list.map(({ id, name }) => (
        <ListComponentItem
          key={id}
          name={name}
          onDelete={handleDeleteItem(id)}
        />
      ))}
    </div>
  );
}

Se hai bisogno di visualizzare vari elementi a seconda della variabile, puoi implementare quel suggerimento. L'utilizzo di questa semplice strategia rende i componenti più dichiarativi e semplifica la comprensione del codice. Inoltre, rende più indolore estendere ulteriormente la funzionalità.

Problema

Non dimenticare di iscriverti per imparare cose vitali sul Frontend!

function Account({type}) {
  let Component = UsualAccount

  if (type === 'vip') {
    Component = VipAccount
  }

  if (type === 'moderator') {
    Component = ModeratorAccount
  }

  if (type === 'admin') {
    Component = AdminAccount
  }

  return (
    <div className='account'>
      <Component />
      <AccountStatistics />
    </div>
  )
}

const ACCOUNTS_MAP = {
  'vip': VipAccount,
  'usual': UsualAccount,
  'admin': AdminAccount,
  'moderator': ModeratorAccount,
}

function Account({type}) {
  const Component = ACCOUNTS_MAP[type]

  return (
    <div className='account'>
      <Component />
      <AccountStatistics />
    </div>
  )
}

L'idea è di separare la logica che non richiede i metodi del ciclo di vita del componente React dal componente stesso. Ciò migliora la chiarezza del codice rendendo le dipendenze più esplicite. Pertanto, diventa molto più facile leggere e comprendere i componenti.