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

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

Например:

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

   componentWillMount() {
     console.info('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>

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

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>
);

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

В этом случае вы можете создать 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, который затем обертывает все ваши различные компоненты, с которыми вы хотите им поделиться.

См. React Docs для дальнейшего чтения.