缺点
一、响应式的 useEffect
写函数组件时,你不得不改变一些写法习惯。你必须清楚代码中 useEffect 和 useCallback 等 api 的第二个参数“依赖项数组”的改变时机,并且掌握上下文的 useEffect 的触发时机。当逻辑较复杂的时候,useEffect 触发的次数,可能比你预想的多。对比 componentDidMount 和 componeneDidUpdate,useEffect 带来的心智负担更大。
二、状态不同步
怎么避免 react hooks 的常见问题
- 不要在 useEffect 里面写太多的依赖项,划分这些依赖项成单一功能的 useEffect。其实这点是遵循了软件设计的“单一职责模式”。
- 如果碰到状态不同步的问题,可以考虑手动传递参数到函数。如:
// showCount 的 count 来自父级作用域 const [count, setCount] = useState(xxx); function showCount(){console.log(count)}; // showCount 的 count 来自参数 const [count, setCount] = useState(xxx); function showCount(c){console.log(c)};
但这只能解决一部分问题,很多时候你不得不使用上述的 useRef 方案;
3. 重视 eslint-plugin-react-hooks 插件的警告;
4. 复杂业务的时候,使用 Component 代替 hooks;