Ви замислювались, як створити компонент у React?

Відповісти на це просто, як створити функцію, що повертає синтаксис, подібний до HTML.

import React from 'react'; function Counter({n}) { return ( {n} ); } export default Counter;

А тепер давайте подивимося, що сталося в коді вище.  Counter- це функція, яка перетворює число в HTML. І якщо ви подивитесь уважніше, Counterце чиста функція. Правильно, тип функції, яка повертає результат на основі своїх входів і не має побічних ефектів.

Це пояснення поставляється з новим запитанням. Що таке побічний ефект?

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

Можливо, ви помітили, що я використовував синтаксис присвоєння деструктуризації у списку параметрів для вилучення nвхідного номера. Це тому, що компоненти беруть за вхідні дані один об’єкт, який називається “реквізит”, що має всі надіслані їм властивості.

Ось як nпараметр можна встановити з будь-якого іншого компонента:

У певному сенсі цей синтаксис можна уявити як виклик функції Counter({n: 1}). Чи не так?

Продовжимо нашу подорож.

Чи можуть функціональні компоненти мати стан? Як пропонується назва компонента, я хочу зберегти та змінити лічильник. Що робити, якщо ми просто оголосимо змінну, що містить число всередині компонента? Чи вдасться?

Давай дізнаємось.

Я почну з оголошення змінної всередині функціонального компонента.

import React from 'react'; function Counter() { let n = 0; return ( {n} ); } export default Counter;

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

import React from 'react'; function Counter() { let n = 0; function increment(){ n = n + 1; console.log(n) } return ( {n} Increment ); } export default Counter;

Якщо ми подивимося на консоль, то побачимо, що число насправді збільшується, але це не відображається на екрані. Будь-які ідеї?

Ви правильно зрозуміли ... нам потрібно змінити номер, але нам також потрібно повторно відобразити його на екрані.

Ось де функція корисності від React Hooks вступає в гру. До речі, ці утилітні функції називаються хуками, і вони починаються зі слова "використання". Ми будемо використовувати один із них, useState. Я також реєструю текст "повторно відтворити" на консолі, щоб побачити, скільки разів Counterфункція фактично викликається.

import React, { useState } from 'react'; function Counter() { const [n, setN] = useState(0); console.log('re-render'); function increment(){ setN(n + 1); console.log(n) } return ( {n} Increment ); } export default Counter;

Давайте прочитаємо, що useState()робить.

Що useStateповертається? Він повертає пару значень: поточний стан та функцію, яка його оновлює.

У нашому випадку nце поточний стан і setN()є функцією, яка його оновлює. Ви перевіряли консоль, щоб побачити, скільки разів відображається текст "повторно відтворити"? Я залишу це для вас, щоб дізнатися.

Ми можемо оновити стан не тільки встановивши нове значення, але також надавши функцію, яка повертає нове значення.

У нашому випадку буде викликана функція, яка надає нове значення increment(). Як бачите, increment()це чиста функція.

import React, { useState } from 'react'; function increment(n){ return n + 1; } function Counter() { const [n, setN] = useState(0); return ( {n}  setN(increment)}> Increment ); } export default Counter;

Щоб зрозуміти, що setN(increment)робить, давайте прочитаємо документацію.

Передача функції оновлення дозволяє отримати доступ до поточного значення стану всередині програми оновлення.

ОК так increment()викликається з поточним nстаном і використовується для обчислення нового значення стану.

Заключні думки

Давайте узагальнимо те, що ми з’ясували.

У React ми можемо просто визначити компонент за допомогою функції, яка повертає HTML-подібний синтаксис.

React Hooks дозволяє нам визначати стан таких функціональних компонентів.

І останнє, але не менш важливе: нарешті ми позбулися thisпсевдопараметру в компонентах. Можливо, ви помітили, що це thisдратує, змінюючи контекст, коли ви цього не очікуєте. Про це не турбуйтеся. Ми не збираємося використовувати thisу функціональних компонентах.

Якщо ви зайшли так далеко, ви також можете поглянути на мої книги.

Discover Functional JavaScript був названий одним ізнайкращі книги про функціональне програмування від BookAuthority !

Докладніше про застосування методів функціонального програмування до React погляньте на Functional React.

Вивчіть функціональний React на основі проекту за допомогою функціональної архітектури з React та Redux .

Напишіть мені свій відгук.