React Hooks 在 SSR 模式下有哪些常见问题

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

这篇文章主要介绍“React Hooks 在 SSR 模式下有哪些常见问题”，在日常操作中，相信很多人在React Hooks 在 SSR 模式下有哪些常见问题问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”React Hooks 在 SSR 模式下有哪些常见问题”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

问题一：DOM/BOM 缺失

SSR 是在 node 环境下运行 React 代码，而此时 window、document、navigator 等全局属性没有。如果直接使用了这些属性，就会报错 window is not defined, document is not defined, navigator is not defined 等。

常见的错误用法是在 Hooks 执行过程中，直接使用了 document 等全局属性。

import React, { useState } from 'react';  export default () => {   const [state, setState] = useState(document.visibilityState);   return state; }

解决方案

1.将访问 DOM/BOM 的方法放在 useEffect/useLayoutEffect 中(服务端不会执行)，避免服务端执行时报错，例如：

import React, { useState, useEffect } from 'react';  export default () => {   const [state, setState] = useState();      useEffect(()=>{     setState(document.visibilityState);   }, []);      return state; }

2.通过 isBrowser[2] 来做环境判断

import React, { useState } from 'react';  function isBrowser() {   return !!(typeof window !== 'undefined' && window.document && window.document.createElement); }  export default () => {   const [state, setState] = useState(isBrowser() && document.visibilityState);      return state; }

问题二 useLayoutEffect Warning

如果使用了 useLayoutEffect，在 SSR 模式下，会出现以下警告

⚠️ Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://fb.me/react-uselayouteffect-SSR for common fixes.

解决方案

鸿蒙官方战略合作共建——HarmonyOS技术社区
使用 useEffect 代替 useLayoutEffect(废话)
根据环境动态的指定是使用 useEffect 还是 useLayoutEffect。这是来自社区的一种 hack 解决方案，目前在 react-redux[3]、react-use[4]、react-beautiful-dnd[5] 均使用的这种方案。

import { useLayoutEffect, useEffect } from 'react'; const useIsomorphicLayoutEffect = isBrowser() ? useLayoutEffect : useEffect; export default useIsomorphicLayoutEffect;

总结：写 Hooks 时需要注意

1.不要在非 useEffect/useLayoutEffect 中，直接使用 DOM/BOM 属性

2.在非 useEffect/useLayoutEffect 使用 DOM/BOM 属性时，使用 isBrowser 判断是否在浏览器环境执行

3.如果某个 Hooks 需要接收 DOM/BOM 属性，需要支持函数形式传参。以 ahooks 的 useEventListener 举例，必须支持函数形式来指定 target 属性。

import React, { useState } from 'react'; import { useEventListener } from 'ahooks';  export default () => {   const [value, setValue] = useState(0);    const clickHandler = () => {     setValue(value + 1);   };    useEventListener(     'click',      clickHandler,      {  -       target: document.getElemenetById('click-btn')  +       target: () => document.getElemenetById('click-btn')      }   );    return (     <button id="click-btn" type="button">       You click {value} times     </button>   ); };

4.使用 useIsomorphicLayoutEffect 来代替 useLayoutEffect

参考资料