React 实践

减小 hook 的心智负担

• useEffect 的依赖不要过多： 可以通过多写几个 useEffect，或者拆分组件来减少逻辑复杂度

• 不需要作为依赖时，可以在 useEffect 里使用 ref 访问最新的 state 或 props

tips

• hook 的问题：当业务变动，逻辑变复杂，简单地增加 useEffect 的依赖，容易导致 bug。通过 ref 取最新值，减少 useEffect 的依赖。

• 函数组件实现尽量简单，不要有 CPU 密集型代码，或者通过 Memo，useMemo，lazy useState 优化

• 组件逻辑尽量小，通过组件组合的形式组装业务逻辑，不要将所有业务逻辑放到一个组件里

• 函数组件: 注意闭包陷阱（setTimeout 等访问 state）: 1. 通过 setState(pre => pre+1) 2. 通过 ref 访问 state

state 依赖 props 的情况

• 在 state 需要依赖 prop 时的几种模式如下，结论：只有模式 1 比较好

• 结论：组件的状态只由 prop 初始化，或者完全由 prop 控制。不能(既受 prop 控制，也可以在组件内部改变)。

1. props 作为初始化值，后续即使 props 改变，state 也不受其影响。【推荐】

const { defaultB } = props
const [b, setB] = useState(defaultB ? 0 : 1)
return <div>{b}</div>

1. 初始化，结合 useEffect 监控 props 来 setState。props 可以改变 state，setState 也可以改变 state，容易让使用者困惑。【不推荐】

const { a } = props
const [b, setB] = useState(a)
useEffect(() => setB(a), [a])

return <div onClick={() => setB(pre => pre + 1)}>add 1</div>

1. 赋值 state，特点：props 一直可以影响 state，但是 setState 已经失去意义。【不推荐】

const { a } = props
const [b, setB] = useState(0)
b = a ? 0 : 1 // 赋值给state
return <div onClick={() => setB(pre => pre + 1)}>add 1</div>