渲染策略 ​

使用方式 ​

md
<script setup>
  import VueComp1 from './rendering-strategy-comps/vue/VueComp1.vue';
  const page = {
    title: '渲染策略',
  };
  const vueUniqueId = 'vue-unique-id';
</script>

<script lang="react">
  import ReactComp1 from './rendering-strategy-comps/react/ReactComp1';
  import { ReactComp2 } from './rendering-strategy-comps/react/ReactComp2';
  import ReactComp3 from './rendering-strategy-comps/react/ReactComp3';
  import { ReactComp4 } from './rendering-strategy-comps/react/ReactComp4';
  import { ReactComp5 } from './rendering-strategy-comps/react/ReactComp5';
  import ReactVueSharedComp from './rendering-strategy-comps/react/ReactVueSharedComp';
</script>

策略设计 ​

Client:Only ​

组件仅执行客户端渲染，不进行服务端渲染，适用于强依赖于宿主环境的客户端组件。

md
<ReactComp1 client:only render-strategy="client:only" component-name="ReactComp1" :page-title="page.title" :render-count="1" />
tsx
import type { CompProps } from '../type';

export default function ReactComp1(props: CompProps) {
  return (
    <div className="react-comp1-demo">
      <strong>
        {props['render-count']}: 渲染策略: {props['render-strategy']}
      </strong>
      <ol>
        <li>
          <strong>组件名称:</strong> <span>{props['component-name']}</span>
        </li>
        <li>
          <strong>页面标题:</strong> <span>{props['page-title']}</span>
        </li>
      </ol>
    </div>
  );
}

预处理为：

html
<div
  __vrite__react_render_id__="/Users/Project/vrite/zh/material/strategy/rendering-strategy.md_0"
  __vrite__react_render_directive__="client:only"
  __vrite__react_render_component__="ReactComp1"
  render-strategy="client:only"
  component-name="ReactComp1"
  page-title="渲染策略"
  render-count="1"
></div>

渲染结果如下：

SSR:Only ​

组件仅执行服务端渲染，不进行客户端渲染，适用于服务端组件。

md
<ReactComp2 ssr:only render-strategy="ssr:only" component-name="ReactComp2" :page-title="page.title" :render-count="2" />
tsx
import type { CompProps } from '../type';

export function ReactComp2(props: CompProps) {
  return (
    <div className="react-comp2-demo">
      <strong>
        {props['render-count']}: 渲染策略: {props['render-strategy']}
      </strong>
      <ol>
        <li>
          <strong>组件名称:</strong> <span>{props['component-name']}</span>
        </li>
        <li>
          <strong>页面标题:</strong> <span>{props['page-title']}</span>
        </li>
      </ol>
    </div>
  );
}

预处理为：

html
<div
  __vrite__react_render_id__="/Users/Project/vrite/zh/material/strategy/rendering-strategy.md_1"
  __vrite__react_render_directive__="ssr:only"
  __vrite__react_render_component__="ReactComp2"
  render-strategy="ssr:only"
  component-name="ReactComp2"
  page-title="渲染策略"
  render-count="2"
></div>

渲染结果如下：

2: 渲染策略: ssr:only
  1. 组件名称: ReactComp2
  2. 页面标题: 渲染策略

Client:Load ​

组件在服务端完成渲染工作，客户端脚本下载完成后立即执行注水流程，适用于常见的 SSR 应用。

md
<ReactComp3 client:load render-strategy="client:load" component-name="ReactComp3" :page-title="page.title" :render-count="3" />
tsx
import type { CompProps } from '../type';

export default function ReactComp3(props: CompProps) {
  return (
    <div className="react-comp3-demo">
      <strong>
        {props['render-count']}: 渲染策略: {props['render-strategy']}
      </strong>
      <ol>
        <li>
          <strong>组件名称:</strong> <span>{props['component-name']}</span>
        </li>
        <li>
          <strong>页面标题:</strong> <span>{props['page-title']}</span>
        </li>
      </ol>
    </div>
  );
}

预处理为：

md
<div
  __vrite__react_render_id__="/Users/Project/vrite/zh/material/strategy/rendering-strategy.md_2"
  __vrite__react_render_directive__="client:load"
  __vrite__react_render_component__="ReactComp3"
  render-strategy="client:load"
  component-name="ReactComp3"
  page-title="渲染策略"
  render-count="3"
></div>

渲染结果如下：

3: 渲染策略: client:load
  1. 组件名称: ReactComp3
  2. 页面标题: 渲染策略

Client:Visible ​

组件在服务端完成渲染工作，客户端脚本下载完成后且组件可见时，执行注水流程。

md
<ReactComp4 client:visible render-strategy="client:visible" component-name="ReactComp4" :page-title="page.title" :render-count="4" />
tsx
import type { CompProps } from '../type';

export function ReactComp4(props: CompProps) {
  return (
    <div className="react-comp4-demo">
      <strong>
        {props['render-count']}: 渲染策略: {props['render-strategy']}
      </strong>
      <ol>
        <li>
          <strong>组件名称:</strong> <span>{props['component-name']}</span>
        </li>
        <li>
          <strong>页面标题:</strong> <span>{props['page-title']}</span>
        </li>
      </ol>
    </div>
  );
}

预处理为：

md
<div
  __vrite__react_render_id__="/Users/Project/vrite/zh/material/strategy/rendering-strategy.md_3"
  __vrite__react_render_directive__="client:visible"
  __vrite__react_render_component__="ReactComp4"
  render-strategy="client:visible"
  component-name="ReactComp4"
  page-title="渲染策略"
  render-count="4"
></div>

渲染结果如下：

4: 渲染策略: client:visible
  1. 组件名称: ReactComp4
  2. 页面标题: 渲染策略

默认策略 ​

默认渲染策略，与 client:load 等价。

playground.md
md
<ReactComp5 render-strategy="default" component-name="ReactComp5" :page-title="page.title" :render-count="5" />
ReactComp5.tsx
tsx
import type { CompProps } from '../type';

export function ReactComp5(props: CompProps) {
  return (
    <div className="react-comp5-demo">
      <strong>
        {props['render-count']}: 渲染策略: {props['render-strategy']}
      </strong>
      <ol>
        <li>
          <strong>组件名称:</strong> <span>{props['component-name']}</span>
        </li>
        <li>
          <strong>页面标题:</strong> <span>{props['page-title']}</span>
        </li>
      </ol>
    </div>
  );
}

:::

预处理为：

md
<div
  __vrite__react_render_id__="/Users/Project/vrite/zh/material/strategy/rendering-strategy.md_4"
  __vrite__react_render_directive__="client:load"
  __vrite__react_render_component__="ReactComp5"
  render-strategy="default"
  component-name="ReactComp5"
  page-title="渲染策略"
  render-count="5"
></div>

渲染结果如下：

5: 渲染策略: default
  1. 组件名称: ReactComp5
  2. 页面标题: 渲染策略

渲染策略组合 ​

playground.md
vue
<VueComp1
  :unique-id="vueUniqueId"
  render-strategy="client:only"
  component-name="VueComp1"
  :page-title="page.title"
  :render-count="6"
>
  <template #default="{ vueInfo }">
    <ReactVueSharedComp client:only render-strategy="client:only" component-name="ReactVueSharedComp" :page-title="page.title" render-count="3-7" :vue-info="vueInfo" />
  </template>
</VueComp1>
ReactVueSharedComp.tsx
tsx
import type { CompProps } from '../type';

interface ReactVueSharedCompProps extends CompProps {
  'vue-info': string;
}

export default function ReactVueSharedComp(props: ReactVueSharedCompProps) {
  console.log(props);
  return (
    <div className="react-vue-shared-comp">
      <strong>
        {props['render-count']}: 渲染策略: {props['render-strategy']}
      </strong>
      <ol>
        <li>
          <strong>组件名称:</strong> <span>{props['component-name']}</span>
        </li>
        <li>
          <strong>页面标题:</strong> <span>{props['page-title']}</span>
        </li>
        <li>
          <strong>Vue 组件信息:</strong> <span>{props['vue-info']}</span>
        </li>
      </ol>
    </div>
  );
}

:::

渲染结果如下：

6: 渲染策略: client:only
  1. 组件名称: VueComp1
  2. 页面标题: 渲染策略
  3. 子组件渲染:

根据 CC BY-SA 4.0 许可证发布。 (8ce7aef)

版权所有 © 2024 年-至今 Senao Xi