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>
)
# React