5 советов по написанию чистого и читаемого кода в React: руководство по функциональным компонентам

React — это популярная библиотека JavaScript для создания пользовательских интерфейсов. Одним из ключевых преимуществ использования React является то, что он позволяет разработчикам писать модульный повторно используемый код. Однако по мере того, как ваше приложение усложняется, ваша кодовая база может легко стать загроможденной и трудной для чтения. В этом посте мы рассмотрим пять советов по написанию чистого и читаемого кода в React, уделяя особое внимание функциональным компонентам.

1. Держите свои компоненты небольшими и сфокусированными.

Один из самых важных принципов написания чистого кода — делать компоненты небольшими и сфокусированными. Каждый компонент должен иметь единственную ответственность и не должен содержать слишком много логики. Например, вместо того, чтобы создавать один компонент «Приложение», содержащий всю логику вашего приложения, лучше разбить его на более мелкие и более управляемые компоненты.

// Bad
function App() {
  const [state, setState] = useState({});
  const handleClick = () => { /* ... */ };
  const handleChange = () => { /* ... */ };
  /* ... */
  return (
    <div>
      {/* ... */}
    </div>
  );
}

// Good
function App() {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  );
}

function Header() {
  return (
    <header>
      {/* ... */}
    </header>
  );
}

function Main() {
  const [state, setState] = useState({});
  return (
    <main>
      <Content />
      <Sidebar />
    </main>
  );
}

function Content() {
  const handleClick = () => { /* ... */ };
  return (
    <div>
      {/* ... */}
    </div>
  );
}

function Sidebar() {
  const handleChange = () => { /* ... */ };
  return (
    <aside>
      {/* ... */}
    </aside>
  );
}

function Footer() {
  return (
    <footer>
      {/* ... */}
    </footer>
  );
}

1. Используйте функциональные компоненты с крючками.

В React 16.8 появились хуки, которые позволяют использовать состояние и другие функции React в функциональных компонентах. Использование функциональных компонентов с хуками может сделать ваш код более читабельным и понятным, поскольку вам не нужно беспокоиться о сложностях компонентов классов.

// Bad
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() { /* ... */ }
  render() {
    return (
      <div>
        {/* ... */}
      </div>
    );
  }
}

// Good
function App() {
  const [state, setState] = useState({});
  const handleClick = () => { /* ... */ };
  return (
    <div>
      {/* ... */}
    </div>
  );
}

1. Используйте деструктурирование, чтобы сделать ваш код более читабельным.

Деструктуризация — это функция JavaScript, позволяющая извлекать значения из объекта или массива и присваивать их переменным. Использование деструктуризации в ваших компонентах может сделать ваш код более читабельным и уменьшить количество повторяющегося кода.

// Bad
function App() {
  const state = useContext(MyContext);
  const value1 = state.value1;
  const value2 = state.value2;
  return (
    <div>
      {value1} {value2}
    </div>
  );
}

// Good
function App() {
  const { value1, value2 } = useContext(MyContext);
  return (
    <div>
      {value1} {value2}
    </div>
  );
}

1. Используйте prop-types для определения типов реквизитов, ожидаемых вашим компонентом.

Prop-types — это библиотека, которая позволяет вам определять типы свойств, ожидаемых вашим компонентом. Это может помочь обнаружить ошибки на ранней стадии и сделать ваш код более читабельным.

import PropTypes from 'prop-types';

function App({ name, age }) {
  return (
    <div>
      {name} {age}
    </div>
  );
}

App.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
};

1. Используйте комментарии, чтобы объяснить назначение кода.

Использование комментариев в вашем коде может помочь сделать ваш код более читабельным и понятным. Комментарии можно использовать для объяснения назначения определенного фрагмента кода или для предоставления дополнительной информации о компоненте или функции.

function App() {
  const [state, setState] = useState({});
  const handleClick = () => {
    // This function updates the state when the button is clicked
    setState({ /* ... */ });
  };
  return (
    <div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

В заключение, написание чистого и читаемого кода в React может помочь сделать ваше приложение более удобным в сопровождении и понятным. Следуя советам, изложенным в этом посте, вы сможете улучшить структуру своего кода, уменьшить количество повторяющегося кода и использовать функциональные компоненты с хуками, использовать деструктурирование, prop-types и комментарии, чтобы сделать ваш код более читабельным и понятным.