react学习：HOC高阶组件

问题导向

高阶组件是什么？有什么用？

如果你都有了答案，可以忽略本文章，或去react学习地图寻找更多答案

高阶组件

本质：是高阶函数，接收一个组件作为参数，返回一个被强化/或具有公共逻辑的组件.
作用：组件拓展与强化，公共逻辑抽离

基本使用

例子说明：

Show组件本身没有name属性，Hoc也没有传递，而是经过withName这个高阶组件强化后，它具备了name属性

第一步：声明高阶组件：让接收到的组件获取name属性
const withName = Comp => {
     
    const name = "高阶组件"

	props是接收组件的props
    return props => <Comp {
     ...props} name={
     name} />
}

第二步：.调用高阶组件，把Show组件放到高阶组件中强化一下，并且赋值
const NewComponent = withName(Show)
​
function Show(props) {
     
     age从组件传递过来，name从高阶组件获取
     return <div>{
     props.age}--{
     props.name}</div>
}

export default class Hoc extends Component {
     
     render() {
     
       return (
             <div>
               <NewComponent age={
     18} />
             </div>
       )
    }
}​

用法二：公共逻辑抽离

const HOCFactory = (Component) => {
     
    class HOC extends React.Component {
     
    
        //此处定义多个组件的公共逻辑
        
        render(){
     
            retrun <Component {
     ...this.props} />
        }
    }
    return HOC
}

装饰器写法

const withLog = Component =>{
     
   class NewComponent extends React.Component{
     
   	    componentDidMount(){
     
           console.log(Component.name ,'didMount', this.props)
        }
        
        render(){
     
           return <Component {
     ...this.props} />;
        } 
   }
   return NewComponent
}


const withName = Component => {
     
   const NewComponent = (props) => {
     
   		return <Component {
     ...props} name="高阶组件" />;
   };
   return NewComponent;
};
​


装饰器的高阶组件链式调用：连续赋能​，先执行withLog高阶组件，得到结果后再传递给withName高阶组件，withName的返回结果就是最终渲染结果
@withLog
@withName
class App extends Component {
     
   render() {
     
       return (
           <div>
              {
     this.props.age}-{
     this.props.name}
           </div>
      );
    }
}    

学习更多

react学习地图