React Hoc

React Hoc

(HOC）是React中的高阶组件，用来重用组件逻辑，高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。 有点类似给原组件打补丁升级强化。

使用：

// 定义改变bool的hoc应用
function TestHoc(WrappedComponent) {
    const useA = (props) => {
        const [state, setState] = useState(false);
        const newProps = {
            state,
            setState,
            ...props
        }
        return  <WrappedComponent {...newProps}/>
    }
    return useA;
}
// TestHoc函数接收一个组件作为参数，并返回一个新组件，
//新组建可以接收一个props，在props上新增，state和setState

// 组件使用 -- 定义需要升级的组件Test
const Test = ({state, setState}) => {
    return (
        <>
            <p>{ state===false?'false': 'true' }</p>
            <button onClick={()=>setState(false)}>点我false</button>
            <button onClick={()=>setState(true)}>点我true</button>
        </>
    );
};

// 调用
{ TestHoc(Test2)() }

嵌套使用

// 定义获取input值的hoc应用
function TestHocInput(Component) {
    const useB = () => {
        const [val, setValue] = useState();
        function testInput(e) {
            setValue(e.target.value);
        }
        const newState ={
            val,
            testInput
        }
        return <Component {...newState} />
    }
    return useB;
}

// Test 组件
const Test = ({state, setState, testInput, val}) => {
    return (
        <>
            <p>{ state===false?'false': 'true' }</p>
            <button onClick={()=>setState(false)}>点我false</button>
            <button onClick={()=>setState(true)}>点我true</button>
            { val }
            <input type="text" onInput={testInput} value={val}/>
        </>
    );
};

// 嵌套调用
{ TestHocInput(TestHoc(Test))() }

//可以多个调用
{ TestHocInput(TestHoc(Test))() }
{ TestHocInput(Test)() }