基隆市网站建设_网站建设公司_加载速度优化_seo优化

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;
   

四、工程 & 协作

无

本周总结

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