 |
XCFOXV2EX 第 433443 号会员，加入于 2019-08-01 22:06:00 +08:00今日活跃度排名 5932 |
XCFOX 最近回复了
10 天前 回复了 MorningStar0 创建的主题 › 程序员 › 说几点个人使用 nextjs 的感受 |
React Server Component 在我看来不是一个好的设计，为了解决一个简单问题的问题引入了更多概念和复杂度。
最初 RSC 要解决的简单问题是：在服务端渲染时如何请求数据？
由于 React hooks 令人费解的设计哲学，React 传统组件无法异步。在客户端渲染时，一般通过 `useEffect` 来获取数据。而在服务端渲染时，我们无法使用 `useEffect`，这使得在服务端请求数据（以及其他异步操作）成为了一个问题。顺带一提，vue3(nuxt.js) 就不会面临这个问题，因为 vue3 的组合式 API 没有 React hooks 的一堆限制，并且 setup 是能够异步的。
Next.js(RSC)给出的答案是：设计一个全新的服务端组件，专门用来在服务端发请求。好处是，这个组件可以异步了，坏处是，在这个组件中无法使用 hooks 。
Remix(React-Router-v7)的答案是：Loader 。预先定义好要加载的数据，框架会在数据加载完后将数据注入到组件中。
在我看来 Loader 方案明显比 RSC 更好：
1. 性能更好：Loader 单次加载完成页面所有数据； RSC 每次加载一个组件，加载完父组件的数据，再加载子组件的数据。
2. 更低的心智负担：Loader 只需要提前写好请求，然后方便地通过 useLoaderData 拿到数据； RSC 则引入了额外的服务端组件的概念，在编写时得区分是否为服务端组件，还得到处写 "use client"。
包括新出的 TanStack 也是提倡使用 Loader 方案而不是 RSC 。
参考：
https://react.dev/blog/2020/12/21/data-fetching-with-react-server-components
https://nuxt.com/docs/getting-started/data-fetching
https://remix.run/docs/en/main/discussion/data-flow
https://tanstack.com/router/latest/docs/framework/react/guide/data-loading
最初 RSC 要解决的简单问题是：在服务端渲染时如何请求数据？
由于 React hooks 令人费解的设计哲学，React 传统组件无法异步。在客户端渲染时，一般通过 `useEffect` 来获取数据。而在服务端渲染时，我们无法使用 `useEffect`，这使得在服务端请求数据（以及其他异步操作）成为了一个问题。顺带一提，vue3(nuxt.js) 就不会面临这个问题，因为 vue3 的组合式 API 没有 React hooks 的一堆限制，并且 setup 是能够异步的。
Next.js(RSC)给出的答案是：设计一个全新的服务端组件，专门用来在服务端发请求。好处是，这个组件可以异步了，坏处是，在这个组件中无法使用 hooks 。
Remix(React-Router-v7)的答案是：Loader 。预先定义好要加载的数据，框架会在数据加载完后将数据注入到组件中。
在我看来 Loader 方案明显比 RSC 更好：
1. 性能更好：Loader 单次加载完成页面所有数据； RSC 每次加载一个组件，加载完父组件的数据，再加载子组件的数据。
2. 更低的心智负担：Loader 只需要提前写好请求，然后方便地通过 useLoaderData 拿到数据； RSC 则引入了额外的服务端组件的概念，在编写时得区分是否为服务端组件，还得到处写 "use client"。
包括新出的 TanStack 也是提倡使用 Loader 方案而不是 RSC 。
参考：
https://react.dev/blog/2020/12/21/data-fetching-with-react-server-components
https://nuxt.com/docs/getting-started/data-fetching
https://remix.run/docs/en/main/discussion/data-flow
https://tanstack.com/router/latest/docs/framework/react/guide/data-loading
10 天前 回复了 xiaolingjsling 创建的主题 › 哔哩哔哩 › B 站出年度报告了， xdm 都看了多少个小时 |
15 天前 回复了 netabare 创建的主题 › 程序员 › 打算设计一门集所有语言的缺点短板于一体的语言，可能从哪里开始或者有哪些功能建议呢？ |
不用设计，已经有现成的 GO 语言了
18 天前 回复了 python30 创建的主题 › 前端开发 › 各位大佬或独立开发者你们用 React Native 与 Flutter 还是 uniapp？ 能进来留下你用哪个不？再加一句话说明为啥用。 |
现阶段选 React 不会错，生态比其他好得多，js 性能问题也解决了。
React 可以开发前端，做 APP 直接用 React Native/Capacitor ，做小程序用 Taro 。React 理论上可以适配到所有图形引擎或者平台上，包括 Flutter 同款的 Skia ，要是 Impeller 性能出色的话，React 再适配到 Impeller 也完全可行。
新出炉的 React Native 0.76 默认启用了新架构，性能大幅提升，再加上 hermes 引擎，js 的执行速度早就不是瓶颈。
Flutter 的优势是界面是完全自绘，能保证所有平台的一致性。这同时也意味着放着完善的 ios/android 生态不用，全部都另起炉灶。这当然是值得鼓励的，但是谷歌给到 Flutter 的支持显然不如 Apple 给到 iOS 的，也不如谷歌自己给到 Android 的，于是 Flutter 在体验上始终与原生 APP 存在差距，尤其是高帧率逐渐普及之后，Flutter 不得不放弃 Skia 自研 Impeller 。
可以体验一下 V2EX 的 Flutter 客户端和 React Native 客户端，Flutter 版本滑动、翻页的时候存在明显卡顿，RN 的体验明显好得多。
https://github.com/guozhigq/flutter_v2ex
https://github.com/liaoliao666/v2ex
React 可以开发前端，做 APP 直接用 React Native/Capacitor ，做小程序用 Taro 。React 理论上可以适配到所有图形引擎或者平台上，包括 Flutter 同款的 Skia ，要是 Impeller 性能出色的话，React 再适配到 Impeller 也完全可行。
新出炉的 React Native 0.76 默认启用了新架构，性能大幅提升，再加上 hermes 引擎，js 的执行速度早就不是瓶颈。
Flutter 的优势是界面是完全自绘，能保证所有平台的一致性。这同时也意味着放着完善的 ios/android 生态不用，全部都另起炉灶。这当然是值得鼓励的，但是谷歌给到 Flutter 的支持显然不如 Apple 给到 iOS 的，也不如谷歌自己给到 Android 的，于是 Flutter 在体验上始终与原生 APP 存在差距，尤其是高帧率逐渐普及之后，Flutter 不得不放弃 Skia 自研 Impeller 。
可以体验一下 V2EX 的 Flutter 客户端和 React Native 客户端，Flutter 版本滑动、翻页的时候存在明显卡顿，RN 的体验明显好得多。
https://github.com/guozhigq/flutter_v2ex
https://github.com/liaoliao666/v2ex
59 天前 回复了 cokey 创建的主题 › Android › 应该选择哪种跨平台方案 |
React 的思路和 Flutter 非常不一样。
React 有一层虚拟 DOM ，目前 React 的虚拟 DOM 适配了 web(react-dom)、iOS | Android (React Native)、windows (react-native-windows) 还有社区维护的 tvOS 、Skia ，甚至 React 还能直接渲染到视频 ( https://www.remotion.dev/) 。按理说要是 Flutter 的 Impeller 性能出色的话，React 再适配到 Impeller 也完全可行。
而 Flutter 想做的是跨平台的图形界面的渲染引擎。Flutter 的界面是完全自绘的，这意味着放着完善的 ios/android 生态不用，全部都另起炉灶。这当然是值得鼓励的，但是谷歌给到 Flutter 的支持显然不如 Apple 给到 iOS 的，也不如谷歌自己给到 Android 的，于是 Flutter 在体验上始终与原生 APP 存在差距，尤其是高帧率逐渐普及之后，Flutter 不得不放弃 Skia 自研 Impeller 。
新出炉的 React Native 0.76 默认启用了新架构，性能大幅提升，再加上 hermes 引擎，js 的执行速度早就不是瓶颈。
而 Flutter 好像越来越不受 Google 重视了（ https://www.v2ex.com/t/1084590 ） ，之前提到的全新 Impeller 引擎还没有完成 ( https://github.com/orgs/flutter/projects/21 ) ，期待 Impeller 能够拉近 Flutter 与原生的差距。
我个人体验下来 React Native 的流畅度是显著好于 Flutter 的，React Native 在动画表现上确实 Native 。Flutter 写的页面一滑动就知道是 Flutter 写的（看惯了 120 hz 再看 60hz 肉眼可见掉帧）。
可以体验一下 V2EX 的 Flutter 客户端和 React Native 客户端，Flutter 版本滑动、翻页的时候存在明显卡顿，RN 的体验明显好得多。
https://github.com/guozhigq/flutter_v2ex
https://github.com/liaoliao666/v2ex
React 有一层虚拟 DOM ，目前 React 的虚拟 DOM 适配了 web(react-dom)、iOS | Android (React Native)、windows (react-native-windows) 还有社区维护的 tvOS 、Skia ，甚至 React 还能直接渲染到视频 ( https://www.remotion.dev/) 。按理说要是 Flutter 的 Impeller 性能出色的话，React 再适配到 Impeller 也完全可行。
而 Flutter 想做的是跨平台的图形界面的渲染引擎。Flutter 的界面是完全自绘的，这意味着放着完善的 ios/android 生态不用，全部都另起炉灶。这当然是值得鼓励的，但是谷歌给到 Flutter 的支持显然不如 Apple 给到 iOS 的，也不如谷歌自己给到 Android 的，于是 Flutter 在体验上始终与原生 APP 存在差距，尤其是高帧率逐渐普及之后，Flutter 不得不放弃 Skia 自研 Impeller 。
新出炉的 React Native 0.76 默认启用了新架构，性能大幅提升，再加上 hermes 引擎，js 的执行速度早就不是瓶颈。
而 Flutter 好像越来越不受 Google 重视了（ https://www.v2ex.com/t/1084590 ） ，之前提到的全新 Impeller 引擎还没有完成 ( https://github.com/orgs/flutter/projects/21 ) ，期待 Impeller 能够拉近 Flutter 与原生的差距。
我个人体验下来 React Native 的流畅度是显著好于 Flutter 的，React Native 在动画表现上确实 Native 。Flutter 写的页面一滑动就知道是 Flutter 写的（看惯了 120 hz 再看 60hz 肉眼可见掉帧）。
可以体验一下 V2EX 的 Flutter 客户端和 React Native 客户端，Flutter 版本滑动、翻页的时候存在明显卡顿，RN 的体验明显好得多。
https://github.com/guozhigq/flutter_v2ex
https://github.com/liaoliao666/v2ex
64 天前 回复了 ccde8259 创建的主题 › 程序员 › 前段时间听别人吐槽，这个世界就是个大的推荐算法。 |
其实，除了你，我们都是 NPC
92 天前 回复了 tanxnative 创建的主题 › 问与答 › GraphQL 为什么国内很少用?权限如何处理?对参数的逻辑验证如何处理? |
1. GraphQL 需要整个团队巨额的学习成本，相比整个用 GraphQL 重构不如糊个 BFF 层； GraphQL 的生态和普及度还比不上 RESTful ；
2. 权限处理和 RESTful 并无二致，在请求进来时判断用户权限，在查数据库时加额外条件；
3. 我个人理解拿到参数就能验证了，楼主可能在找一种更便捷的验证手段，推荐使用 GQLoom 框架( https://gqloom.dev/ )，天然集成 zod 、valibot 作为验证库，有完善的中文文档。
2. 权限处理和 RESTful 并无二致，在请求进来时判断用户权限，在查数据库时加额外条件；
3. 我个人理解拿到参数就能验证了，楼主可能在找一种更便捷的验证手段，推荐使用 GQLoom 框架( https://gqloom.dev/ )，天然集成 zod 、valibot 作为验证库，有完善的中文文档。
99 天前 回复了 BeijingBaby 创建的主题 › GraphQL › 国内用 GraphQL 的好像不多？ |
GraphQL 很好用，对比 RESTful API 简直完胜。但是很多人并不理解 GraphQL ，甚至把 GraphQL 和 SQL 混为一谈。
GraphQL 在团队开发中解决了 3 个主要问题：
1. 服务端到客户端的强类型：GraphQL 本身是一门语言，而且是强类型语言。使用 GraphQL 客户端能够通过服务端提供的 schema 生成全面的 API 类型，极大减轻了前端的负担；
2. 文档与沟通：每个 GraphQL 服务都会有一个 schema 文件，这个文件就描述了该服务内的所有接口，要了解该服务可以直接看 schema 而不是代码；
3. 接口聚合：GraphQL 允许客户端定义要获取的字段，前端想拿什么接拿什么，避免了前后端扯皮（ https://www.v2ex.com/t/1036619 ）。大型项目里常常需要 BFF 中间层也是为了接口聚合，很多 BFF 层甚至都是拿 GraphQL 搞的。
看楼主的发言，我估计后端是直接用 PostGraphile, hasura 这样的框架直接把数据库表以 GraphQL 的形式暴露给前端。不得不说这是效率极高的做法，但是很难控制权限访问，只适合快速开发阶段使用。常规开发时我还是建议使用 nest.js 这样的框架老老实实做功能。
顺带安利我们团队自研的 GraphQL 框架 GQLoom：
https://github.com/modevol-com/gqloom
GQLoom 是实现优先（ Implementation-First ）的 GraphQL 框架，适用于 JavaScript/TypeScript 。GQLoom 最大的亮点是允许使用 Zod 、Valibot 这样的 Schema 库构建 GraphQL ，代码简洁且有完善的类型安全，马上会跟进对 Prisma 、Drizzle ORM 的集成。
GraphQL 在团队开发中解决了 3 个主要问题：
1. 服务端到客户端的强类型：GraphQL 本身是一门语言，而且是强类型语言。使用 GraphQL 客户端能够通过服务端提供的 schema 生成全面的 API 类型，极大减轻了前端的负担；
2. 文档与沟通：每个 GraphQL 服务都会有一个 schema 文件，这个文件就描述了该服务内的所有接口，要了解该服务可以直接看 schema 而不是代码；
3. 接口聚合：GraphQL 允许客户端定义要获取的字段，前端想拿什么接拿什么，避免了前后端扯皮（ https://www.v2ex.com/t/1036619 ）。大型项目里常常需要 BFF 中间层也是为了接口聚合，很多 BFF 层甚至都是拿 GraphQL 搞的。
看楼主的发言，我估计后端是直接用 PostGraphile, hasura 这样的框架直接把数据库表以 GraphQL 的形式暴露给前端。不得不说这是效率极高的做法，但是很难控制权限访问，只适合快速开发阶段使用。常规开发时我还是建议使用 nest.js 这样的框架老老实实做功能。
顺带安利我们团队自研的 GraphQL 框架 GQLoom：
https://github.com/modevol-com/gqloom
GQLoom 是实现优先（ Implementation-First ）的 GraphQL 框架，适用于 JavaScript/TypeScript 。GQLoom 最大的亮点是允许使用 Zod 、Valibot 这样的 Schema 库构建 GraphQL ，代码简洁且有完善的类型安全，马上会跟进对 Prisma 、Drizzle ORM 的集成。
127 天前 回复了 shintendo 创建的主题 › TypeScript › 前端写 nestjs 后端，用 TypeORM 时感到非常困惑，不知道是不是我的理解有问题 |
TypeORM
> 当我把一个表字段定义为 nullable: true 或者 nullable: false 的时候，似乎并不影响这个字段在代码里是 optional 还是 required ？
是的，装饰器无法影响 class 内属性的类型。
> 如果我不通过 ORM 自动建表，而是自己在 navicat 里建表，那是不是 TypeORM 里面的 @Column 装饰器参数就没有任何意义？
不完全是，@Column 装饰器参数的主要作用就是生成简表语句，其次 TypeORM 在运行时会通过装饰器参数（元数据）做一些判断，避免一些错误的 SQL 。
> 我定义一个 Entity ，所有字段都是 Not Null 的，类型也都是 required 的，结果 TypeORM 允许我往这个表里保存空对象？等着数据库报错？
是的，装饰器无法影响 class 内属性的类型。但为了更好的类型安全你应该在 tsconfig.json 中配置 strictPropertyInitialization 为 ture ，并为每个属性声明是否为 nullable ( https://typescriptlang.org/tsconfig/#strictPropertyInitialization )
我个人建议你尽早抛弃 TypeORM ，TypeORM 项目已经不再积极维护了。换更严谨 mikro-orm ( https://mikro-orm.io/ )，mikro-orm 能通过 ts-morph 从 class property 提取类型以及 nullable ，能够避免装饰器内 nullable 属性与 class property 声明的 nullable 不一致的情况
https://mikro-orm.io/docs/defining-entities
> 当我把一个表字段定义为 nullable: true 或者 nullable: false 的时候，似乎并不影响这个字段在代码里是 optional 还是 required ？
是的，装饰器无法影响 class 内属性的类型。
> 如果我不通过 ORM 自动建表，而是自己在 navicat 里建表，那是不是 TypeORM 里面的 @Column 装饰器参数就没有任何意义？
不完全是，@Column 装饰器参数的主要作用就是生成简表语句，其次 TypeORM 在运行时会通过装饰器参数（元数据）做一些判断，避免一些错误的 SQL 。
> 我定义一个 Entity ，所有字段都是 Not Null 的，类型也都是 required 的，结果 TypeORM 允许我往这个表里保存空对象？等着数据库报错？
是的，装饰器无法影响 class 内属性的类型。但为了更好的类型安全你应该在 tsconfig.json 中配置 strictPropertyInitialization 为 ture ，并为每个属性声明是否为 nullable ( https://typescriptlang.org/tsconfig/#strictPropertyInitialization )
我个人建议你尽早抛弃 TypeORM ，TypeORM 项目已经不再积极维护了。换更严谨 mikro-orm ( https://mikro-orm.io/ )，mikro-orm 能通过 ts-morph 从 class property 提取类型以及 nullable ，能够避免装饰器内 nullable 属性与 class property 声明的 nullable 不一致的情况
https://mikro-orm.io/docs/defining-entities
131 天前 回复了 BeijingBaby 创建的主题 › Node.js › 2024 年了，写后端 API Node.js 生态用哪个框架？ |
tRPC 简单但严谨
https://trpc.io/
https://trpc.io/
Select Language