XCFOX

XCFOX

V2EX 第 433443 号会员,加入于 2019-08-01 22:06:00 +08:00
今日活跃度排名 9537
XCFOX 最近回复了
4 天前
回复了 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
不用设计,已经有现成的 GO 语言了
现阶段选 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
53 天前
回复了 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
其实,除了你,我们都是 NPC
1. GraphQL 需要整个团队巨额的学习成本,相比整个用 GraphQL 重构不如糊个 BFF 层; GraphQL 的生态和普及度还比不上 RESTful ;

2. 权限处理和 RESTful 并无二致,在请求进来时判断用户权限,在查数据库时加额外条件;

3. 我个人理解拿到参数就能验证了,楼主可能在找一种更便捷的验证手段,推荐使用 GQLoom 框架( https://gqloom.dev/ ),天然集成 zod 、valibot 作为验证库,有完善的中文文档。
93 天前
回复了 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 的集成。
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
tRPC 简单但严谨
https://trpc.io/
关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1145 人在线   最高记录 6679   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 12ms · UTC 18:33 · PVG 02:33 · LAX 10:33 · JFK 13:33
Developed with CodeLauncher
♥ Do have faith in what you're doing.