重生之我上班学React----360档案篇。

我入职某科技公司快一年了。偏科（后端，数据库）。前端薄弱就算了，之前还一直学的就是Vue那一套。现在公司的前端项目是一个以React为主，掺杂了各种框架的项目。一个字：重。

但是没办法，任务给你了就得完成。写文章就当记笔记了，再巩固一下知识点。虽然现在AI很方便，可以协助你完成工作任务，但是我认为有时间了还是要学习一下的，不能让AI把你脑袋锈住了。那样离了AI，你讲都讲不清楚。活到老，学到老。话不多说，开始。

效果展示：

选择员工查看自定义档案信息（模块可扩展）左侧顶部基本信息固定，下面的进度条会根据右侧的滚动区域进行变化，右侧区域滚动后也会有一个放大的效果，css挺多的，就没啥好说了。重点关注框架本身吧。

这里就是一个包含了多个功能的应用。不同的应用，类型不同，展示的效果就不同，像这个的类型就是定制开发的一个360档案类型。这一块来说，系统包容度还是挺高的，可以自定义开发页面。

设计思路

将整个功能分为三个组件模块。

父组件：负责提供主要的数据。

侧边栏组件：页面看到的左侧进度条部分。

内容区组件：右侧板块内容。

涉及知识点

MobX响应式状态容器

什么是响应式状态容器，说简单点就是：把一个普通class类加一句**makeAutoObservable(this)**那么这个类就变成了MobX响应式，所有用到这个类的组件都会随着类的变化而动态刷新，当然组件要开启observer监听。现代React是以函数式组件进行开发的，只需要用ovserver高阶函数把你的组件函数进行包装即可，这样组件函数就是一个响应式的了。Mobx的最大优势在于，跨组件式传递参数。不用一个一个props。组件会自动更新。

开启observer并引入mobx管理的数据源。

TypeScript 复制代码

const Display360: React.FC = observer(() => {
  const appStore = useContext(AppStoreContext);

useState和useEffect以及useRef

useState组件状态变量：和普通的区别就是这个变量变了，组件会触发重新渲染，和UI保持一致的更新。

**useEffect副作用函数（**执行额外操作的函数）。比如监听的某一个变量的值变化，它会跟着执行一段逻辑。主要分几个情况：

javascript 复制代码

// 1. 无依赖数组 - 每次渲染都执行
useEffect(() => {
  console.log('每次渲染都会执行');
});

// 2. 空依赖数组 [] - 只执行一次（挂载时）
useEffect(() => {
  console.log('只在组件挂载时执行一次');
}, []);

// 3. 有依赖项 - 依赖变化时执行
useEffect(() => {
  console.log('count 变化时执行');
}, [count]);

useRef 创建一个可变的引用对象。两大用途：

1.保存dom元素。注意不是存储了整个组件的DOM，而是那个DOM的ref使用了useRef，那么这个useRef就保存了这个DOM的信息。

javascript 复制代码

function InputFocus() {
  const inputRef = useRef(null);

  const focusInput = () => {
    // 直接操作 DOM 元素
    inputRef.current.focus();
    inputRef.current.value = '被聚焦了';
  };

  return (
    <div>
      {/* 把 ref 挂载到 DOM 元素上 */}
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>聚焦输入框</button>
    </div>
  );
}

2.**存储可变值，**但是不会触发渲染

javascript 复制代码

function Timer() {
  const [count, setCount] = useState(0);
  const intervalRef = useRef(null);

  const startTimer = () => {
    // 存储定时器 ID，方便后续清除
    intervalRef.current = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);
  };

  const stopTimer = () => {
    clearInterval(intervalRef.current);
    intervalRef.current = null;
  };

  return (
    <div>
      <div>计数: {count}</div>
      <button onClick={startTimer}>开始</button>
      <button onClick={stopTimer}>停止</button>
    </div>
  );
}