【React】基于自定义Hook提取公共逻辑

自定义Hook

作用：提取封装一些公共的处理逻辑
玩法：创建一个函数，名字需要是 useXxx ，后期就可以在组件中调用这个方法！

自定义Hook 1

页面加载的时候修改浏览器标签的名字。

const useDidMount = function useDidMount(title) {
    if (!title) title = 'React';
    // 基于React内置的Hook函数，实现需求即可
    useEffect(() => {
        document.title = title;
    }, []);
};

自定义Hook 2

由于useState 返回的 set修改状态方法只能“修改单一的数据”，可能会对其他数据造成影响，所以我们这里自定义一个Hook，在修改单一数据的同时，不对其他数据造成影响。

useA 是一个自定义 Hook，它的功能是管理一个对象类型的状态，并提供一个更新该状态的函数 setA。参数：

• val：这是 useA 接受的初始值，通常是一个对象，代表状态的初始值。

• useState(val)：它初始化状态 a，并返回一个数组，数组的第一个元素是当前的状态，第二个元素是更新该状态的函数（seta）。

• setA(partialState)：这个函数用来更新状态。它 接收一个部分状态（partialState），然后将其与当前状态合并 。这里使用了 ES6 的 … 扩展运算符，将当前状态 a 和部分更新的状态合并起来，确保只更新其中的某些字段，而不影响其他字段。

• 返回值：返回一个数组：第一个元素是当前的状态 a，第二个元素是更新该状态的函数 setA。

const useA = function (val) {
    const [a, seta] = useState(val);
    const setA = function setA(partialState) {
        seta({
            ...a,
            ...partialState
        })
    }
    return [a, setA]
}

使用

const Demo = function Demo() {
    let [state, setA] = useA({
        supNum: 10,
        oppNum: 5
    });

    const handle = (type) => {
        if (type === 'sup') {
            setA({
                supNum: state.supNum + 1
            });
            return;
        }
        setA({
            oppNum: state.oppNum + 1
        });
    };
    useDidMount('哈哈哈哈哈');
    return <div className="vote-box">
        <div className="main">
            <p>支持人数：{state.supNum}人</p>
            <p>反对人数：{state.oppNum}人</p>
        </div>
        <div className="footer">
            <Button type="primary" onClick={handle.bind(null, 'sup')}>支持</Button>
            <Button type="primary" danger onClick={handle.bind(null, 'opp')}>反对</Button>
        </div>
    </div>;
};

注意事项

下面写法就会报错，因为命名使用use开头，React会进行检验Hook函数的规则。

const Demo = function Demo() {
 if(1==1){
    useDidMount('哈哈哈哈哈');
 }
}

如果不使用use开头，就不会报错，但是我们一般封装自定义Hook，要遵守Hook函数的规则

const Demo = function Demo() {

    AAA ('哈哈哈哈哈');

}