Как говорится, в редакцию пришло письмо: "не могли бы вы подробно разъяснить..." Отвечаю публично, кому оно надо, а применение можно пощупать тут.
Сначала были компоненты на классах:
class Square extends React.Component {
constructor() {
super()
this.state = {
value: null,
}
}
render() {
const { value, onClick } = this.props
return (
<button className="square" onClick={onClick}>
{value}
</button>
)
}
}Потом явились функциональные компоненты:
const Square = ({ value, onClick }) => {(
<button className="square" onClick={onClick}>
{value}
</button>
)}В чём разница? Выкидываем: объявление класса, constructor(), render(), const для деструктуризации props, this. А ещё исчезло состояние компонента — мы получаем stateless functional components.
Как дальше жить без локального состояния: 1) или применять функциональные компоненты только там, где не нужно хранить состояние; 2) или перенести всё состояние в стор redux-а (как единственный источник правды). Локальные состояния компонентов — это дополнительный уровень абстракции, требующий обслуживания. А зачем?
Ещё желательно преодолеть коннектобоязнь — не тащить все свойства через родительские компоненты, а применять connect() для дочерних компонентов по мере использования свойств.
Разобрались, а как же применить PureComponent к функциональным компонентам? На помощь приходит техника Higher-Order Components:
// utils.js
import React from 'react'
export const pureComponent = (fn) => {
class Wrapper extends React.PureComponent {
render() {
return fn(this.props, this.context)
}
}
// не надо, т.к. подписывает на контекст как и функциональный компонент,
// так и оболочку-PureComponent; лучше назначать сразу оболочке (снаружи)
// Wrapper.contextTypes = fn.contextTypes
Wrapper.displayName = `PureComponent(${fn.name})`
return Wrapper
}Присваивание displayName — для красоты в React DevTools. Подробнее про contextTypes можно почитать тут.
Пример использования:
import { pureComponent } from 'utils'
const Square = ({ value, onClick }) => {(
<button className="square" onClick={onClick}>
{value}
</button>
)}
export default pureComponent(Square)