const EnhancedComponent = higherOrderComponent(WrappedComponent);

class CommentList extends React.Component {
   constructor(props) {
     super(props);
     this.handleChange = this.handleChange.bind(this);
     this.state = {
       // 假設 "DataSource" 是個全局范圍內(nèi)的數(shù)據(jù)源變量,來自外部，自身帶有很多方法
       comments: DataSource.getComments()  //假設getComments()這個方法可以獲取所有的評論
     };
   }
   componentDidMount() {
     // 訂閱更改；監(jiān)聽  DataSource ，發(fā)生變化時更新數(shù)據(jù)
     DataSource.addChangeListener(this.handleChange);
   }
   componentWillUnmount() {
     // 清除訂閱
     DataSource.removeChangeListener(this.handleChange);
   }
   handleChange() {
     // 當數(shù)據(jù)源更新時，更新組件狀態(tài)
     this.setState({
       comments: DataSource.getComments()  //假設getComments()這個方法可以獲取所有的評論
     });
   }
   render() {
     return (
       <div>
         {this.state.comments.map((comment) => (
           <Comment comment={comment} key={comment.id} />
         ))}
       </div>
     );
   }
 }
 // 假設 DataSource：來自外部；它自身有很多方法，如：getComments()，addChangeListener，removeChangeListener 等
//  假設 <Comment /> 是子組件，父組件 CommentList 需要將 comment 、key 傳遞給它

class BlogPost extends React.Component {
 constructor(props) {
   super(props);
   this.handleChange = this.handleChange.bind(this);
   this.state = {
     blogPost: DataSource.getBlogPost(props.id)
   };
 }
 componentDidMount() {
   DataSource.addChangeListener(this.handleChange);
 }
 componentWillUnmount() {
   DataSource.removeChangeListener(this.handleChange);
 }
 handleChange() {
   this.setState({
     blogPost: DataSource.getBlogPost(this.props.id)
   });
 }
 render() {
   return <TextBlock text={this.state.blogPost} />;
 }
}

 const CommentListWithSubscription = withSubscription(
    CommentList,
    (DataSource) => DataSource.getComments()
  );
  const BlogPostWithSubscription = withSubscription(
    BlogPost,
    (DataSource, props) => DataSource.getBlogPost(props.id)
  );
//以上寫法相當于高級組件的調(diào)用，withSubscription為自定義的高階組件；CommentList：被包裝的子組件；CommentListWithSubscription：返回的包裝后的組件

 // 此函數(shù)接收一個組件...
function withSubscription(WrappedComponent, selectData) {
 // ...并返回另一個組件...
 return class extends React.Component {
   constructor(props) {
     super(props);
     this.handleChange = this.handleChange.bind(this);
     this.state = {
       data: selectData(DataSource, props)
     };
   }
   componentDidMount() {
     // ...負責訂閱相關的操作...
     DataSource.addChangeListener(this.handleChange);
   }
   componentWillUnmount() {
     DataSource.removeChangeListener(this.handleChange);
   }
   handleChange() {
     this.setState({
       data: selectData(DataSource, this.props)
     });
   }
   render() {
     // ... 并使用新數(shù)據(jù)渲染被包裝的組件!
     // 請注意，我們可能還會傳遞其他屬性
     return <WrappedComponent data={this.state.data} {...this.props} />;
   }
 };
}

function logProps(InputComponent) {
 InputComponent.prototype.componentDidUpdate = function(prevProps) {
   console.log('Current props: ', this.props);
   console.log('Previous props: ', prevProps);
 };
 // 返回原始的 input 組件，暗示它已經(jīng)被修改。
 return InputComponent;
}
// 每次調(diào)用 logProps 時，增強組件都會有 log 輸出。
const EnhancedComponent = logProps(InputComponent)
//上面這種寫法會造成另一個同樣會修改componentDidUpate的HOC增強它，那么前面的HOC就會失效。

function logProps(WrappedComponent) {
    return class extends React.Component {
      componentDidUpdate(prevProps) {
        console.log('Current props: ', this.props);
        console.log('Previous props: ', prevProps);
      }
      render() {
        // 將 input 組件包裝在容器中，而不對其進行修改。Good!
        return <WrappedComponent {...this.props} />;
      }
    }
  }

render() {
  // 過濾掉非此 HOC 額外的 props，且不要進行透傳
  const { extraProp, ...passThroughProps } = this.props;
  // 將 props 注入到被包裝的組件中。
  // 通常為 state 的值或者實例方法。
  const injectedProp = someStateOrInstanceMethod;
  // 將 props 傳遞給被包裝組件
  return (
    <WrappedComponent
      injectedProp={injectedProp}
      {...passThroughProps}
    />
  );
}	

const NavbarWithRouter = withRouter(Navbar);

const CommentWithRelay = Relay.createContainer(Comment, config);

// React Redux 的 `connect` 函數(shù)const ConnectedComment = connect(commentSelector, commentActions)(CommentList);

  // connect 是一個函數(shù)，它的返回值為另外一個函數(shù)。
  const enhance = connect(commentListSelector, commentListActions)
  // 返回值為 HOC，它會返回已經(jīng)連接 Redux store 的組件
 const ConnectedComment = enhance(CommentList);

function withSubscription(WrappedComponent) {
 class WithSubscription extends React.Component {/* ... */}
 WithSubscription.displayName = `WithSubscription(${getDisplayName(WrappedComponent)})`;
 return WithSubscription;
}
function getDisplayName(WrappedComponent) {
 return WrappedComponent.displayName || WrappedComponent.name || 'Component';
}

render() {
  // 每次調(diào)用 render 函數(shù)都會創(chuàng)建一個新的 EnhancedComponent
  // EnhancedComponent1 !== EnhancedComponent2
  const EnhancedComponent = enhance(MyComponent);
  // 這將導致子樹每次渲染都會進行卸載，和重新掛載的操作！
  return <EnhancedComponent />;
}

   // 定義靜態(tài)函數(shù)
 WrappedComponent.staticMethod = function() {/*...*/}
 // 現(xiàn)在使用 HOC
 const EnhancedComponent = enhance(WrappedComponent);
 // 增強組件沒有 staticMethod
 typeof EnhancedComponent.staticMethod === 'undefined' // true
//為了解決這個問題，你可以在返回之前把這些方法拷貝到容器組件上：
function enhance(WrappedComponent) {
   class Enhance extends React.Component {/*...*/}
   // 必須準確知道應該拷貝哪些方法 :(
   Enhance.staticMethod = WrappedComponent.staticMethod;
   return Enhance
 }