使用React Hooks开发注册UI时能否在useEffect内创建或修改组件？

问题结论 #

不要在useEffect内部创建或者修改组件，你的实现思路确实存在偏差。

原因说明 #

React是声明式UI框架，核心逻辑是UI = f(状态)，所有组件的展示、隐藏都应该和状态直接绑定，状态变更后React会自动完成UI的更新，不需要你手动去创建、修改组件。

正确实现方案 #

你已经声明了signinStatus状态，直接在JSX中做条件渲染即可，完全不需要用useEffect监听状态来操作组件，示例代码如下：

// 注意状态修改函数建议遵循小驼峰命名规范
const [signinStatus, setSigninStatus] = useState(false);

// 如果注册成功后需要做跳转、上报日志等副作用操作，可以保留useEffect处理这些逻辑
useEffect( () => { 
  if (signinStatus) {
    // 比如跳转个人中心、上报注册成功事件等
    console.log("注册成功");
  }
}, [signinStatus]);

return (
  <div className="register-container">
    {/* 原有注册表单代码 */}
    <RegisterForm />

    {/* 直接通过状态控制提示组件的展示 */}
    {signinStatus && <div className="success-notice">恭喜你注册成功！</div>}
  </div>
)

额外说明 #

useEffect的定位是处理 React 渲染之外的副作用（比如网络请求、手动操作DOM、订阅事件等），如果把组件修改逻辑放在useEffect里，相当于脱离了React的状态管控，很容易出现UI和状态不一致的问题，也会大幅提升后续的维护成本。

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