ReactHooks在SSR模式下有哪些常見問題

這篇文章主要介紹“React Hooks 在 SSR 模式下有哪些常見問題”，在日常操作中，相信很多人在React Hooks 在 SSR 模式下有哪些常見問題問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對(duì)大家解答”React Hooks 在 SSR 模式下有哪些常見問題”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供新寧網(wǎng)站建設(shè)、新寧做網(wǎng)站、新寧網(wǎng)站設(shè)計(jì)、新寧網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、新寧企業(yè)網(wǎng)站模板建站服務(wù)，10年新寧做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

問題一：DOM/BOM 缺失

SSR 是在 node 環(huán)境下運(yùn)行 React 代碼，而此時(shí) window、document、navigator 等全局屬性沒有。如果直接使用了這些屬性，就會(huì)報(bào)錯(cuò) window is not defined, document is not defined, navigator is not defined 等。

常見的錯(cuò)誤用法是在 Hooks 執(zhí)行過程中，直接使用了 document 等全局屬性。

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

解決方案

1.將訪問 DOM/BOM 的方法放在 useEffect/useLayoutEffect 中(服務(wù)端不會(huì)執(zhí)行)，避免服務(wù)端執(zhí)行時(shí)報(bào)錯(cuò)，例如：

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

2.通過 isBrowser[2]來做環(huán)境判斷

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 模式下，會(huì)出現(xiàn)以下警告

?? 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.

解決方案

鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)
使用 useEffect 代替 useLayoutEffect(廢話)
根據(jù)環(huán)境動(dòng)態(tài)的指定是使用 useEffect 還是 useLayoutEffect。這是來自社區(qū)的一種 hack 解決方案，目前在 react-redux[3]、react-use[4]、react-beautiful-dnd[5]均使用的這種方案。

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

總結(jié)：寫 Hooks 時(shí)需要注意

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

2.在非 useEffect/useLayoutEffect 使用 DOM/BOM 屬性時(shí)，使用 isBrowser 判斷是否在瀏覽器環(huán)境執(zhí)行

3.如果某個(gè) Hooks 需要接收 DOM/BOM 屬性，需要支持函數(shù)形式傳參。以 ahooks 的 useEventListener 舉例，必須支持函數(shù)形式來指定 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

參考資料

fix: useDocumentVisiblility support SSR[6]
UmiJS 服務(wù)端渲染[7]
useLayoutEffect and SSR[8]

參考資料

[1]服務(wù)端渲染(SSR):

https://umijs.org/zh-CN/docs/SSR#服務(wù)端渲染(SSR)

[2]isBrowser:

https://github.com/alibaba/hooks/blob/master/packages/hooks/src/utils/canUseDom.ts

[3]react-redux:

https://github.com/reduxjs/react-redux/blob/d16262582b2eeb62c05313fca3eb59dc0b395955/src/components/connectAdvanced.js#L40

[4]react-use:

https://github.com/streamich/react-use/blob/master/src/useIsomorphicLayoutEffect.ts

[5]react-beautiful-dnd:

https://github.com/atlassian/react-beautiful-dnd/blob/master/src/view/use-isomorphic-layout-effect.js

[6]fix: useDocumentVisiblility support SSR:

https://github.com/alibaba/hooks/pull/935/files

[7]UmiJS 服務(wù)端渲染:

https://umijs.org/zh-CN/docs/SSR#window-is-not-defined-document-is-not-defined-navigator-is-not-defined

[8]useLayoutEffect and SSR:

https://medium.com/@alexandereardon/uselayouteffect-and-SSR-192986cdcf7a

到此，關(guān)于“React Hooks 在 SSR 模式下有哪些常見問題”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

分享名稱：ReactHooks在SSR模式下有哪些常見問題
當(dāng)前地址：http://muchs.cn/article18/jiodgp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、品牌網(wǎng)站制作、網(wǎng)站制作、網(wǎng)站營銷、服務(wù)器托管

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容