第44章 技术栈的挑战（1 / 2）

请关闭浏览器的阅读/畅读/小说模式并且关闭广告屏蔽过滤功能，避免出现内容无法显示或者段落错乱。

上午九点，链艺坊的开放式办公区已经坐满了人。

林晨盯着屏幕上打开的代码仓库，眉头不自觉地皱了起来。昨天下午项目会结束后，TechLead陈峰已经把项目权限和任务详情发给了他。这是一个NFT拍卖平台的前端模块，需要他负责用户资产展示、出价交互和交易状态实时更新的部分。

技术栈清清楚楚地写在项目文档里：React18+TypeScript+Vite，与后端智能合约交互使用ethers.js，部分复杂状态管理用Ztand。每一个词他都认识，但组合在一起，尤其是要在三天内做出“可演示版本”，压力像潮水般涌来。

他上一次正经写前端代码，还是五年前用jQuery和Bootstrap做后台管理系统。React他听说过，知道是Facebook搞的框架，但从来没碰过。TypeScript更陌生，只知道是JavaScript加了类型系统。至于Vite、Ztand这些工具，名字都新鲜。

“晨哥，环境配好了吗”？旁边工位探过来一张年轻的脸，是昨天一起吃午饭的前端同事阿杰，戴着黑框眼镜，头发染了一撮灰蓝色。

“差不多了，正在看项目结构”。林晨尽量让自己的声音听起来平静。

“那就好。这个项目其实不难，核心逻辑都在合约那边，我们前端主要是把数据展示好，交互做流畅”。阿杰说着，指了指自己屏幕，“我负责拍卖列表和搜索，咱们模块挨着，有问题随时问我”。

“谢谢”。林晨点点头，心里稍微松了点。至少同事看起来还算友善。

第一步：初识代码墙

他深吸一口气，点开项目README，从头开始看。先按照文档把依赖装好，然后启动开发服务器。终端里滚过一行行安装日志，最后显示“Local:AuPtfor”的标题。

“第一步总算没卡住”。林晨心里默念，开始按照任务描述，找到对应的组件目录。第一个要改的文件是srents/AssetCard.tsx。点开，满眼都是陌生的语法。

林晨盯着代码看了足足十分钟。terface、React.FC、eState、eCallback、eMeo、BigNuber……这些概念像一堵墙横在面前。他能大概猜出一些——eState应该是管理状态的，eCallback和eMeo跟性能优化有关，terface定义类型。但具体怎么用，为什么要这么用，脑子里一片空白。

更麻烦的是，这代码和他习惯的后端Java/Python写法完全不同。函数式组件、Hooks、JSX语法……每一样都需要重新理解。

“晨哥，卡住了”？阿杰又探过头来，看到林晨屏幕上的代码，“哦，AssetCard啊，这个组件其实挺典型的。你要改的是出价按钮那块的样式，产品说现在的按钮不够醒目，要加个渐变背景和hover效果”。

林晨苦笑：“样式先放放，我连这组件怎么工作的都还没完全看懂”。

阿杰愣了一下，随即露出理解的表情：“哦对，你之前主要做后端是吧？React这套确实需要适应一下。要不你先看看官方文档？React和TypeScript的官网教程都挺不错的”。

“嗯，正在看”。林晨已经打开了React官网，同时另一个标签页是TypeScriptHandbook。

调试：新手的挫败感

时间一分一秒过去。上午十点半，林晨勉强理解了函数式组件的基本概念，尝试着修改了一点样式代码。保存后，浏览器热更新，按钮确实变了颜色。但当他尝试添加一个简单的功能——在出价时显示加载状态——时，问题来了。

按照他的理解，应该在handleBid函数里设置某个状态，然后在按钮上根据这个状态显示“出价中……”。他模仿着现有代码，加了个st[isSubittg,setIsSubittg]=eState(false)，然后在按钮的disabled属性里用这个状态。

保存，编译报错：Typebooleanisnotassigotypestrg|undefed.

林晨盯着错误信息，不明所以。他检查代码，按钮的disabled属性确实是布尔值啊。

“阿杰，能帮我看一眼吗”？他不得不求助。

阿杰凑过来，扫了两眼：“哦，这里。你看按钮的disabled属性类型定义，可能是从某个UI库来的，它接受的是strg或者undefed，不是boolean。你得改成disabled={isSubittg?true:undefed}”。

林晨恍然，同时又感到一阵无力。这种细节，没有经验根本想不到。改好，编译通过。但点击按钮测试时，控制台又报错：UncaughtTypeError:onBidClickisnotafun。

“这又是为什么”？林晨感觉自己像个刚学编程的新手。

阿杰耐心解释：“onBidClick是从父组件传下来的回调函数，但你在AssetCard里测试的时候，父组件没传这个prop，所以是undefed。你得在父组件里模拟一个函数传进来，或者先判断是否存在”。

林晨按照提示修改，终于让按钮能正常显示加载状态了。就这么一个简单的功能，花了他整整一个小时。

进度与规范的挑战

抬头看时间，已经十一点四十。办公区里开始有人起身去吃饭，讨论着中午吃什么。几个年轻同事在聊昨晚玩的游戏，术语飞溅——“符文”、“打野”、“gank”。林晨完全插不上话。他关掉文档页面，揉了揉发酸的眼睛。一个上午，只勉强弄懂了一个组件的一小部分，而周五就要交付可演示版本。

这种进度，别说三天，给他三周都不一定够。

午休时，他没什么胃口，在楼下便利店随便买了个三明治，回到工位边吃边继续看代码。阿杰和其他几个同事结伴出去吃了，办公区空了一半。林晨啃着干巴巴的三明治，眼睛没离开屏幕。他打开项目的其他组件文件，一个个看过去，试图理解整个前端架构。越看心越沉——项目用了不少他完全没接触过的库和模式：ReactRouter做路由、ReactQuery管理服务端状态、TaildCSS写样式……

下午一点半，同事们陆续回来。阿杰看到林晨还在工位，有些惊讶：“晨哥，你没休息啊”？

“嗯，抓紧时间熟悉熟悉”。林晨说。

下午的工作更具体。陈峰在团队群里@了他，让他下午四点前提交一个简单的PR，把AssetCard组件的几个样式问题修复了。这是个小任务，算是让他熟悉git工作流。林晨不敢懈怠，按照公司文档的流程，从拉取最新代码、创建分支、修改、提交、推送到远程，一步步做。提交前他还特意检查了代码格式，确保符合项目的ESLt配置。

三点五十，PR创建成功。他松了口气，以为至少这关过了。十分钟后，陈峰在PR