React Server Components 心智模型

64 阅读1分钟

理解游戏规则的最简单方式,就是把自己当成游戏规则制定者

Client Components 必须写 'use client':

  1. 因为上帝懒得分析一个组件是不是用到了 onClick useState(虽然理论上可以),让 Client Components 在头顶举个牌最简单

  2. 更重要的是让开发者主动去界定 Client Components 的范围(如果框架自动处理的话,逻辑分割会很麻烦)

  3. Server Components 就是服务端代码(只是用了 React 写法)

  4. Server Components 中可以引入 Client Components,因为 client 可以使用 server 数据,比如 <C data={data} />

  5. Client Components 中不能引入 Server Components,因为引入后就可能这么用 <S count={count} />,服务端代码是在服务器里,怎么能去引用本地的数据!

  6. 但可以这么用 <C><S /></C>,这是因为 children 肯定没法引用到 C 中的本地数据(虽然理论上如果 C 中引入 S,只写 <S />,不传入任何 props,也可以分离两端,但还是那句话上帝懒得处理)

  7. Server Components 就是 PHP,Client Components 就是 <script></script>。Server Components 中可以引入 Client Components,因为 php 代码里可以写 <script></script>。反之不行,因为 <script></script> 里不能写 <?php ?>

  8. 总之,server 包含 client,server 是 client 爹,client 是 server 子集,server to client 可以,不能逆转伦理!