2025.12.22-2025.12.26
写周记的主要目的是复盘我一周的工作内容，确认下周什么可以改进，让经历充分发挥它的价值。
一、业务 & 需求
- 最近新写一个一个页面发现之前封装的组件可以优化，原本打算用最新的组件替换之前的，但是后来评估之后发现不改为好，虽然知道改了之后代码更优美，但是需要回归测试，很麻烦，动一发而牵全身。
这次给我的提醒就是，最好在做一个功能的时候，第一次就规范化代码，不要想着我是不是可以后来优化。 - 最近很多数据展示的场景，需要前端进行数据兜底，在非正常数据情况下，能够去处理让页面展示信息不至于很离谱。用到了||，但是其实这个操作符是有点问题的。
||意思是取第一个真值。对于js而言0，false，‘’，undefined，null，NaN都是假。在0||10 这个场景下就会取10，实际上不对。
??更符合数据展示的场景，因为只会在null,undefined才会判断为false。 - map遍历后的组件，index不要使用自带的index，因为容易出或错，如果开头增加，节点复用有问题，尽量使用后端返回的字段，确保稳定和唯一。
二、设计 & 架构
- modal模态框二次封装问题，一般会有一个open按钮，决定模态框的打开和关闭。
为了让外部组件简洁，我几乎把所有功能都移动到了组件内容，只暴露出去了open这个按钮，打算使用两个open来控制，1.组件内部给定一个open依赖useffect外部的open给他改变，内容取消改变内部的open。2.外部的open。
但是出现了一个问题，外部的open打开之后，状态会一直是打开的状态，所以对于内部依赖useffect来改变，只会在按钮第一次打开有作用。
最后解决办法，让open单一控制源，只通过外部传入，新增一个oncancle方法让弹窗关闭。这样就是完美解决了。
同类问题，可以吧控制按钮和关闭控制按钮的方法放在一起。 - col的xs,sm,md,lg
antd的grid布局比我想象的更强大
1.flex属性，可以非24等分进行划分
2.order自定义顺序问题
3.响应式断点，xs,sm,md,lg。使用不同的设备。
三、技术 & 知识
「Ant Design」
- antd-design的input类型有很多种，就比如说TextArea/Password等等，
2.1.TextArea多行输入，有一个属性autoSize={{ minRows: 5, maxRows: 5 }}，可以控制行数，这样的话右下角没有拖动图标，
2.2.maxLength这个属性可以控制字数，如果超出就会无法输入。
除了可以这样限制字数之外，还可以通过rules={[{ max: 3, message: 'Continue input to exceed 6 chars' }]} rules的规则来进行限制，这个超出还能再输入，提交会有错误提示。
对于一个场景：描述内容有限制字数，可以使用showCount显示字数和maxLength来限制字数。
2.3.shouCount显示已输入和限制的字数
「好用的库」
-
React Syntax Highlighter这个库主要用于进行不同语言的代码高亮
一般我们主要使用language这个属性，告诉是什么语言的
除此之外还有其他功能
2.1 style决定背景颜色
2.2 showLineNumbers 显示行数
2.3 customStyle={{borderRadius: 8,fontSize: 12}} 自定义样式
2.4 如果只想使用这个库，让代码换行之类的，却不希望识别成对应的语言，可以直接添加样式style里面放入字体颜色就可以。
有几个注意事项
1.children注意是字符串
2.hljs vs prism不要混用
场景如下
Prism 前端代码、文档、示例为主，语言定义更严格import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { a11yLight } from 'react-syntax-highlighter/dist/esm/styles/prism';hljs 后台系统、JSON、接口返回，宽松、容错高
import SyntaxHighlighter from 'react-syntax-highlighter';
import { a11yLight } from 'react-syntax-highlighter/dist/esm/styles/hljs';import SyntaxHighlighter from 'react-syntax-highlighter'; import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs'; const Component = () => {const codeString = '(num) => num + 1'; return (<SyntaxHighlighter language="javascript" style={docco}>{codeString} //解析字符串{JSON.stringify(data, null, 2)}。//把javascript对象转变成字符串，缩进2</SyntaxHighlighter>); };
四、工程 & 协作
- 对于原型和设计稿有出入的地方，需要和产品经理进行确认，是否原型后续有修改，不能只关注设计稿。
- 在和后端协作的时候，提前告知对方我做的内容涉及到他的接口和功能提测时间，有问题及时告知对方，让他有时间进行修改。
本周总结
- 本周最大的收获是什么
学会更好的团队协作 - 最大的坑是什么
反复修改前端样式，一开始细心一点。 - 下周想改进的一点
合理安排时间，制定好某个时间段段任务，中途流出时间休息。