Повторное использование кода с помощью HOC в React

Повторное использование кода с помощью HOC в React Дмитрий Цепелев

Почему компоненты распухают? •  перерисовка •  граничные условия •  загрузка
данных •  подготовка props •  side-эффекты 2

Простое e-commerce приложение 3 ProductListContainer – компонент, отвечающий за загрузку
списка товаров

Простое e-commerce приложение 4 ProductList – компонент, отвечающий за отрисовку

Простое e-commerce приложение 5 ProductRow – компонент, отвечающий за отрисовку
строки таблицы списка товаров

Простое e-commerce приложение 6 AddToCartButton – компонент, отвечающий за отрисовку
кнопки для добавления товара в корзину

Простое e-commerce приложение 7 NavbarItem – компонент, отвечающий за отрисовку
элемента навигационного меню

Перерисовка компонентов 8 const ProductRow = ({ id, name, price
}) => ( <tr> <td>{name}</td> <td>{price}</td> { } <td> <Link to={`/products/${id}`}>Details</Link> </td> </tr> )

Перерисовка компонентов •  pure •  проверяет shallowEqual •  может работать
медленно, если state и props объемные •  ложно-положительные срабатывания •  shouldComponentUpdate •  реализуем сами •  дает больше контроля 9

Перерисовка компонентов 10 class ProductRow extends Component { shouldComponentUpdate(nextProps) {
return nextProps.id !== this.props.id } render() { //... } }

Принцип разделения ответственности •  Эдсгер Дейкстра, “On the role of
scientific thought”, 1974 •  Крис Рид, «Элементы функционального программирования», 1989 •  программа разделяется на секции, ответственные за определенные области бизнес-логики 11

Компонент высшего порядка (HOC) 12 const Name = () =>
<p>Guest</p> const withGreeting = WrappedComponent => props => ( <div> Hi, <WrappedComponent {...props} /> </div> ) withGreeting(Name)

onlyUpdateForKeys 16 const ProductRow = onlyUpdateForKeys(['id'])( ({ id, name, price
/* ...больше свойств */ }) => ( <tr> <td>{name}</td> <td>{price}</td> <td> <Link to={`/products/${id}`}>Details</Link> </td> </tr> ) )

onlyUpdateForKeys 17 const enhance = onlyUpdateForKeys(['id']) const ProductRow = ({
id, name, price /* ...больше свойств */ }) => ( <tr> <td>{name}</td> <td>{price}</td> <td> <Link to={`/products/${id}`}>Details</Link> </td> </tr> ) export default enhance(ProductRow)

onlyUpdateForKeys 18 const onlyUpdateForKeys = propKeys => WrappedComponent => class
extends Component { shouldComponentUpdate(nextProps) { return propKeys.some(key => this.props[key] !== nextProps[key] ) } render() { return <WrappedComponent {...this.props} /> } }

Простое e-commerce приложение 23 ProductList – компонент, отвечающий за отрисовку

Граничные условия в render 24 const ProductList = ({ products
}) => ( <table> <thead> <tr> <th>Name</th> <th>Price</th> </tr> </thead> <tbody> {products.map(p => <ProductRow key={p.id} {...p} />)} </tbody> </table> )

Граничные условия в render 25 const ProductList = ({ products
}) => { if (!products.length) { return <NoData /> } return ( <table> {/* та же таблица */} </table> ) }

Граничные условия в render 26 const ProductList = ({ loading,
products }) => { if (loading) { return <Spinner /> } if (!products.length) { return <NoData /> } return (...) }

Граничные условия в render 27 const ProductList = ({ currentUser,
loading, products }) => { if (!currentUser) { return <NotAuthorized /> } if (loading) { return <Spinner /> } if (!products.length) { return <NoData /> } return (...) }

28 const enhance = branch( ({ products }) => !products.length,
() => null ) const ProductList = ({ products }) => (...) export default enhance(ProductList) Граничные условия в render

31 const renderNothing = () => null const enhance =
branch( ({ products }) => !products.length, renderNothing ) const ProductList = ({ products }) => (...) export default enhance(ProductList) Граничные условия в render

branch 32 const branch = (cond, cb) => WrappedComponent =>
props => cond(props) ? cb(props) : <WrappedComponent {...props} />

branch 33 const branch = (cond, cb) => WrappedComponent =>
props => cond(props) ? cb(props) : <WrappedComponent {...props} />

Простое e-commerce приложение 34 ProductRow – компонент, отвечающий за отрисовку
строки таблицы списка товаров

Подготовка данных для отрисовки 35 const formattedPrice = price =>
`$${price}` const enhance = onlyUpdateForKeys(['id']) const ProductRow = ({ id, name, price }) => ( <tr> <td>{name}</td> <td>{formattedPrice(price)}</td> <td> <Link to={`/products/${id}`}>Details</Link> </td> </tr> ) export default enhance(ProductRow)

36 const formattedPrice = price => `$${price}` const enhance =
onlyUpdateForKeys(['id'])( withProps(({ price }) => ({ price: formattedPrice(price) })) ) const ProductRow = ({ id, name, price }) => (...) export default enhance(ProductRow) Подготовка данных для отрисовки

withProps 37 const withProps = mapper => WrappedComponent => props
=> { const newProps = { ...props, ...mapper(props) } return <WrappedComponent {...newProps} /> }

withProps 38 const withProps = mapper => WrappedComponent => props
=> { const newProps = { ...props, ...mapper(props) } return <WrappedComponent {...newProps} /> }

Композиция 39 withRouter( injectIntl( connect(mapStateToProps, mapDispatchToProps) ) )(LandingPage)

Композиция 40 const enhance = compose( withRouter, injectIntl, connect(mapStateToProps, mapDispatchToProps)
) enhance(LandingPage)

compose 41 const compose = (...hocs) => WrappedComponent => hocs.reduce((acc,
hoc) => hoc(acc), WrappedComponent)

onlyUpdateForKeys(['id'])( withProps(({ price }) => ({ price: formattedPrice(price) })) ) const ProductRow = ({ id, name, price }) => (...) export default enhance(ProductRow) compose

compose( onlyUpdateForKeys(['id']), withProps(({ price }) => ({ price: formattedPrice(price) })) ) const ProductRow = ({ id, name, price }) => (...) export default enhance(ProductRow) compose

46 const ProductList = ({ currentUser, loading, products }) =>
{ if (!currentUser) { return <NotAuthorized /> } if (loading) { return <Spinner /> } if (!products.length) { return <NoData /> } return (...) } Еще раз про граничные условия

47 const renderComponent = component => component const enhance =
compose( branch( ({ currentUser }) => !currentUser, renderComponent(NotAuthorized) ), branch( ({ loading }) => loading, renderComponent(Spinner) ), branch( ({ products }) => !products.length, renderComponent(NoData) ) ) Еще раз про граничные условия

const renderComponent = component => component const enhance = compose(
branch( ({ currentUser }) => !currentUser, renderComponent(NotAuthorized) ), branch( ({ loading }) => loading, renderComponent(Spinner) ), branch( ({ products }) => !products.length, renderComponent(NoData) ) ) 48 Еще раз про граничные условия

49 const mapStateToProps = state => ({ currentUser: getCurrentUser(state) })
const enhance = compose( connect(mapStateToProps), branch( ({ currentUser }) => !currentUser, renderComponent(NotAuthorized) ), ... ) Еще раз про граничные условия

50 const checkAuthorization = compose( connect(state => ({ currentUser: getCurrentUser(state)
})), branch( ({ currentUser }) => !currentUser, renderComponent(NotAuthorized) ) ) Еще раз про граничные условия

51 const enhance = compose( checkAuthorization, branch( ({ loading })
=> loading, renderComponent(Spinner) ), branch(({ products }) => !products.length, renderComponent(NoData)) ) const ProductList = ({ products }) => (...) export default enhance(ProductList) Еще раз про граничные условия

52 const enhance = compose( checkAuthorization, branch( ({ loading })
=> loading, renderComponent(Spinner) ), branch(({ products }) => !products.length, renderComponent(NoData)) ) const ProductList = ({ products }) => (...) export default enhance(ProductList) Еще раз про граничные условия

53 const showSpinnerWhileLoading = branch( ({ loading }) => loading,
renderComponent(Spinner) ) Еще раз про граничные условия

54 const enhance = compose( checkAuthorization, showSpinnerWhileLoading, branch(({ products })
=> !products.length, renderComponent(NoData)) ) const ProductList = ({ products }) => (...) export default enhance(ProductList) Еще раз про граничные условия

recompose •  https://github.com/acdlite/recompose •  есть все функции, которые мы реализовали,
и множество других •  почти 10 000 звёд, хорошая поддержка •  flow •  RxJS •  TypeScript •  React Native 55

Простое e-commerce приложение 56 AddToCartButton – компонент, отвечающий за отрисовку
кнопки для добавления товара в корзину

withHandlers 57 const AddToCartButton = ({ price, productId, onAddToCart })
=> ( <div> <span>{price}</span> <button onClick={() => onAddToCart(productId)}> Add to cart </button> </div> )

withHandlers 60 const enhance = withHandlers({ onClickHandler: ({ onAddToCart, productId
}) => () => onAddToCart(productId) }) const AddToCartButton = ({ price, onClickHandler }) => ( <div> <span>{price}</span> <button onClick={onClickHandler}>Add to cart</button> </div> ) export default enhance(AddToCartButton)

Простое e-commerce приложение 64 ProductListContainer – компонент, отвечающий за загрузку

Загрузка данных 65 class ProductListContainer extends Component { constructor(props) {
/* инициализируем cтейт */ } loadProducts = () => { /* идем на сервер за данными */ } componentWillMount() { this.loadProducts() } render() { /* рисуем */ } }

Загрузка данных 66 class ProductListContainer extends Component { constructor(props) {
super(props) this.state = { products: [], loading: false } } //... }

Загрузка данных 67 class ProductListContainer extends Component { loadProducts =
() => { this.setState({ loading: true }) fetchProducts().then(products => this.setState({ products, loading: false }) ) } //... }

Загрузка данных 68 class ProductListContainer extends Component { render() {
return ( <ProductList products={this.state.products} loading={this.state.loading} /> ) } //... }

class ProductListContainer extends Component { constructor(props) { super(props) this.state =
{ products: [], loading: false } } loadProducts = () => { this.setState({ loading: true }) fetchProducts().then(products => this.setState({ products, loading: false }) ) } componentWillMount() { this.loadProducts() } render() { const { products, loading } = this.state return (<ProductList products={products} loading={loading} />) } } 69

70 const enhance = compose( withState('products', 'setProducts', []), withState('loading', 'setLoading',
false), withHandlers({ loadProducts: ({ setLoading, setProducts }) => () => { setLoading(true) fetchProducts().then(products => { setLoading(false) setProducts(products) }) } }), lifecycle({ componentWillMount() { this.props.loadProducts() } }) ) export default enhance(ProductList)

Простое e-commerce приложение 73 NavbarItem – компонент, отвечающий за отрисовку
элемента навигационного меню

componentFromProp 74 <Navbar> <NavbarItem to={homePath}>Home</NavbarItem> <NavbarItem to={cartPath}>Cart</NavbarItem> <NavbarItem onClick={signOut}>Sign Out</NavbarItem>
</Navbar>

75 const NavbarItem = ({ to, onClick, children }) =>
{ const className = 'navbar-item' if (to) { return ( <Link className={className} to={to}>{children}</Link> ) } if (onClick) { return ( <button className={className} onClick={onClick}>{children}</button> ) } return null }

76 const enhance = compose( withProps({ className: 'navbar-item' }), branch(
({ to }) => to, withProps({ component: Link }) ), branch( ({ onClick }) => onClick, withProps({ component: 'button' }) ) ) export default enhance(componentFromProp('component'))

77 const enhance = compose( withProps({ className: 'navbar-item' }), branch(
({ to }) => to, withProps({ component: Link }) ), branch( ({ onClick }) => onClick, withProps({ component: 'button' }) ) ) export default enhance(componentFromProp('component'))

redux + загрузка данных •  запрос выполняется вне компонента • 
локального состояния нет •  не перерисовывать компонент, если ничего не изменилось •  по возможности – брать данные из store 78

const mapStateToProps = (state, { match: { params: { id
} } }) => ({ product: getProduct(state, id) }) class ProductProfileContainer extends Component { shouldComponentUpdate(nextProps) { return nextProps.match.params.id !== this.props.match.params.id } componentDidMount() { requestProduct(this.props.match.params.id) } render() { return <ProductProfile product={this.props.product} /> } } export default connect( mapStateToProps, mapDispatchToProps )(ProductProfileContainer) 79

} } }) => { id, product: getProduct(state, id) } class ProductProfileContainer extends Component { shouldComponentUpdate(nextProps) { return nextProps.match.params.id !== this.props.id } componentDidMount() { requestProduct(this.props.id) } render() { return <ProductProfile product={this.props.product} /> } } export default connect( mapStateToProps, mapDispatchToProps )(ProductProfileContainer) 83

86 const mapStateToProps = (state, { match: { params: {
id } } }) => ({ id, product: getProduct(state, id) }) const enhance = compose( onlyUpdateForPropTypes, setPropTypes({ product: ProductShape }), connect(mapStateToProps, mapDispatchToProps), lifecycle({ componentDidMount() { requestProduct(this.props.id) } }) ) export default enhance(ProductProfile)

Альтернативы recompose •  написать руками •  Recompact 38.2kB minified, 6.9kB
gzipped, 260 звёзд (https:// github.com/neoziro/recompact) •  Reassemble 21.7kB minified, 4.5kB gzipped, 54 звезды (https://github.com/wikiwi/reassemble) 89

Бенчмарки 90 100 HOCs, измеряем число обновлений в секунду https://github.com/neoziro/recompact/tree/master/src/__benchmarks__

Производительность •  производительность может ухудшиться из-за появления новых компонентов в
дереве •  легче управлять перерисовкой компонентов •  многие компоненты реализованы в виде чистых функций (без использования классов), в будущем возможна оптимизация работы таких компонентов в React 91

Тестирование 92 const withProductCount = withProps( ({ products }) =>
({ count: products.length }) ) describe('withProductCount decorator', () => { const products = [{ id: 1 }] const MockComponent = () => <div /> it('adds product count prop', () => { const Enhanced = withProductCount(MockComponent) const wrapper = mount(<Enhanced products={products} />) const subject = wrapper.find(MockComponent) expect(subject.prop('count')).toBe(1) }) })

const withGreeting = compose( setDisplayName('withGreeting'), setPropTypes({ greeting: PropTypes.string.required, children: PropTypes.string.required
}), onlyUpdateForPropTypes, mapProps(({ greeting, children }) => ({ text: `${greeting}, ${children}` })) ) const Label = ({ text }) => (<h1>{text}</h1>) const GreetingLabel = withGreeting(Label) const App = () => <GreetingLabel greeting="Hi">John</GreetingLabel> Отладка

Зачем нам HOC? •  убирать логику из presentational components и
описать ее декларативно •  повторно использовать presentational components в разных частях приложения •  тестировать логику отдельно от представления 100

Что может пойти не так? •  нельзя использовать HOC внутри
render (ок, не будем) •  статические методы придется копировать •  с refs работать неудобно (но можно) •  коллизии имен 101 https://reactjs.org/docs/higher-order-components.html#caveats

Зачем нам recompose? •  не писать кучу boilerplate-кода •  удобно
управлять перерисовкой компонентов •  класть в props обработчики и переменные по мере необходимости •  удобно обрабатывать граничные условия с помощью branch 102

А как же Render Props? 103

class ProductListContainer extends Component { constructor(props) { super(props) this.state =
{ products: [], loading: false } } loadProducts = () => { this.setState({ loading: true }) fetchProducts().then(products => this.setState({ products, loading: false }) ) } componentWillMount() { this.loadProducts() } render() { const { products, loading } = this.state return (<ProductList products={products} loading={loading} />) } } 104

class ProductList extends Component { ... render() { return this.props.render(this.state)
} } <ProductList render={ ({ products }) => (<table>...</table>) } /> 105

Спасибо за внимание! [email protected] @dmitrytsepelev DmitryTsepelev

Повторное использование кода с помощью HOC в React

Повторное использование кода с помощью HOC в React

More Decks by Dmitry Tsepelev

Other Decks in Programming

Featured

Transcript