当前位置: 首页 > 文档资料 > Rax 中文文档 >

编码指南

优质
小牛编辑
136浏览
2023-12-01

相比开发普通的 Web 应用,在开发 SSR 应用时,端上环境和渲染机制的差异,会对编码带来一些约束:

状态管理

Server 端的渲染过程是一个同步的操作,其本质是将 JSX 组件渲染为 HTML 字符串。

setStatehooks 这类对组件异步更新状态的方法,以及组件的 生命周期 方法,在 Server 端不会被执行。

开发过程中,应尽量避免将用于渲染初始页面的状态,通过异步的方式来更新。

useState 为例, 初始状态值 0 , 在 Server 端渲染时,会被正常获取,而异步方法 setCount 则不会被执行。

1function Counter() {
2  let [count, setCount] = useState(0);
3  
4  if (count < 3) {
5    setCount(count + 1);
6  }
7  
8  return <span>Count: {count}</span>;
9}

环境判断

在 Node 环境下, windowlocation 等浏览器环境提供的全局变量是无法正常使用的。如果希望在不同端下,差异性地执行部分逻辑,可以通过为这类代码增加环境的判断方式来实现。

`universal-env` 提供了判断和获取运行时环境的能力。

1npm install universal-env --save

使用示例:

 1import { isWeb, isNode } from 'universal-env';
 2
 3function Page() {
 4
 5    if (isWeb) {
 6    // do something
 7  }
 8  
 9  return <div>hello rax</div>
10}