Fluent UI 是我用过的最难受的 React 库，没有之一！

[marcosteam]

如题，新网站想使用 Fluent UI，奈何微软夹带私货，只给 TS 案例，JS 版本完全没有。

遂拷贝一份文档的示例代码进去，打算调试，由于官网包已改名，把 fabric-ui 改成 @fluentui/react 。

（我非常想吐槽，Fluent UI 的官网文档跟一坨米田共一样，示例代码不但没有更新过，包管理、文档库还特别乱。写个导航栏要 import 各种奇奇怪怪的库。文档还只有 TS 版本，要知道其它的 React 组件库都是提供了 JS 和 TS 两种版本样例可供选择的，为了推广自家的 TS 真的是不择手段。）

新建 TSX，粘贴代码，一个字都没动，仅仅只是换了包名。

然后，parcel，渲染，没有报错。但是调试网页什么都没有。

我 X 你 X ！微软！

附：TSX 代码前面和后面部分。

为什么没有中间部分？因为中间我全部照搬的微软官网的Example，一个字都没有改过。

[SilencerL]

我认为我是个死忠软粉.
看了 Fluent UI (Web) 之后我有种无力吐槽的感觉, 如楼上所说... antd 不香吗.
实在想贴合 Win 10 UWP 风格为什么不选 react-uwp
我认真的把 Fluent UI (Web) 的组件都点了一遍, 且不说文档页面竟然还有时候出现无法点击的 Bug, 组件的顺滑度(不知道怎么形容)完全体现不出巨硬的技术实力...
建议微软改名部明年给 Fluent UI (Web) 改个好名字再来.

[hantsy]

@okampfer React 太 JS 化了，即使是支持 TS，从设计上看，最新的 Hooks 等都是为 Functional 编程准备，没有 OOP 化。React 现在加入 @Types 仅仅是为了代替它之前一直吹捧的 Flow Type 检测而已。

看到别人文章写的 Hooks，一堆 const functions 下来，实在看得有点晕。

CLI 工具还是 Angular CLI 强，Angular Semantics 设计已经超越其他工具了，Angular 生态很多都添加了支持，用 ng add 代替 npm install，除了安装包外，还自动添加默认配置。


也看到有些项目把这个搬到 CRA 下来用。

[zachlhb]

@DOLLOR 个人还是习惯 vue 这种方式，视图，JS，css 分成三个部分，结构清晰，更方便维护

[hantsy]

@zachlhb Angularjs, Angular 一直是分开的。

[aapeli]

借楼问下手机端好用的 react ui 库

[nannanziyu]

1，我看了下，文档都是最新的，没有“示例代码没更新过的情况”
2，import office-ui-fabric-react 和 @fluentui/react 都可以，后者只是前者的重定向
3，示例代码一行不改完全没问题，我怀疑你环境都没搭起来

[binbinyouliiii]

我现在选前端库首选是有 TS 的

[marcosteam]

@SilencerL 我感觉 reactUWP 模仿的有点...粗糙，按理来说官方出品质量应该会更好一点，这个实在是接受不来

[marcosteam]

@nannanziyu 我确定我的环境没有问题。fluentui 相关的依赖我都装了，打包调试用的 parcel，文件扩展名也是固定的 tsx 。不过我没有装 office-ui-fabric-react，因为 fluentui 就是它的新版本。

[nannanziyu]

@marcosteam

文档我觉得相当清晰，我第一次用这个库，几乎 30 秒就能上手了

[nannanziyu]

@marcosteam
是不是你 tsconfig 没有配好呢？感觉你的 tsx 文件没有加载的样子

[nannanziyu]

@marcosteam
如果对前端不太熟悉的话，建议可以先用 cli 来配

// 安装 create-react-app 脚手架，也可以全局安装
yarn add create-react-app
// 使用 ts 模板创建工程
yarn create-react-app my-app --typescript
cd my-app
// 安装 @fluentui/react
yarn add @fluentui/react

[Oktfolio]

TS 好评

[marcosteam]

@nannanziyu 我想更新一下我现在的情况：
我重新尝试了文档库当中的几个示例之后发现，所有从 @fluentui/react/lib 中 import 的组件都可以正常加载，如果是从 @fluentui/react import 的就不能正常渲染了。
不知道这是什么问题...

[nannanziyu]

@marcosteam
应该是因为 nav 相关组件没有导出到 index.ts
ts 里，假如某个文件夹下面有 index.ts ,并且在这个文件里导出到内容，才可以在外部 import

[marcosteam]

@nannanziyu 睡觉起来再看看

[yexiaoxing]

可以看一下 https://github.com/microsoft/fluentui/issues/13200，office-ui-fabric-react 改名也是最近的事情了，文档的更新也还在进行 https://github.com/microsoft/fluentui/issues/13125 。至于为什么 import @fluentui/react 不能用，因为真的不能用… 应该是从 lib 引入的。

[StackGao]

新浪微博内推 flutter 高级开发工程师

要求对 Flutter UI & dart 有较深理解

感兴趣的 wx 聊聊 ZHVzdG9va2s=

[okampfer]

@hantsy #22
React Hooks 和 Vue3 的 composition api 都是走的 functional 那条路。

我也是 Java 出身，刚接触 React 的时候还没有 class component，而是跟 vue2 差不多的 options api：React.createClass({...})，也不适应。后来很快过渡到 class component 感觉好多了，不过我确实遇到过组件间共享 stateful 逻辑、HOC 嵌套太多的问题，所以 hooks 出来之后毫不犹豫切换了，还顺便摆脱了烦人的 this 。我还是更倾向于函数式编程，个人觉得闭包比 this 更好理解也更好掌控。

不过在后端，我用的 nodejs 框架 nestjs 跟 angular 理念一致，用过 spring 的也会觉得非常亲切。Hmm……感觉我有点分裂。

[hantsy]

@okampfer 我也刚在玩 Nestjs, https://github.com/hantsy/nestjs-sample 第一个感觉比较难受的是 Pipe，和 Angular 概念不是一个东西，Angular 更多是页面 Formatter 概念，非要这个词，直接抄 Spring 的 Converter，Validator 就清晰了。NestJS Module 感觉作用不大，也和 Angular 中不一样，NgModule 是可以 Lazy Load, 而且管理 Routing 功能。