Несколько вопросов по функциональным компонентам
Задумывались ли вы, как создать компонент в React?
Чтобы ответить, это так же просто, как создать функцию, возвращающую HTML-подобный синтаксис.
import React from 'react';
function Counter({n}) {
return (
<div>{n}</div>
);
}
export default Counter;
Теперь посмотрим, что случилось. Counter это функция, которая преобразует число в HTML. И если вы посмотрите более внимательно, Counter это чистая функция. Это верно, такая функция, которая возвращает результат на основе своих входных данных и не имеет побочных эффектов. Это объяснение приходит с новым вопросом. Что такое побочный эффект?
Короче говоря, побочным эффектом является любая модификация среды вне функции или любая считанная информация из внешней среды, которая может измениться.
Возможно, вы заметили, что я использовал синтаксис деструкторизации в списке параметров, чтобы извлечь входной параметр n. Это связано с тем, что компоненты принимают в качестве входных данных один объект с именем «props», которому передаются все свойства. Вот как параметр n может быть установлен из любого другого компонента:
<Counter n={1} />
В некотором смысле этот синтаксис можно представить как вызов функции Counter({n: 1}). Разве это не правильно?
Давайте продолжим наше путешествие
Могут ли функциональные компоненты иметь состояние? Как подсказывает название компонента, я хотел бы сохранить и изменить счетчик. Что если мы просто объявим переменную, содержащую число внутри компонента? Это будет работать?
Давайте выясним.
Я начну с объявления переменной внутри функционального компонента.
import React from 'react';
function Counter() {
let n = 0;
return (
<div>{n}</div>
);
}
export default Counter;
Теперь давайте добавим функцию, которая увеличивает число и записывает его в консоль. Я буду использовать эту функцию в качестве обработчика события click.
import React from 'react';
function Counter() {
let n = 0;
function increment(){
n = n + 1;
console.log(n)
}
return (
<div>
<span>{n}</span>
<button onClick={increment}>Increment </button>
</div>
);
}
export default Counter;
Если мы посмотрим на консоль, то увидим, что число на самом деле увеличивается, но это не отражается на экране.
Вы понимаете это правильно, ... нам нужно изменить номер, но нам нужно также повторно отобразить его на экране.
Здесь в игру вступает функция от React Hooks. Кстати, эти служебные функции называются хуками и начинаются со слова «use». Мы собираемся использовать один из них, useState. Я также запишу текст «re-render» на консоль, чтобы увидеть, сколько раз вызывается функция 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 (
<div>
<span>{n}</span>
<button onClick={increment}>Increment </button>
</div>
);
}
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 (
<div>
<span>{n}</span>
<button
onClick={() => setN(increment)}>
Increment
</button>
</div>
);
}
export default Counter;
Чтобы понять, что значит setN(increment), давайте прочитаем документацию.
Передача функции обновления позволяет получить доступ к значению текущего состояния внутри программы обновления.
OK, поэтому вызывается increment() с текущим состоянием n и используется для вычисления нового значения состояния.
Последние мысли
Давайте подведем итоги, что мы узнали.
В React мы можем просто определить компонент, используя функцию, которая возвращает HTML-подобный синтаксис.
React Hooks позволяет определить состояние таких функциональных компонентов.
