Мои лучшие 5 лучших практик для ReactJs
web-monetization software-development web-development javascript reactjs react-hooks best-practices memoization single-page-web-applications

Мои лучшие 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)*

Оригинал

Recent Post

Categories

PREVIOUS ARTICLE
NEXT ARTICLE