zoukankan      html  css  js  c++  java
  • [React] Higher Order Components (replaces Mixins)

    Higher order components will allow you to apply behaviors to multiple React components.

    So the idea is to create a high order component, then use this hight order component to create multi same behaivor component. 

    So high order function is insdie function return another function, the same, high order component is inside component return another component.

    let Mixin = InnerComponent => class extends React.Component {
      constructor(){
        super();
        this.state = {val: 0}
      }
      update(){
        this.setState({val: this.state.val + 1})
      }
      componentWillMount(){
        console.log('will mount')
      }
      render(){
        return <InnerComponent
          update={this.update.bind(this)}
          {...this.state}
          {...this.props} />
      }
      componentDidMount(){
        console.log('mounted')
      }
    }

    Inside the Mixin Component, we define the behavior "update" which will be shared to the mixined components.

    Define two component: 

    const Button = (props) => <button
                                onClick={props.update}>
                                {props.txt} - {props.val}
                              </button>
    
    const Label = (props) => <label
                                onMouseMove={props.update}>
                                {props.txt} - {props.val}
                              </label>

    Mixin those two component with Mixin:

    let ButtonMixed = Mixin(Button)
    let LabelMixed = Mixin(Label)

    Use it:

    class App extends React.Component {
    
      render(){
        return (
          <div>
            <ButtonMixed txt="Button" />
            <LabelMixed txt="Label" />
          </div>
        );
      }
    
    }
    
    ReactDOM.render(<App />, document.getElementById('app'));

    ----- 

    let Mixin = InnerComponent => class extends React.Component {
      constructor(){
        super();
        this.state = {val: 0}
      }
      update(){
        this.setState({val: this.state.val + 1})
      }
      componentWillMount(){
        console.log('will mount')
      }
      render(){
        return <InnerComponent
          update={this.update.bind(this)}
          {...this.state}
          {...this.props} />
      }
      componentDidMount(){
        console.log('mounted')
      }
    }
    
    
    const Button = (props) => <button
                                onClick={props.update}>
                                {props.txt} - {props.val}
                              </button>
    
    const Label = (props) => <label
                                onMouseMove={props.update}>
                                {props.txt} - {props.val}
                              </label>
    
    let ButtonMixed = Mixin(Button)
    let LabelMixed = Mixin(Label)
    
    class App extends React.Component {
    
      render(){
        return (
          <div>
            <ButtonMixed txt="Button" />
            <LabelMixed txt="Label" />
          </div>
        );
      }
    
    }
    
    ReactDOM.render(<App />, document.getElementById('app'));
  • 相关阅读:
    (四十九)Quartz2D自定义控件
    (四十八)Quartz2D引擎进阶
    (四十七)Quartz2D引擎初步
    (四十六)内存管理的复习
    (四十五)Modal 模态窗口 -遮盖
    (四十四)TabBarController和NagivationController配合
    (四十三)UITabBarController和AppDelegate的一些细节
    (四十二)tableView的滑动编辑和刷新 -局部刷新和删除刷新 -待解决问题
    linux命令——svn分支创建、合并
    C++异常处理
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5746248.html
Copyright © 2011-2022 走看看