toC前端组长code-review（二）分享-一一网

前言

上一篇： code-review(一)

很多小伙伴喜欢看code-review, 但其实无非就是那些问题，只要日常工作中做好：

做完一个功能，测试各种case是否符合预期
代码优化包括（命名、简化代码、设计规范、性能问题）

store的单个状态监听

有时会有业务需求，要对某个状态的变化而更新组件或者视图

这里有两个问题

没有在单例卸载时移除store监听
只要有store更新，就会触发回调，而这里显然只当trayId变化时，才需要触发回调

解法：


class Tray {
    private unsubscribe?: () => void
    
    async init() {
        let trayId = store.app.trayId
        this.handleTrayChange(trayId) // 初始 执行一次
        this.unsubscribe = store.subscribe(() => {
            const newState = store.app.trayId
            if (newState!== trayId) {
              trayId = newState
              this.handleTrayChange(trayId) // trayId更新才执行
            }
        })
    }
    
    destory() {
        this.unsubscribe?.()
    }
}
复制代码

其一、监听store时，将取消监听函数保存下来，在实例销毁时调用
其二、store变化时，判断trayId前后有没有变化，变了才触发任务

接口节流条件限制

toC项目由于接口并发量非常大，因此对前端要求也更严格

这里的问题是：

每次组件加载都会获取一次用户信息，用户来回切换页面，会导致接口被浪费
而当用户切换账户时，应该马上获取一次切换账号后的用户信息

正确解法：


let userData = {} // 将之前接口的值保存下来
let lastFetchTime = 0
let now = 0

// 监听到切换账号事件，则重置上一次获取数据的时间
onEventChange(EVENT_CHANGE_ACCOUNT, () => {
    lastFetchTime = 0
})

export default function() {
    const [data, setData] = useState(userData) // 默认取上次接口的值

    const fetchData = useCallback(async () => {
        try {
            const res = await api.getUserData()
            if (res.code !== 200) {
                throw new Error(res.data.message)
            }
            setData(res)
            userData = {...res} // 将最新的api数据保存到全局变量里
        } catch (e) {
            setData({})
        }
        lastFetchTime = Date.now() // 更新获取数据的时间
    }, [])
    
    
    useEffect(() => {
        now = Date.now()
        // 上一次获取数据的时间不等于0， 并且 当前时间 - 上一次时间 小于10s， 才不请求接口
        if (lastFetchTime !== 0 && (now-lastFetchTime)/1000 <= 10) return
        fetchData()
    }, [])

    return data
}

复制代码