React - 一种统一的方式，如果许多组件在生命周期方法中具有相同的代码段

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
}

我可以在父 "wrapper" 中使用子方法和道具吗？我可以更改父组件的状态吗？

Answer 1

您可以为此创建高阶组件 (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>

你也可以用它做一些非常酷和有趣的事情，比如在你需要的时候连接你的 redux state 的一部分：

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

Here 是有关此技术的完整文档。

Answer 2

在这种情况下，您可以创建 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 进一步阅读。

React - 一种统一的方式，如果许多组件在生命周期方法中具有相同的代码段

React - a way to unify, if many components have the same piece of code in lifecycle methods

javascript

reactjs

react-redux

react-lifecycle