React 最佳实践

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

状态管理最佳实践

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

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

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

举例:

tsx 复制代码
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变更会导致请求触发多次,那么可以这么解决: ...

相关推荐
天蓝色的鱼鱼23 分钟前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
XiaoSong4 小时前
从未有过如此丝滑的React Native开发体验:EAS开发构建完全指南
前端·react.js
用户7678797737326 小时前
后端转全栈之Next.js数据获取与缓存
react.js·next.js
小仙女喂得猪8 小时前
2025 Android原生开发者角度的React/ReactNative 笔记整理
react native·react.js
艾小码9 小时前
为什么你的页面会闪烁?useLayoutEffect和useEffect的区别藏在这里!
前端·javascript·react.js
骑自行车的码农9 小时前
【React用到的一些算法】游标和栈
算法·react.js
小高0079 小时前
🔍说说对React的理解?有哪些特性?
前端·javascript·react.js
江城开朗的豌豆11 小时前
从生命周期到useEffect:我的React函数组件进化之旅
前端·javascript·react.js
江城开朗的豌豆11 小时前
React组件传值:轻松掌握React组件通信秘籍
前端·javascript·react.js
遂心_1 天前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js