高阶组件（HOC）

高阶函数（HOF）函数里面返回函数
高阶组件（HOC）函数里面返回组件

实例一

子组件1和2 有着不同的dom和延迟修改数据的时间, 通过参数(HOCfunc(1000,Child1))传递给高阶组件,以实现复用效果

import React,{Component} from 'react'
//子组件1
function Child1 (props){
  return (
    <p>Child1-{props.n}</p>
  )
}
//子组件2
function Child2 (props){
  return (
    <p>Child2-{props.n}</p>
  )
}
//高阶组件
const HOCfunc = (timeout,Comp)=>{
  return class extends Component{
    state = {num:1}
    componentDidMount(){
       //延时修改数据
       setTimeout(() => {
        this.setState({
          num:20
        })
      }, timeout);
    }
    render(){
      return (
        <Comp n={this.state.num}></Comp>
      )
    }
  }
}
const HocChild1 = HOCfunc(1000,Child1)
const HocChild2 = HOCfunc(2000,Child2)
function App(){
  return (
    <div>
      <HocChild1></HocChild1>
      <HocChild2></HocChild2>
    </div>
  )
}
export default App;

实例二 withRouter

v6没有withRouter , 实现方法如下:

1. hooks函数组件可以用const navigate = useNavigate()
2. 类组件自定义withRouter

   自定义withRouter

import React from 'react'
import {
    useNavigate,
    useParams,
    useLocation
}from 'react-router-dom'
export default function withRouter(Component) {
    return function(props){
        const push =  useNavigate()
        const match =  useParams()
        const location =  useLocation()
        //props 将组件原有的props返回 同时增加history
        return <Component  {...props} history={{push,match,location}}/>
    }
}

使用

import React, { Component } from 'react'
import withRouter from '../../components/withRouter'

class FilmItem extends Component {
    render() {
        return (
            <li onClick={()=>this.handleClick(this.props.filmId)}>
                {this.props.name}
            </li>
        )
    }

    handleClick(id){
        // console.log(this.props.history)
        this.props.history.push(`/detail/${id}`)

        // this.props.history.push 跳转页面
        // this.props.history.match 获取参数
        // this.props.history.location 获取当前路由
    }
}

export default withRouter(FilmItem)//****