React 最佳实践

使用React写业务也有挺长一段时间了，总结下我认为的最佳实践。

状态管理最佳实践

主流的状态管理多多少少都用过，多少都有学习成本。 真的有必要花大把时间去学其他的状态管理吗？真的实用吗？如果不是为了应付面试，我是不会花时间去了解那些状态管理的。

后面发现 useContext hook 完全够用，而且对逻辑的划分非常有帮助，真正做到了逻辑的复用。 如果你习惯用自定义 hook 去抽离逻辑，那么结合 useContext 会是个很棒的体验。

这是对 useContext 很棒的封装： github.com/jamiebuilds…

举例：

import React, { useState } from 'react';
import { createContainer } from "unstated-next"
import { render } from "react-dom"

// 定义 A 相关的状态和逻辑
const useA = () => {
    const [a, setA] = useState(0)
    const handleChangeA = () => {
        setA(a + 1)
    }
    return {
        a,
        handleChangeA
    }
}
const AContainer = createContainer(useA)

// 定义 subType 相关的状态和逻辑
const subTypeMap = {
    0: 'all',
    1: 'active',
    2: 'completed'
}
const useSubTypeSelect = () => {
    const [subType, setSubType] = useState(0);
    const subTypeOptions = Object.entries(subTypeMap).map(([key, value]) => ({ value: key, label: value }))
    // ReactNode
    const subTypeNode = <div>
        <h5>subType: {subTypeMap[subType]} </h5>
        <ul>
            {subTypeOptions.map((item) => (
                <li
                    key={item.value}
                    onClick={() => setSubType(item.value)}
                >
                    {item.label}
                </li>
            ))}
        </ul>
    </div>
    // ... others
    return {
        subType,
        subTypeNode
    }
}
const SubTypeSelectContainer = createContainer(useSubTypeSelect)

// UI
const Main = () => {
    // 使用 A 模块相关状态和逻辑
    const { a, handleChangeA } = AContainer.useContainer()
    // 使用 subType 模块相关状态和逻辑
    const { subType, subTypeNode } = SubTypeSelectContainer.useContainer()
    return <div>
        {/* A */}
        <button onClick={handleChangeA}>A: {a}</button>
        {/* subTypeSelect */}
        {subTypeNode}
        {/* ... */}
    </div>
}


const App = () => {
    return (
        <AContainer.Provider>
            <SubTypeSelectContainer.Provider>
                <Main />
            </SubTypeSelectContainer.Provider>
        </AContainer.Provider>
    )
}

render(<App />, document.getElementById("root"))

效果：

state 与 queryString 联动

有些时候，你希望你的state在变更时同时变更URL里的queryString，那么可以这么做 ...

state 之间的联动

有些时候，改变某个state，其他state会受到影响 比如列表页，当我们变更筛选项或者排序时，需要初始化page，让page变为1， ...

请求的防抖

请求受到多个state影响，当多个state变更会导致请求触发多次，那么可以这么解决： ...