React Advanced components

A higher-order component is not a component, but a normal function that passes in a component and returns a new component.

Visualize a usage scenario (message board) :

1. Implementation of higher-order components

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import UserName from './UserName';
import Mobile from './Mobile';
 export default class Memo extends Component{
     render() {return(<form> <UserName/> <Mobile/> Message <textarea></textarea> </form>)}}Copy the code

When you refresh the page after filling in the user name and mobile phone number, the user name and mobile phone number still exist. Implementation: Save these two values to localStorage, refresh and reload.

The username components

import React,{Component} from 'react';
class UserName extends Component{
    componentDidMount(){
        this.username.value=localStorage.getItem('username') | |'Please enter a nickname';
    }
    handleChange=(event)=>{
        localStorage.setItem('username',event.target.values())
    }
    render() {return<label> username <input ref={input=>this.username=input} onChange={this.handleChange} /><br/></label>}}export default UserName;
Copy the code

1. If the mobile phone number, QQ number and other components have the same logic as the username component, the code will be repeated. 2. If the logic is to be changed, all components must be changed.

Higher-order components are needed to reuse the same logic:

A higher-order component is a function that encapsulates repeated logic. Pass in an old component and return a new component

High order component

import React,{Component} from 'react';
export default function(OldComponent,name,placeholder){
      class NewComponent extends Component{
        constructor(){
            super();
            this.state = {data:' '};
        }  
        componentWillMount(){
            this.setState({data:localStorage.getItem(name)||placeholder});
        }
        save=(event)=>{
            localStorage.setItem(name,event.target.values())
        }
        render() {return <OldComponent data={this.state.data} save={this.save}/>
        }
      }
      return NewComponent;
}
Copy the code

Modify username component

import React,{Component} from 'react';
import local from './local';
class UserName extends Component{
    render() {return<label> user name <input defaultValue={this.props. Data} onChange={this.props. Save}/><br/></label>}}export default local(UserName,'username'.'Username');
Copy the code

Mobile components

import React,{Component} from 'react';
import local from './local';
class Mobile extends Component{
    render() {return<label> Phone number <input defaultValue={this.props. Data} onChange={this.props. Save}/><br/></label>}}export default local(Mobile,'mobile'.'Mobile phone Number');
Copy the code

This enables encapsulation of component logic.

2. Increase demand and transform higher-order components again

If the higher-order component’s data is fetched from the background via fetch. How to modify.

Fetch Higher-order components

import React,{Component} from 'react';
export default function(OldComponent,name,placeholder){
      class NewComponent extends Component{
        constructor(){
            super();
            this.state = {data:' '};
        }  
        componentWillMount(){
            fetch('/user.json').then(response=>response.json()).then(user=>{
                this.setState({data:user[name]||placeholder});
            });
           
        }
        save=(event)=>{
            localStorage.setItem(name,event.target.values())
        }
        render() {return <OldComponent data={this.state.data}  />
        }
      }
      return NewComponent;
}
Copy the code

user.json

{
    "username": "xxxxxx"."mobile": "15711111111"
}
Copy the code

3. Values in higher-order components are obtained from both localhost and FETCH

If you want to get the value of username from locahost: xx. Then use XX to get data from the background.

Username -> xx -> zhang SAN

To simplify omitting the save method, localstorage already has username: xx. Take a look at the logic.

user.json

{
    "xx": "Zhang"."mobile": "15711111111"
}
Copy the code

The Username components

import React,{Component} from 'react';
import ajax from './ajax';
import local from './local';
class UserName extends Component{
    render() {return<label> user <input value={this.props. Data} /><br/></label>}} UserName = ajax(UserName,'username'.'Username');
UserName = local(UserName,'username'.'Username');
export default UserName;
Copy the code

Ajax high-level components

import React,{Component} from 'react';
export default function(OldComponent){
      class NewComponent extends Component{
        constructor(){
            super();
            this.state = {data:' '};
        }  
        componentWillMount(){
            fetch('/user.json').then(response=>response.json()).then(user=>{
                this.setState({data:user[this.props.data]});
            });
           
        }
        render() {return <OldComponent data={this.state.data}  />
        }
      }
      return NewComponent;
}
Copy the code

Local Advanced components

import React,{Component} from 'react';
export default function(OldComponent,name,placeholder){
      class NewComponent extends Component{
        constructor(){
            super();
            this.state = {data:' '};
        }  
        componentWillMount(){
            this.setState({data:localStorage.getItem(name)||placeholder});
        }
        render() {return <OldComponent data={this.state.data} />
        }
      }
      return NewComponent;
}
Copy the code

Why should ajax methods be on local methods? (Emphasis on)

UserName = ajax(UserName,'username'.'Username');
UserName = local(UserName,'username'.'Username');
Copy the code