Реагирование - способ унификации, если многие компоненты имеют одинаковый кусок кода в методах жизненного цикла

Question

У меня есть несколько компонентов с похожим фрагментом кода в методах жизненного цикла и некоторым сходством в переменных состояния.Есть ли способ объединить их, наследуя от одного родителя или что-то в этом роде?

constructor(props) {
    super(props);
    this.state = {
        //state properties similar in all components, getting from redux
        //state properties specific for this component
    }
    // same code in many components
}

componentWillMount() {
    // same code in many components
    // code specific for this component
}

Могу ли я использовать дочерние методы и реквизиты в родительской "обертке"?Могу ли я изменить состояние компонента с родительского?

Answer 1

В этом случае вы можете создать HOC (компоненты высшего порядка).Это может выглядеть следующим образом:

/*
   A Higher Order Component is a function,
   that takes a Component as Input and returns another Component.

   Every Component that gets wrapped by this HOC
   will receive `exampleProp`,`handleEvent`, 
   plus all other props that get passed in.
*/

function WithCommonLogic(WrappedComponent) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        example: ''
      }
    }
    componentWillMount() {
      ...
      // Same code in many components.
    }
    callback = () => {
      /* Enhanced components can access this callback 
         via a prop called `handleEvent`
         and thereby alter the state of their wrapper. */
      this.setState({example: 'some val'})
    }
    render() {
      return <WrappedComponent 
          exampleProp={this.state.example}
          handleEvent={this.callback}
          {...this.props}
      />
  }
}


// You use it like this:

const EnhancedComponent1 = WithCommonLogic(SomeComponent);
const EnhancedComponent2 = WithCommonLogic(SomeOtherComponent);

Теперь вся общая логика переходит в этот HOC, который затем объединяет все ваши различные компоненты, с которыми вы хотите поделиться им.

См. Реагируйте Документы для дальнейшего чтения.

Answer 2

Вы можете создать компонент высшего порядка (HOC) для этого, в основном вы просто пишете компонент с тем же методом, который повторяется, а затем в функции render() вызываете функцию this.props.children с любыми аргументами внутреннего состояния HOC, которые выхотите, вы также можете передать всю функцию state и setState, чтобы вы могли изменить состояние HOC внутри базового компонента.

Например:

  class HOC extends React.Component {
   constructor(props) {
     super(props);
     state = {
       someState: 'foo',
     };
   }

   componentWillMount() {
     console.log('i mounted!')
   }
   render() {
     return (
       <div>
         {this.props.children({ state: this.state, setState: this.setState })}
       </div>
     )
   }
 }

 const SomeComponent = () =>
   <HOC>
     {({ state, setState }) => (
       <div>
         <span>someState value: </span>
         <input 
           value={state.someState} 
           onChange={e => setState({ someState: e.target.value})} 
         />
       </div>
     )}
   </HOC>

Youс ним можно также делать действительно классные и интересные вещи, например, подключать фрагмент своего состояния редукса, когда вам это нужно:

import { connect } from 'react-redux';

const ProfileState = connect(
  state => ({ profile: state.profile }),
  null,
)(({ 
  profile, 
  children
  }) => ( 
  <div>
    {children({ profile })}
  </div>
));

const ProfilePage = () => (
  <div>
    Your name is:
    <ProfileState>
     {({ profile }) => (
       <span>{profile.name}</span>
     )}
    </ProfileState>
  </div>
);

Здесь - полная документация по этой технике.