状态与副作用

useState

用于改变组件内的状态,例

const StateDemo: FC = () => {
    const [count, setCount] = useState(1);
    const [isShow, toggleShow] = useState(true);

    return (
        

            {count}
             setCount(count + 1)}>增加
            
{isShow ?  I'm show now  : null}
             toggleShow(!isShow)}>{isShow ? '显示' : '隐藏'}
        
    );
};

export default StateDemo;

useEffect

在状态不同的生命周期执行副作用

简单用法

每次状态更新都执行所有没有依赖的useEffect,以下代码'toggle ghost'这一条在resize浏览器时也会触发

const EffectDemo: FC = () => {
    const [ghost, setGhost] = useState(false);
    const [width, setWidth] = useState(window.innerWidth);
    const toggleGhostBtn = () => setGhost(!ghost);
    const resizeHandle = () => setWidth(window.innerWidth);
    useEffect(() => {
        window.addEventListener('resize', resizeHandle);
    });
    useEffect(() => {
        console.log('toggle ghost');
    });
    return (
        

            {ghost ? 'ghost' : '普通'}按钮
            
                切换按钮样式
            
            
宽度为: {width}
        
    );
};

依赖更新

通过useEffect的第二个参数,可以指定其依赖的变量,只有此变量的状态更改时才会执行副作用函数,如果第二个参数为空,则只在第一次渲染和重新渲染时触发

const EffectDemo: FC = () => {
    ...
    useEffect(() => {
        // changeWidth
    }, [width]);
    useEffect(() => {
        console.log('toggle ghost');
    }, [ghost]);
   useEffect(() => {
        console.log('只在第一次或重新渲染组件时触发');
    }, []);
};

清理监听

在监听width的useEffect中,每次改变width的状态,都会添加一个resize事件,这会极大的耗费浏览器占用的内存,通过一个返回值的方式,即可在下一次width状态改变后与添加新的resize监听前,取消上次添加的resize监听事件

const EffectDemo: FC = () => {
    ...
    useEffect(() => {
        window.addEventListener('resize', resizeHandle);
        return () => {
            window.removeEventListener('resize', resizeHandle);
        };
    }, [width]);
};

异步执行

在useEffect中执行异步函数的语法如下,其实就是在原函数里调用一个async打头的立即函数

useEffect(() => {
    (async () => {})();
});

以下示例代码让按钮在变成ghost之后1s再变红色

const EffectDemo: FC = () => {
    const [red, setRed] = useState(false);
    useEffect(() => {
        (async () => {
            await new Promise((resolve, reject) => setTimeout(() => resolve(true), 1000));
            setRed(ghost);
        })();
    }, [ghost]);
    return (
        

            
                切换按钮样式
            
        
    );
};

useLayoutEffect

与useEffect几乎一样,但是具有防闪烁作用,比如下面的代码

const StateDemo: FC = () => {
    const [count, setCount] = useState(1);
    const [isShow, toggleShow] = useState(true);
    useLayoutEffect(() => {
        if (count === 0) setCount(Math.floor(Math.random() * 100));
    }, [count]);
    return (
        

            {count}
             setCount(0)}>随机数
...
        
    );
};

export default StateDemo;

如果使用useEffect在点击按钮时,它会在渲染屏幕后异步调用,而useLayoutEffect则会把所有逻辑先计算完毕最后一次性渲染,所以它会阻塞渲染,所以除非必须要用,一般情况下基本用useEffect

useContext

用于向后代组件透传一个值,以创建一个语言选择器为例

定义一个语言列表变量

const langs: LangType[] = [
    { name: 'en', label: 'english' },
    { name: 'zh-CN', label: '简体中文' },
];

创建一个context

const localContext = createContext({
    lang: langs[0],
    setLang: (lang: LangType) => {},
});

创建provider包装器

const LocalProvider: FC = ({ lang, setLang, children }) => {
    useEffect(() => {
        setLang(lang);
    }, [lang]);
    return (
        <>
            {children}
        
    );
};

创建Local组件

const Local: FC = ({ children }) => {
    const [lang, setLang] = useState(langs[0]);
    return (
        
            {children}
        
    );
};

把App.tsx中的所有节点包含于Local组件

const App: FC = () => {
    return (
        
        ...
        
    );
};
export default App;

语言选择组件

const Lang: FC = () => {
    const { lang, setLang } = useContext(localContext);
    const changeLang = (value: string) => {
        const current = langs.find((item) => item.name === value);
        current && setLang(current);
    };
    return (
        <>
            
                {langs.map(({ name, label }) => (
                    
                        {label || name}
                    
                ))}
            
        
    );
};

显示当前语言

const CurrentLang: FC = () => {
    const { lang } = useContext(localContext);
    return 
当前语言: {lang.label || lang.name}
;
};

在App.tsx中使用以上两个组件

const App: FC = () => {
    return (
        
                ...
                
                
        
    );
};
export default App;

useReducer

使用Context+useReducer可以实现轻量级的全局状态管理

以实现一个简单的应用配置功能为例(包含标题设置和暗黑模式切换)

编写类型

// 可选择的主题模式
export type ThemeMode = 'light' | 'dark';
// 初始化应用配置
export type ConfigType = {
    title?: string;
    theme?: ThemeMode;
};
// 合并默认配置后的最终应用配置状态
export type ConfigStateType = Required;
// 可用的reducer操作
export enum ConfigureActionType {
    SET_TITLE = 'change_title',
    CHANGE_THEME = 'change_theme',
}
// 传入给dispatch触发器的数据
export type ConfigureAction =
    | { type: ConfigureActionType.SET_TITLE; value: string }
    | { type: ConfigureActionType.CHANGE_THEME; value: ThemeMode };
// 透传给子组件的context
export interface ConfigureContextType {
    state: ConfigStateType;
    dispatch: Dispatch;
}

创建Context

// 透传配置状态与dispatch
export const ConfigureContext = createContext(null);

状态操作

为了确保数据的唯一性不被污染,使用immer.js操作数据

export const configReducer: Reducer = produce((draft, action) => {
    switch (action.type) {
        // 设置标题
        case ConfigureActionType.SET_TITLE:
            draft.title = action.value;
            break;
        // 设置主题
        case ConfigureActionType.CHANGE_THEME:
            draft.theme = action.value;
            break;
        default:
            break;
    }
});

包装器组件

• 合并默认配置和初始化配置
• 使用useEffect创建在标题或主题状态改变时引发的副作用钩子
• 把配置状态和dispatch传给ConfigureContext

const Configure: FC<{ config?: ConfigType }> = ({ config = {}, children }) => {
    const [state, dispatch] = useReducer(
        configReducer,
        config,
        (c) =>
            ({
                title: 'react app',
                theme: 'light',
                ...c,
            } as ConfigStateType),
    );
    useEffect(() => {
        const html = document.getElementsByTagName('html')[0];
        if (state.theme === 'dark') {
            html.classList.add('dark');
        } else {
            html.classList.remove('dark');
        }
    }, [state.theme]);
    useEffect(() => {
        document.title = state.title;
    }, [state.title]);
    return (
        
            {children}
        
    );
};

主题选择组件

const Theme = () => {
    const context = useContext(ConfigureContext);
    if (!context) return null;
    const { state, dispatch } = context;
    const toggleTheme = () =>
        dispatch({
            type: ConfigureActionType.CHANGE_THEME,
            value: state.theme === 'light' ? 'dark' : 'light',
        });
    return (
        

            切换主题
            
        
    );
};

标题设置组件

const Title: FC = () => {
    const context = useContext(ConfigureContext);
    if (!context) return null;
    const { state, dispatch } = context;
    const changeTitle = (e: React.ChangeEvent) =>
        dispatch({
            type: ConfigureActionType.SET_TITLE,
            value: e.target.value,
        });
    return (
        

            设置标题
            
        
    );
};

在App.tsx中使用

  ...