React.js російською мовою. Частина четверта



Переклад офіційної документації бібліотеки React.js російською мовою.

Зміст:
1 — Частина перша
2 — Частина друга
3 — Частина третя
4 — Частина четверта

Компоненти і властивості
Компоненти дозволяють розділяти інтерфейс на самостійні повторно застосовуються частини і аналізувати кожну з них окремо. По ідеї, це компоненти функції JavaScript. Вони приймають довільний властивість і віддають назад React елементи, що описують те, що має відображатися на екрані.

Функціональні і класові компоненти
Найпростіший спосіб визначити компонент це написати JavaScript функцію:

function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

Ця функція є активним компонентом React тому що вона приймає на вхід об'єкт argument c даними і видає елемент React. Можна назвати такі компоненти «функціональними», оскільки буквально вони є функціями JavaScript.

Для визначення компонента ви можете використовувати
клас ES6:

class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}

Два вищевказаних компонента, з точки зору React, є рівноцінними.

Класи мають деякі додаткові можливості, які ми обговоримо в наступних розділах. А поки, для лаконічності, ми будемо використовувати функціональні компоненти.

Отрисовка компонента
Раніше, ми познайомилися з елементами React, які являють собою DOM теги:

const element = <div />;

Однак, елементи також можуть бути компоненти, що визначаються користувачем:

const element = <Welcome name="Sara" />;

Коли React розпізнає елемент, що представляє собою інтерфейс компонент, він передає JSX атрибути цього компоненту як єдиного об'єкту.

Наприклад, код відображає на сторінці «Привіт, Сара»:

function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);

Спробуйте повторити цей приклад CodePen.

Давайте розглянемо, що відбувається в даному прикладі:

  1. Ми створюємо властивість ReactDOM.render() з елементом

    <Welcome name="Sara" />

  2. React сигналізує компоненту Welcome властивості

    {name: 'Sara'}

  3. Наш компонент Welcome видає

    <h1>Hello, Sara</h1>

    як результат;

  4. React DOM раціонально оновлює DOM, щоб він відповідав

    <h1>Hello,Sara</h1>

Нюанс:
Завжди прописуйте назви компонентів з великої літери.
Наприклад, <div /> є тегом DOM, а <Welcome /> є компонентом і запитує Welcome в область дії.

З'єднання компонентів

Компоненти можуть посилатися на інші компоненти в результаті їх виконання.

Це дозволяє нам використовувати ті ж компонентні абстракції на будь-якому рівні деталізації. Кнопка, форма, діалог, екран – в додатках React все це називається компонентами.

Наприклад, ми можемо створити компонент програми (App), який багато разів відображає Welcome:

function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}

ReactDOM.render(
<App />,
document.getElementById('root')
);

Спробуйте повторити цей приклад CodePen.

Як правило, нові додатки React мають один компонент програми (App) в самому верху. Однак, якщо ви інтегруєте React у вже створений додаток, ви можете почати знизу вгору з невеликого компонента Button і поступово просуватися нагору.

Нюанс:
Компоненти повинні видавати один кореневий елемент. Ось чому ми додаємо
<div>
щоб впровадити всі елементи
<Welcome />

Витяг компонентів

Не бійтеся розділяти на більш дрібні компоненти. Зверніть увагу на компонент Comment:

function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<img className="Avatar"
src={props.author.avatarUrl}
alt={props.author.name}
/>
<div className="UserInfo-name">
{props.author.name}
</div>
</div>
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}

Спробуйте повторити цей приклад CodePen.

Він приймає об'єкт author, лінію text і дані як вхідний сигнал і відображає коментар на сторінці соціальної мережі.

Цим компонентом може бути складно керувати з-за множинних вкладень, а також деякі його частини можуть використовуватися повторно. Давайте виділимо з нього деякі компоненти.

Спочатку виділимо Avatar:

function Avatar(props) {
return (
<img className="Avatar"
src={props.user.avatarUrl}
alt={props.user.name}
/>
);
}

Необов'язково знати, що Avatar виводиться всередині Comment. Ось чому ми даємо йому більш загальна назва: user, а не author.

Рекомендуємо називати компоненти на свій розсуд, ніж по контексту, в якому вони використовуються.

Тепер ми можемо трохи спростити Comment:

function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<Avatar user={props.author} />
<div className="UserInfo-name">
{props.author.name}
</div>
</div>
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}

А тепер ми виділимо компонент UserInfo, який відображає Avatar поряд з іменем користувача:

function UserInfo(props) {
return (
<div className="UserInfo">
<Avatar user={props.user} />
<div className="UserInfo-name">
{props.user.name}
</div>
</div>
);
}

Далі, спростимо Comment:

function Comment(props) {
return (
<div className="Comment">
<UserInfo user={props.author} />
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}

Спробуйте повторити цей приклад CodePen.

Спочатку, витяг компонентів може здатися трудомісткою завданням, але велика різноманітність компонентів повторного використання дозволяє створювати великі програми. Відмінне правило: якщо частина вашого UI використовується кілька разів (Button, Panel, Avatar), або вона є складною сама по собі (App, FeedStory,Comment), то вона може послужити відмінним компонентом повторного використання.

Властивості тільки для читання

Якщо ви розглядаєте компонент у вигляді функції або класу, то він ніколи не повинен змінювати свої властивості.

Зверніть увагу на функцію sum:

function sum(a, b) {
return a + b;
}

Такі функції називаються чистими, оскільки вони не намагаються не чого змінити і завжди віддають той же результат.

А ця функція не є чистою, тому що вона робить зміни:

function withdraw(account, amount) {
account.total -= amount;
}

React є досить гнучким інструментом, але в нього є одне правило:

Всі компоненти React повинні діяти як чисті функції, зберігаючи свої властивості.

Безумовно, UI додатків динамічні і з часом вони піддаються змінам. У наступному розділі ми вивчимо новий концепт «стану». Стан дозволяє компонентам React змінювати свій результат виконання протягом часу у відповідь на дії користувачів, запити сервера і т. д., не порушуючи головного правила.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.