React Hooks：useState / useEffect / useContext

概述

此篇博文仅以使用角度出发记录，并没有对其深究，因此并不保证概念性正确。

React Hooks 是在redux应用之后出现的一个特性，简单来看似乎两者用途是一样的，但它仅可以用于无状态函数组件之中。其主要目的在于在无状态的情况下使用react的一些特性，如生命周期。

useState

主要通过一个初始值获得对应的状态值，及可修改状态的方法。

import react, { Fragment, useState } from 'react'

const [count, setCount] = useState(0);

return (
    <Fragment>
        {/* 此处可以直接使用，而不用使用this指向。 */}
        <button onClick={() => setCount(count + 1)}>完成 </button>
        - <span>已完成 {count} 次 </span>
    </Fragment>
)

useEffect

总的来说，useEffect相当于监听某个状态，亦或在某个生命周期中运行。

/*
    如果第二个参数为 [状态值]，则为监听此值。如果为 [] 空数组，则等价于 componentDidMount。
    但如果第二个参数不填，则每次挂载完成后便会执行，等价于 componentDidUpdate。
*/

useEffect(() => {
    console.log(`count值变为${count}`);
}, [count]);

useContext

主要用于向组件内的所有组件进行共享状态，那么多个组件均可统一的从其父级组件的context之中去获取状态值，亦可修改。

那么，首先我们就需要去创建一个共享状态对象。一般是需要两个对象，其一为对应的共享状态，其二为共享状态的修改方法(犹如useState钩子获取到的setState)。

// 共享状态的默认数据
const defaultValue = fromJS({
    todoOverCount: 0,
});

// app组件的共享状态对象
export const appContext = React.createContext(defaultValue);

// app组件的共享状态对象的状态修改对象
export const appSetStateContext = React.createContext(undefined);

其后首先配合useState巧妙地获取默认数据的当前状态与修改方法，并使用此两者下的Provider组件包裹想要共享数据的组件。其后该组件以及该组件以下的所有组件都可以获取共享的数据，以及可对其修改。

const Content = () => {
    const [state, setState] = useState(defaultValue);
    return (
        // 共享状态数据
        <appContext.Provider value={state}>
            // 共享数据修改方法
            <appSetStateContext.Provider value={setState}>
                <App />
            </appSetStateContext.Provider>
        </appContext.Provider>

    )
};

其后在子组件之中仅需使用useContent就可以拿到对应的上下文即可直接获得以及修改了。

import react, { useContext } from 'react'
import { appContext, appSetStateContext } from './index'

// 获得上下文对象
const state = useContext(appContext);
const setState = useContext(appSetStateContext);

return (
    <Fragment>
        <span>{`全局值：${state.get('todoOverCount')}`}</span>
        <button onClick={() => setState(state.set('todoOverCount', state.get('todoOverCount') + 1))}>完成 </button>
    </Fragment>
)