是否应始终将useEffect放入自定义Hook？React架构与关注点分离疑问

核心结论 #

不是必须将所有useEffect都放在自定义Hook中，在组件（比如你的myPage）里直接使用useEffect完全可行，不属于错误做法。

什么时候适合直接在组件里用useEffect #

像你示例里的更新导航标题逻辑，本身和myPage组件的UI渲染强相关，且没有复用需求时，直接写在组件里是最直观的选择，完全符合关注点分离——组件负责处理和自身UI相关的副作用。

useEffect(() => {
  const updateTitle = () => {
    navigation.setOptions({
      title,
    });
  };

  updateTitle();
}, [title]);

什么时候应该把useEffect放进自定义Hook #

满足以下场景时，抽成自定义Hook更符合关注点分离：

• 逻辑需要复用：如果多个组件都需要类似的副作用逻辑（比如多个页面都要根据状态更新导航标题），把这部分逻辑封装成自定义Hook（比如useNavigationTitle），可以避免重复代码。
• 组件逻辑过于复杂：当组件里的副作用逻辑冗长，或者和UI渲染无关的逻辑太多时，抽成自定义Hook能让组件代码更简洁，聚焦在UI渲染和用户交互的核心职责上。

比如复用场景下的自定义Hook示例：

// custom hooks/useNavigationTitle.js
import { useEffect } from 'react';

export const useNavigationTitle = (navigation, title) => {
  useEffect(() => {
    navigation.setOptions({ title });
  }, [navigation, title]);
};

在myPage中调用：

import { useNavigationTitle } from '../custom hooks/useNavigationTitle';

const MyPage = ({ navigation }) => {
  const title = "我的页面";
  useNavigationTitle(navigation, title);

  return (
    {/* 页面UI内容 */}
  );
};

遵循关注点分离构建React应用的实践建议 #

• 组件聚焦UI：让组件只负责渲染UI、处理用户交互，尽量避免在组件里写复杂的业务逻辑或副作用。
• 自定义Hook封装复用逻辑：把可复用的状态逻辑、副作用逻辑（比如数据请求、订阅、状态计算）封装到自定义Hook中，实现逻辑与UI的分离。
• 业务逻辑独立存放：更复杂的业务规则（比如数据处理、接口调用）可以放在单独的工具函数或状态管理库中，让组件只负责调用这些逻辑，不关心内部实现。

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