Element 2 组件源码剖析：Steps 步骤条（上）——组件状态初始化

作为 Element UI 框架中一个重要的导航组件，步骤条（Steps）在引导用户完成复杂任务方面发挥着至关重要的作用。在本篇文章中，我们将深入剖析 Element 2 中 Steps 组件的状态初始化过程，揭示其内部运作机制。

步骤 1：定义组件状态

Steps 组件使用 React 的 useState 钩子管理其内部状态。组件状态包含了三个主要属性：

• active： 当前激活的步骤索引（从 0 开始）。
• processStatus： 表示每个步骤完成状态的数组。
• direction： 步骤条的方向（水平或垂直）。

const [active, setActive] = useState(0);
const [processStatus, setProcessStatus] = useState([]);
const [direction, setDirection] = useState('horizontal');

步骤 2：初始化过程状态

在组件挂载时，会执行以下初始化过程：

• 初始化过程状态： 将 processStatus 初始化为一个与步骤数相同的数组，每个元素都设置为 "wait"。
• 设置初始方向： 根据组件的 props 设置方向。

useEffect(() => {
  const initialProcessStatus = Array(props.steps.length).fill('wait');
  setProcessStatus(initialProcessStatus);
  setDirection(props.direction);
}, []);

步骤 3：更新步骤状态

当组件的 props 发生变化时，将更新组件的状态：

• 步骤数更改： 更新 processStatus 以匹配新的步骤数。
• 方向更改： 更新方向。

useEffect(() => {
  if (prevProps.steps.length !== props.steps.length) {
    const newProcessStatus = Array(props.steps.length).fill('wait');
    setProcessStatus(newProcessStatus);
  }
  if (prevProps.direction !== props.direction) {
    setDirection(props.direction);
  }
}, [props.steps, props.direction]);

步骤 4：处理步骤点击

当用户单击步骤时，将更新组件状态：

• 设置活动步骤： 将 active 更新为单击的步骤索引。
• 更新过程状态： 将单击步骤之前的步骤更新为 "finish"，单击步骤更新为 "process"，单击步骤之后的步骤更新为 "wait"。

const handleStepClick = (index) => {
  if (index !== active) {
    setActive(index);
    const newProcessStatus = processStatus.map((status, i) => {
      if (i < index) {
        return 'finish';
      } else if (i === index) {
        return 'process';
      } else {
        return 'wait';
      }
    });
    setProcessStatus(newProcessStatus);
  }
};

通过深入了解 Steps 组件的状态初始化过程，开发者可以更好地掌握该组件的内部运作机制。掌握这些知识有助于创建更加高效、响应快速的导航体验，提升 Web 应用程序的整体用户体验。