05.useIsomorphicEffect

文章预览

在 React 应用开发中，特别是涉及到 服务器端渲染（SSR） 时，正确处理副作用是一个常见挑战。 useIsomorphicEffect 钩子提供了一种智能的方式来在服务器端和客户端环境中使用适当的副作用钩子。这个自定义钩子可以帮助开发者避免与 SSR 相关的常见陷阱，提高应用的性能和可靠性。以下是如何实现和使用这个自定义钩子： const  useIsomorphicEffect =    typeof   window  !==  'undefined'  ? React.useLayoutEffect : React.useEffect; const  MyApp =  ()  =>  {   useIsomorphicEffect( ()  =>  {      window .console.log( 'Hello' );   }, []);    return   null ; }; ReactDOM.createRoot( document .getElementById( 'root' )).render(    < MyApp  /> ); 这个技巧的关键点包括： 使用 typeof window !== 'undefined' 来检测是否在客户端环境。 在客户端环境中使用 useLayoutEffect ，它会在所有 DOM 变更之后同步调用。 在服务器 ………………………………