React 高阶组件 和 受控组件

一、非受控组件

       受控组件是指组件的状态由自定义状态控制，可以通过修改状态来影响组件。

       非受控组件是指一些原生组件，如input,checkbox，由dom元素自己的属性控制。

1.1 受控组件demo

const Input = (value,handleChange)=>{
    return (
        <input value={value} onChange={handleChange} />
    )
}

二、高阶组件

        高阶组件是装饰设计模式，给传入的组件添加某种功能。

2.1 高阶组件demo

const Input = (value, handleChange) => {
    return (
        
    )
}
 
function WrappingLoading(Component, loadFunc) {
    const [loading, setLoading] = useState(true)
    useEffect(() => {
        loadFunc()
        setLoading(false)
    }, []);
    return loading ? 
loading
 : 
}
 
export const LoadingInput = (value,handleChange, loadFunc) => {
    const input = useMemo(()=> ,[])
    return WrappingLoading(input, loadFunc)
}