React高阶组件

130 阅读1分钟

高阶函数(HOF):

将函数当作参数传入另一个函数中,处理完返回一个新的函数

 function fn() {
        console.log(1)
    }
function HOF(fn) {
        fn();
        return function () {
            console.log(2);
        }
    }
    var newFn=HOF(fn);
    newFn();

高阶组件(HOC):

高阶组件也是一个函数,接收一个组件,加工,返回一个新的组件

    class Com extends React.Component{
        render(){
            return (
                <div>
                    aaaa 
               </div> 
           )
        }
    }
    function HOC(Com){
        return class NewCom extends React.Component{
            render(){
                return (
                    <div> 
                       <h1>我是加功后的组件</h1>
                        <Com/>
                    </div>
                )
            }
        }
    }
    let NewCom=HOC(Com);
    ReactDOM.render(<NewCom/>,document.getElementById('app'));