Repetition is impossible

You can never write code again in your life

What are higher-order components

A higher-order component is a function that takes a component and returns a component

function Hoc(WrappedComponent) {
  return class extends Component {
    render() {
      return (
        <WrappedComponent />
        )
     }
  }
}
Copy the code

When to use it

  • When there is duplication between your components
  • There is a lot of repetitive logic
  • Hijack rendering (backinherit hoc to get components to render after processing components)

Case problem

Case1: Simple two components with a lot of repetitive code

// a.jsx class A extends Component { state = { name: '', age: '' } handleEvent = () => { const {name, age} = this.state console.log(name, age) } render () { const { name, age } = this.state; Return (<div> <span> user name </span> {name} <span> age </span> {age} <button onClick = {this.handleEvent}> click </button> </div>)}  } // b.jsx class B extends Component { state = { name: '', age: '' } handleEvent = () => { const {name, age} = this.state console.log(name, age) } render () { const { name, age } = this.state; Return (<div> <span> user name </span> {name} <span> age </span> {age} <button onClick = {this.handleEvent}> click </button> </div>)} }Copy the code

Finding that the two components above repeat, let’s pull out a Hoc component to see the effect

function Hoc(WrappedComponent) { return class extends Component { state = { name: '', age: '' } handleEvent = () => { const {name, age} = this.state console.log(name, age) } render() { const props = { handleEvent: this.handleEvent } return ( <div> <WrappedComponent {... this.state} {... Class A extends Component {render () {const {name, age, handleEvent} = this. Props; Return (<div> <span> user name </span> {name} <span> age </span> {age} <button onClick = {this.handleEvent}> click </button> </div>)}  } export default Hoc(A); class B extends Component { render () { const { name, age, handleEvent} = this.props; Return (<div> <span> user name </span> {name} <span> age </span> {age} <button onClick = {this.handleEvent}> click </button> </div>)}  } export default Hoc(B);Copy the code

The above is a simple case of solving repeated components

Let’s look at the way higher-order components are implemented

HOC

  1. Attribute Props Proxy

    The higher-order component receives the WrappedComponent passed to the package for props

    function Hoc(WrappedComponent) { return class C extends React.Component { render() { return <WrappedComponent {... this.props} /> } } }Copy the code

  2. Reverse inheritance

    Hoc inherits the exposed component so that the exposed component is the parent component so that it can use the methods in the parent component

        ```
    class A extends React.Component {
      render() {
        const { age } = this.props;
        return (
          <div>
            <p>{age}</p>
          </div>
        )
      }
    }
    function Hoc(WrapperComponent) {
      return class AB extends WrapperComponent {
        render() {
          return super.render();
        }
      }
    }

    const HocA = Hoc(A)

    ReactDom.render(<HocA age={24} />, document.getElementById("root"))

    ```
Copy the code

render-props

Pass a component’s state as props to the component to use the caller to determine how those props will handle rendering

``` class A extends React.Component { constructor(props) { super(props); this.state = {name:'xxx' }; } render() { return ( <div> {this.props.render(this.state)} </div> ); }} / / call way: "A render = {params = > (< p > {params. Name} < / p >)} / > ` ` `Copy the code

This is the simple HOC implementation mode we introduced

Advantages and disadvantages of each mode

Higher-order components, in either form, address common components with less repetitive code

  • Hoc is a black-box problem for users to use without looking at the source code of what hoc components write

  • Render -props is a white box to the user entirely dependent on the child components

  • Render -props does not allow data to be used outside of callbacks only within callbacks

  • Render -props is suitable for read-only operations

  • Hoc is better suited to handling logic

The actual scene

  • The react – connect redux
  • antd form