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'));
  • 相关阅读:
    Java基础环境配置及HelloWorld
    Cassandra 在 360 的实践与改进
    如何构建阿里小蜜算法模型的迭代闭环?
    通用高效的数据修复方法:Row level repair
    RALM: 实时 Look-alike 算法在微信看一看中的应用
    人机对话技术研究进展与思考
    打造最可靠的自动驾驶基础架构
    Django中render和render_to_response的区别
    ui自动化chrome文件上传操作
    超继承super
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5746248.html
Copyright © 2011-2022 走看看