Мои лучшие 5 лучших практик для ReactJs
14 марта 2022 г.Привет народ!
В этой статье мы обсудим 5 лучших практик ReactJ, которые помогут вам упростить создание отличных и высокопроизводительных приложений.
Использовать фрагмент
Мы знаем, что React позволяет вам возвращать только один элемент JSX за раз. Чтобы обернуть несколько элементов, мы используем div, который добавляется в Dom, что потребует некоторых вычислений, поэтому попробуйте использовать Fragment вместо ненужного div.
```javascript
const без фрагмента = () => {
вернуть (
<дел>
Без фрагмента
Использование div в качестве внешнего элемента
константа с фрагментом = () => {
вернуть (
С фрагментом
Использование React Fragment в качестве внешнего элемента
Разбивайте большие компоненты на мелкие компоненты или повторно используемые компоненты
Если компонент слишком велик, разбейте этот компонент и соберите небольшие компоненты в один компонент и повторно используйте их в соответствии с требованиями.
```javascript
// Компонент (до)
const ProfileCard = (реквизит) => {
вернуть (
{props.icon}
{props.name}
{props.followers}
Подписчики
{props.blogs}
Статьи
{props.revenue}
МПП
// Маленькие компоненты с композицией
const Avatar = ({ icon, name }) => {
вернуть (
{icon}
{имя
const Stats = ({ подписчики, блоги, доход }) => {
вернуть (
{подписчики}
Подписчики
{блоги
Статьи
{доход
МРС
// Компонент с упрощенным JSX (после)
const ProfileCard = (реквизит) => {
вернуть (
<Значок аватара={props.icon} name={props.name} />
<Статистика
последователи = {props.followers}
блоги={реквизиты.блоги}
доход = {props.revenue}
Использовать проверку типов
Используйте propTypes или TypeScript для проверки типов в вашем приложении, чтобы своевременно обнаруживать ошибки и предотвращать их.
```javascript
импортировать PropTypes из 'prop-types';
const TypeChecking = ({имя}) => {
вернуть
Здравствуйте, {name}
;TypeChecking.propTypes = {
имя: PropTypes.string.isRequired
Используйте функциональные компоненты
React представил хуки, которые отлично подходят для создания функционального компонента в ReactJs и позволяют вам управлять состоянием без каких-либо сложностей.
```javascript
константный счетчик = () => {
const [количество, setCount] = React.useState (0);
const handleClick = () => {
setCount((prevCount) => prevCount + 1);
React.useEffect(() => {
// Это будет зарегистрировано при изменении значения счетчика
console.log('Количество:', количество);
}, [считать]);
вернуть (
{количество
Использовать мемоизацию
Попробуйте использовать заметки React, чтобы избежать ненужного повторного рендеринга и повысить производительность вашего приложения.
```javascript
const Child = React.memo(({ имя }) => {
console.log('Дочерний рендеринг');
вернуть
{имя
;константный родитель = () => {
const [количество, setCount] = React.useState (0);
const handleClick = () => {
setCount((prevCount) => prevCount + 1);
console.log('Родительский рендеринг');
вернуть (
{количество
Если вы выполните код, вы увидите, что дочерний компонент отображается только один раз. При нажатии кнопки «Увеличить» счетчик будет увеличиваться, и только родительский компонент получит повторный рендеринг.
И это все для этой темы. Спасибо за чтение.
Свяжитесь со мной
LinkedIn | [Твиттер] (https://twitter.com/sachindotcom)
- Впервые опубликовано [здесь] (https://blog.sachinchaurasiya.dev/5-best-practices-for-reactjs)*
Оригинал