在React组件中使用多个useEffect是否有副作用？是否为最佳实践？

结论 #

你这种拆分多个useEffect的写法是React官方推荐的最佳实践，不会产生额外副作用。

• 符合关注点分离的设计原则
  React官方设计useEffect的初衷就是鼓励开发者按逻辑用途拆分副作用，而非把所有不相关逻辑强行塞到同一个useEffect中。你当前的三个useEffect分别对应「组件挂载/卸载阶段的键盘事件绑定解绑」、state_one变化触发的专属逻辑、state_two变化触发的专属逻辑，三者逻辑完全独立、依赖项也没有重合，拆分后可读性、可维护性更高，修改任意一段逻辑都不会影响其他不相关的逻辑。

• 没有额外性能开销
  多个独立useEffect的执行效率和合并为一个useEffect没有差异：React会按声明顺序依次执行所有effect，你当前的写法和强行合并的写法最终触发的副作用执行次数完全一致，不会产生多余的运行损耗。反而如果强行合并，你还需要手动判断具体是哪个依赖发生了变更再执行对应逻辑，更容易引入判断逻辑错误，还会增加不必要的判断开销。

额外注意事项 #

你当前第一个空依赖的useEffect里用到的keyPressHandle如果是组件内部定义的函数，建议用useCallback包裹后再放到依赖数组里（或者如果确定逻辑不会用到外部状态可以保持空依赖），避免出现闭包陷阱，这个优化点和你拆分多useEffect的写法无关。

内容的提问来源于stack exchange，提问作者curlybom