【每周工作随笔｜第 4 周】

2025.1.12-2025.1.16

写周记的主要目的是复盘我一周的工作内容，确认下周什么可以改进，让经历充分发挥它的价值。

一、业务 & 需求

1. lodaing
   对于一些数据的回显，如果直接展示数据，会很生硬，所以使用 loading在数据返回前做一个过渡，如果loading就展示加载的图标。

二、设计 & 架构

三、技术 & 知识

「react」

1. forwardRef作用：让父组件拿到子组件内部的某个ref。

   //子组件
   expport defalut forwardRef(function Input(props,ref){
       return <input ref={ref} />;
   })
   //父组件
   const ref = useRef<HTMLInputElement>(null);
   ref.current?.focus(); // 能直接操作 input
   <Input ref={ref} />;
   

2. useImperativeHandle作用：父组件只能使用子组件暴露出去的方法

   const MyInput = React.forwardRef((props, ref) => {
     const inputRef = React.useRef<HTMLInputElement>(null);
   
     React.useImperativeHandle(ref, () => ({
       focus() {
         inputRef.current?.focus();
       },
       clear() {
         if (inputRef.current) {
           inputRef.current.value = '';
         }
       },
     }));
   
     return <input ref={inputRef} />;
   });
   inputRef.current?.focus();
   inputRef.current?.clear();
   <MyInput ref={inputRef} />;
   

3. 如何让文本换行

   white-space: normal;
   /* 文本可换行 */
   word-break: break-word;
   /* 长单词或连续字符换行 */
   //同样类似的场景，文本溢出，省略号
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   

四、工程 & 协作

无

本周总结

这周的工作都是重复的任务，几乎都是调用之前的知识，没有新的输入。