Компоненты высокого порядка и без сохранения состояния в React 0.14

По мере того, как React продолжает развиваться, способы написания наших компонентов также обретают форму. В последнее время мы видели много хороших паттернов. Один интересный шаблон использует компоненты высокого порядка для расширения других компонентов.

Компоненты высокого порядка отлично подходят для композиционного применения некоторых функций. Этот шаблон очень хорошо сочетается с компонентами без состояния. Вот действительно простой пример.

У нас будет компонент, который отображает реквизит приветствия.

import React, { Component } from ‘react’
class App extends Component {
 constructor(props) {
   super(props)
 }
render() {
   return (
     <h1>{ this.props.greeting }</h1>
   )
  }
}
App.defaultProps = {
  greeting: ‘Hi’
}
export default App

Теперь мы напишем компонент высокого порядка, который может изменять приветствия.

import React, { Component } from ‘react’
const passMeProps = (WrappedComponent) => {
   class LoggerWrap extends Component {
     render() {
       return (
         <WrappedComponent greeting={‘Yo!’}/>
       )
     }
   }
   return LoggerWrap
}
export default passMeProps

Теперь, с небольшими изменениями, мы можем использовать это в нашем компоненте.

import React, { Component } from ‘react’
import passMeProps from ‘./PropsHOC’
class App extends Component {
   constructor(props) {
     super(props)
   }
   render() {
     return (
       <h1>{ this.props.greeting }</h1>
     )
   }
}
App.defaultProps = {
  greeting: ‘Hi’
}
export default passMeProps(App)

Мы включаем компонент высокого порядка, а затем оборачиваем им компонент App перед экспортом.

Теперь наша страница приветствует нас Yo!

Есть много других полезных вариантов использования этого шаблона. Замена Mixins, подключение вашего компонента к магазину или расширение компонентов некоторыми сторонними функциями.

В React 0.14 были представлены компоненты без состояния, чтобы поощрять простые компоненты и более композиционную архитектуру.

Используя этот подход, большинство наших приложений перестают сохранять состояние, и мы контролируем их поведение, передавая реквизиты или расширяя их компонентами высокого порядка. Эти типы компонентов легко тестировать и анализировать, потому что при одинаковых входных данных они будут давать одинаковые выходные данные.

Итак, чтобы написать компонент без состояния, который можно расширить с помощью нашего предыдущего HOC, мы можем сделать это.

import React from 'react'  
import passMeProps from './PropsHOC'

const Test = ({greeting='Hi'}) => (  
  <h1>{greeting}</h1>
)

export default passMeProps(Test)

Воспользовавшись деструктуризацией и аргументами по умолчанию из ES6, мы можем написать компонент без состояния с подразумеваемым методом рендеринга и реквизитами по умолчанию. Затем оберните этот компонент в наш компонент высокого порядка, и все готово.

Итак, чтобы написать компонент без состояния, который можно расширить с помощью нашего предыдущего HOC, мы можем сделать это.