В этом уроке мы с вами рассмотрим как создавать компоненты в React не с помощью классов, а с помощью функций.
Итак в React 0.14 был введен новый способ определения компонентов. С помощью чистых функций. Какие же плюсы есть у этого подхода и почему н устроили классы?
Ну давайте наконец то попробуем
Возьмем App.js, который мы писали для треков и попробуем переписать на чистые функции.
Уберем импорт компоненты из react.
import React from 'react';
и заменим класс на функцию
const App = (props) =>
То есть сейчас у нас обычная функция App, которая принимает на вход props. Для того, чтобы не писать лишний код мы можем делать деструктуризацию сразу при прокидывании данных
const App = ({ tracks }) =>
Вместо метода render оставим только return в этой функции.
return (
<div>
<Menu/>
<div>
<input type="text" ref={(input) => { trackInput = input }} />
<button onClick={addTrack.bind(this)}>Add track</button>
</div>
<div>
<input type="text" ref={(input) => { searchInput = input }} />
<button onClick={findTrack.bind(this)}>Find track</button>
</div>
<div>
<button onClick={onGetTracks}>Get tracks</button>
</div>
<ul>
{tracks.map((track, index) =>
<li key={index}>{track.name}</li>
)}
</ul>
</div>
);
Изменим методы класса на обычные функции и уберем везде this. Создадим локальные переменные trackInput и searchInput. Добавим в деструктуризацию все екшены, которые мы используем
let trackInput = '';
let searchInput = '';
const addTrack = () => {
console.log('addTrack', trackInput.value);
onAddTrack(trackInput.value);
trackInput.value = '';
}
const findTrack = () => {
console.log('findTrack', searchInput.value);
onFindTrack(searchInput.value);
}
Как мы видим, после всех наших изменений код по прежнему работает. Теперь у нас вместо класса функция с параметрами, нет this, что упрощает работу, connect нам вообще не пришлось менять. Такой компонент намного проще тестировать. Нужно только помнить, что локальный стейт мы уже использовать не можем и нам нужно абсолютно все данные хранить в store.