第44章 技术栈的挑战（1/2）
请关闭浏览器的阅读/畅读/小说模式并且关闭广告屏蔽过滤功能，避免出现内容无法显示或者段落错乱。
上午九点，链艺坊的开放式办公区已经坐满了人。
林晨盯着屏幕上打开的代码仓库，眉头不自觉地皱了起来。昨天下午项目会结束后，Tech Lead 陈峰已经把项目权限和任务详情发给了他。这是一个 NFT 拍卖平台的前端模块，需要他负责用户资产展示、出价交互和交易状态实时更新的部分。
技术栈清清楚楚地写在项目文档里：React 18 + TypeScript + Vite，与后端智能合约交互使用 ethers.js，部分复杂状态管理用 Ztand。每一个词他都认识，但组合在一起，尤其是要在三天内做出“可演示版本”，压力像潮水般涌来。
他上一次正经写前端代码，还是五年前用 jQuery 和 Bootstrap 做后台管理系统。React 他听说过，知道是 Facebook 搞的框架，但从来没碰过。TypeScript 更陌生，只知道是 JavaScript 加了类型系统。至于 Vite、Ztand 这些工具，名字都新鲜。
“晨哥，环境配好了吗”？旁边工位探过来一张年轻的脸，是昨天一起吃午饭的前端同事阿杰，戴着黑框眼镜，头发染了一撮灰蓝色。
“差不多了，正在看项目结构”。林晨尽量让自己的声音听起来平静。
“那就好。这个项目其实不难，核心逻辑都在合约那边，我们前端主要是把数据展示好，交互做流畅”。阿杰说着，指了指自己屏幕，“我负责拍卖列表和搜索，咱们模块挨着，有问题随时问我”。
“谢谢”。林晨点点头，心里稍微松了点。至少同事看起来还算友善。
第一步：初识代码墙
他深吸一口气，点开项目 README，从头开始看。先按照文档把依赖装好，然后启动开发服务器。终端里滚过一行行安装日志，最后显示“Local: Au Ptfor”的标题。
“第一步总算没卡住”。林晨心里默念，开始按照任务描述，找到对应的组件目录。第一个要改的文件是 srents/AssetCard.tsx。点开，满眼都是陌生的语法。
林晨盯着代码看了足足十分钟。terface、React.FC、eState、eCallback、eMeo、BigNuber…… 这些概念像一堵墙横在面前。他能大概猜出一些——eState 应该是管理状态的，eCallback 和 eMeo 跟性能优化有关，terface 定义类型。但具体怎么用，为什么要这么用，脑子里一片空白。
更麻烦的是，这代码和他习惯的后端 Java/Python 写法完全不同。函数式组件、Hooks、JSX 语法…… 每一样都需要重新理解。
“晨哥，卡住了”？阿杰又探过头来，看到林晨屏幕上的代码，“哦，AssetCard 啊，这个组件其实挺典型的。你要改的是出价按钮那块的样式，产品说现在的按钮不够醒目，要加个渐变背景和 hover 效果”。
林晨苦笑：“样式先放放，我连这组件怎么工作的都还没完全看懂”。
阿杰愣了一下，随即露出理解的表情：“哦对，你之前主要做后端是吧？React 这套确实需要适应一下。要不你先看看官方文档？React 和 TypeScript 的官网教程都挺不错的”。
“嗯，正在看”。林晨已经打开了 React 官网，同时另一个标签页是 TypeScript Handbook。
调试：新手的挫败感
时间一分一秒过去。上午十点半，林晨勉强理解了函数式组件的基本概念，尝试着修改了一点样式代码。保存后，浏览器热更新，按钮确实变了颜色。但当他尝试添加一个简单的功能——在出价时显示加载状态——时，问题来了。
按照他的理解，应该在 handleBid 函数里设置某个状态，然后在按钮上根据这个状态显示“出价中……”。他模仿着现有代码，加了个 st [isSubittg, setIsSubittg] = eState(false)，然后在按钮的 disabled 属性里用这个状态。
保存，编译报错：Type boolean is not assigo type strg | undefed.
林晨盯着错误信息，不明所以。他检查代码，按钮的 disabled 属性确实是布尔值啊。
“阿杰，能帮我看一眼吗”？他不得不求助。
阿杰凑过来，扫了两眼：“哦，这里。你看按钮的 disabled 属性类型定义，可能是从某个 UI 库来的，它接受的是 strg 或者 undefed，不是 boolean。你得改成 disabled={isSubittg ? true : undefed}”。
林晨恍然，同时又感到一阵无力。这种细节，没有经验根本想不到。改好，编译通过。但点击按钮测试时，控制台又报错：Uncaught TypeError: onBidClick is not a fun。
“这又是为什么”？林晨感觉自己像个刚学编程的新手。
阿杰耐心解释：“onBidClick 是从父组件传下来的回调函数，但你在 AssetCard 里测试的时候，父组件没传这个 prop，所以是 undefed。你得在父组件里模拟一个函数传进来，或者先判断是否存在”。
林晨按照提示修改，终于让按钮能正常显示加载状态了。就这么一个简单的功能，花了他整整一个小时。
进度与规范的挑战
抬头看时间，已经十一点四十。办公区里开始有人起身去吃饭，讨论着中午吃什么。几个年轻同事在聊昨晚玩的游戏，术语飞溅——“符文”、“打野”、“gank”。林晨完全插不上话。他关掉文档页面，揉了揉发酸的眼睛。一个上午，只勉强弄懂了一个组件的一小部分，而周五就要交付可演示版本。
这种进度，别说三天，给他三周都不一定够。
午休时，他没什么胃口，在楼下便利店随便买了个三明治，回到工位边吃边继续看代码。阿杰和其他几个同事结伴出去吃了，办公区空了一半。林晨啃着干巴巴的三明治，眼睛没离开屏幕。他打开项目的其他组件文件，一个个看过去，试图理解整个前端架构。越看心越沉——项目用了不少他完全没接触过的库和模式：React Router 做路由、React Query 管理服务端状态、Taild CSS 写样式……
下午一点半，同事们陆续回来。阿杰看到林晨还在工位，有些惊讶：“晨哥，你没休息啊”？
“嗯，抓紧时间熟悉熟悉”。林晨说。
下午的工作更具体。陈峰在团队群里 @ 了他，让他下午四点前提交一个简单的 PR，把 AssetCard 组件的几个样式问题修复了。这是个小任务，算是让他熟悉 git 工作流。林晨不敢懈怠，按照公司文档的流程，从拉取最新代码、创建分支、修改、提交、推送到远程，一步步做。提交前他还特意检查了代码格式，确保符合项目的 ESLt 配置。
三点五十，PR 创建成功。他松了口气，以为至少这关过了。十分钟后，陈峰在 PR
本章未完，点击下一页继续阅读。