⚠️温馨提示： 文档中包含【1个】暂不支持的区域，请通过搜索关键字【暂不支持的文档区域】进行后续处理

react-source-notes.zip

很多同学可能第一次来，我分享了那摩多干货公开课，不允许你不知道！都在这里，需要 文档和配套视频找咨询老师 领取~

【飞书文档】备战金九银十，进阶大前端，涨薪全突破！

【飞书文档】项目没有难点亮点？字节大佬带你前端项目弯道超车

【飞书文档】字节大佬带你弯道超车，深入剖析大厂面试真题~

【飞书文档】面试被算法干吐了？字节大佬带你突破极限，冲击 30K+ 必掌握算法与 WebAssembly 技术

【飞书文档】高级前端专家如何做性能优化？特邀字节大佬细数飞书应用优化细节【超详细内培版】

【飞书文档】高级前端专家如何做项目架构与工程化设计？ 特邀字节大佬细数字节开源项目架构细节【超详细内培版】

【飞书文档】小小微前端，轻松拿捏，特邀字节大佬开讲微前端架构与源码剖析【内部培训版】 35K+ 同学必看

【飞书文档】高级前端专家如何做性能优化？特邀字节大佬细数飞书应用优化细节（二）【内部培训版】

【飞书文档】前端破局 AI 应用开发，特邀字节大佬分享字节系 AI 场景落地应用与 AI 引擎编排流程

  1. 自顶向下粗略了解思想：整体项目架构
  2. 关键包与职责：react、react-dom、react-reconciler、scheduler
  3. 演进过程：expirationTime -> lanes，stack reconciler -> fiber
  4. 数据结构与算法： 小根堆 、链表、栈、树，调和算法、位运算、dfs

还是要从 DOM 事件驱动讲起

早期没有诸如 React、Vue 这类库时，我们都采用事件驱动的实现方式开发功能，即：用户触发事件，修改变量，而后操作 dom 将变量值反映到页面上。

事件驱动

假设我们有一个按钮，点击按钮后会在页面上添加一个新的段落。

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>DOM 操作示例</title>
</head>
<body>
  <button id="add-paragraph">添加段落</button>
  <div id="content"></div>

  <script src="script.js"></script>
</body>
</html>

JavaScript (script.js):

document.getElementById('add-paragraph').addEventListener('click', function() {
  const newParagraph = document.createElement('p');
  newParagraph.textContent = '这是一个新段落。';
  document.getElementById('content').appendChild(newParagraph);
});

在这个例子中，我们直接通过 DOM API 操作页面元素。这种方式在项目规模较小、页面逻辑较简单时比较方便，但当页面变得复杂时，手动管理 DOM 会变得繁琐且容易出错。

状态驱动

同样的功能，我们使用 React 来实现。

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

function App() {
  const [paragraphs, setParagraphs] = useState([]);

  const addParagraph = () => {
    setParagraphs([...paragraphs, '这是一个新段落。']);
  };

  return (
    <div>
      <button onClick={addParagraph}>添加段落</button>
      <div id="content">
        {paragraphs.map((text, index) => (
          <p key={index}>{text}</p>
        ))}
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

在这个例子中，我们使用 React 来构建 UI。React 使用组件来管理页面的状态和渲染逻辑。

区别与优势对比

  1. 代码结构和可维护性 ：

    • 事件驱动操作 DOM ：代码直接操作 DOM，逻辑和视图混杂在一起，随着功能增加，代码容易变得混乱，难以维护。
    • React ：通过组件化的方式将逻辑和视图分离，代码结构清晰，易于维护和扩展。

  2. 状态管理 ：

    • 事件驱动操作 DOM ：状态管理是手动的，需要跟踪 DOM 元素的状态变化，容易出错。
    • React ：React 的状态管理和虚拟 DOM 机制使得状态管理更加简单和可靠，React 会自动处理 DOM 的更新。

  3. 性能 ：

    • 事件驱动操作 DOM ：频繁操作实际 DOM 会导致性能问题，尤其是在复杂的应用中。
    • React ：React 使用虚拟 DOM 优化性能，减少实际 DOM 操作的次数，提高应用性能。

  4. 开发效率 ：

    • 事件驱动操作 DOM ：开发效率较低，特别是在处理复杂交互时。
    • React ：提供了大量开箱即用的工具和生态系统（如 hooks、context 等），提高开发效率。

手写类 React 框架

从操作 dom 我们发现，开发过程最需要关注的有以下几点：数值、事件、dom 操作，并且 dom 操作的写法耦合性极高，我们要尝试将模块分离，从而提高代码可读性与团队协作开发效率。

定义状态值与操作方法

let count = 0;
let prevCount = 0;

const setCount = (c) => {
  count = c;
};

diff

const reconcile = () => {
  if (count !== prevCount) {
    prevCount = count;

    commitWork();
  }
};

优先级调度（scheduler workLoop）

const workLoop = () => {
  requestIdleCallback(() => {
    workLoop();
  });
};

workLoop();

循环调和（reconciler workLoop）


const workLoop = () => {
  requestIdleCallback(() => {
    reconcile();
    workLoop();
  });
};

workLoop();

提交 dom 更改

const rootDom = document.querySelector("#root");

const commitWork = () => {
  rootDom.innerHTML = count;
};

commitWork();

事件监听，更改状态值

window.addEventListener(
  "click",
  () => {
    setCount(count + 1);
  },
  false
);

我作为 React 作者，会考虑哪些核心设计要素

React 框架通过引入一系列核心概念和机制，将开发从传统的事件驱动模式转变为状态驱动模式。这些核心概念和机制包括：

React 的设计

组件化开发

React 推崇组件化开发，将UI分解成独立、可重用的组件，每个组件负责管理自己的状态和渲染逻辑。组件化开发使得代码更易于维护、测试和复用。

状态管理

React 引入了 state 和 props 的概念来管理组件的状态和数据流。

  • State ：是组件内部的状态，通过 useState 钩子（在函数组件中）或 this.state （在类组件中）来定义。状态的变化会触发组件重新渲染。
  • Props ：是从父组件传递到子组件的数据，子组件通过 props 来接收和使用这些数据。 props 是只读的，不能在子组件内部修改。

虚拟 DOM (Virtual DOM)

React 使用虚拟 DOM 来提高性能。虚拟 DOM 是 React 的一种抽象表示，它在内存中维护一个虚拟树结构，与实际的 DOM 进行对比。当状态变化时，React 会计算出最小的变更集，并只对需要更新的部分进行实际的 DOM 操作，从而减少了频繁的 DOM 操作，提升了性能。

声明式编程

React 提倡声明式编程，开发者只需声明组件的最终状态，React 会根据状态的变化自动更新 UI。这与传统的命令式编程不同，命令式编程需要开发者明确地指定每一步操作过程。

Hooks

React 在 16.8 版本引入了 Hooks，提供了一种在函数组件中使用状态和其他 React 特性的方式。常用的 Hooks 包括：

  • useState ：管理组件的状态。
  • useEffect ：处理副作用，如数据获取、订阅、手动 DOM 操作等。
  • useContext ：共享组件树中的全局数据。

调和算法 (Reconciliation)

React 的调和算法负责计算出组件树中的差异，并根据差异更新 DOM。这个过程称为调和。React 会使用一种高效的算法来比较虚拟 DOM 树的前后变化，并应用最小的操作来更新实际 DOM。

JSX

JSX 是一种语法扩展，允许开发者在 JavaScript 中直接编写类似 HTML 的代码，便于描述组件的结构和内容。JSX 最终会被编译成 React 的 createElement 调用，创建虚拟 DOM 元素。

源码实现

了解 React 从事件驱动到状态驱动转变的核心源码，可以从几个关键部分进行探讨：组件化开发、状态管理、虚拟 DOM、单向数据流、声明式编程、Hooks、调和算法和 JSX。以下是这些设计对应的核心源码及其详细解释。

组件化开发

源码位置： **React.Component** ** 和 ** React.PureComponent

  • React.Component ：
class Component {
  constructor(props, context, updater) {
    this.props = props;
    this.context = context;
    this.refs = emptyObject;
    this.updater = updater || ReactNoopUpdateQueue;
    this.state = null;
    // Initialize the state
    const initialState = this.state;
    this.state = initialState !== null && initialState !== undefined ? initialState : null;
  }

  // Method to update state
  setState(partialState, callback) {
    this.updater.enqueueSetState(this, partialState, callback, 'setState');
  }

  // Force update
  forceUpdate(callback) {
    this.updater.enqueueForceUpdate(this, callback, 'forceUpdate');
  }
}

状态管理

源码位置： **React.useState** ** 和 ** this.setState

  • useState ：
function useState(initialState) {
  return ReactCurrentDispatcher.current.useState(initialState);
}
  • setState ：
setState(partialState, callback) {
  this.updater.enqueueSetState(this, partialState, callback, 'setState');
}

虚拟 DOM (Virtual DOM)

源码位置： **React.createElement** ** 和 ** ReactDOM.render

  • createElement ：
function createElement(type, config, children) {
  const props = {};
  // Handle props
  for (const propName in config) {
    props[propName] = config[propName];
  }
  // Handle children
  props.children = children;
  return {
    type,
    props,
  };
}
  • render ：
function render(element, container) {
  const root = createContainer(container, false);
  updateContainer(element, root, null, null);
}

声明式编程

源码位置：React 的声明式编程体现在组件的渲染逻辑中

  • 声明式渲染 ：
function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Hooks

源码位置： **React.useState** **, ** **React.useEffect** , 等

  • useState ：
function useState(initialState) {
  return ReactCurrentDispatcher.current.useState(initialState);
}
  • useEffect ：
function useEffect(create, deps) {
  return ReactCurrentDispatcher.current.useEffect(create, deps);
}

调和算法 (Reconciliation)

源码位置： ReactFiberReconciler

  • 调和算法 ：
function reconcileChildFibers(returnFiber, currentFirstChild, newChild, lanes) {
  // Core reconciliation logic
}

JSX

源码位置：JSX 编译为 React.createElement 调用

  • JSX 编译 ：
const element = <div className="app">Hello World</div>;
// 编译后
const element = React.createElement('div', { className: 'app' }, 'Hello World');

一般需要 babel、esbuild 等编译工具，实现 jsx 的编译工作。

始终抓住一个要点，react 代码运行时只存在 函数 与 对象 ！不是函数和对象的内容，都是需要在编译时转换掉的。

详细解释

  1. 组件化开发 ：

React.Component 和 React.PureComponent 是所有 React 组件的基类。通过 class 关键字继承这些基类，可以创建有状态的组件。 Component 类中定义了 props 、 context 、 refs 和 state 等属性，以及 setState 和 forceUpdate 方法，用于管理组件的状态和强制更新。

  1. 状态管理 ：

useState 是 React 的一个 Hook，用于在函数组件中添加状态。 setState 方法在类组件中使用，用于更新组件的状态。这些方法的实现依赖于内部的 ReactCurrentDispatcher ，它负责在组件渲染期间调度和管理状态。

  1. 虚拟 DOM ：

React.createElement 是创建虚拟 DOM 元素的核心函数。每次调用 createElement 都会返回一个包含 type 和 props 的对象，代表一个虚拟 DOM 节点。 ReactDOM.render 将虚拟 DOM 渲染到实际 DOM 中，利用调和算法高效更新页面。

  1. 单向数据流 ：

React 的单向数据流通过 props 在组件之间传递数据。父组件通过 props 将数据传递给子组件，子组件通过回调函数将事件传递回父组件。这种方式使得数据流向清晰、易于调试。

  1. 声明式编程 ：

React 通过组件的 render 方法或函数组件的返回值来描述 UI 应该呈现的状态。开发者只需声明组件在不同状态下应该渲染的 UI，React 会自动管理 DOM 更新。

  1. Hooks ：

Hooks 是函数组件中使用状态和其他 React 特性的机制。 useState 用于添加状态， useEffect 用于处理副作用。Hooks 依赖于内部的 ReactCurrentDispatcher 来管理状态和副作用。

  1. 调和算法 ：

调和算法是 React 更新虚拟 DOM 的核心逻辑，负责比较新旧虚拟 DOM 树的差异，并计算最小的变更集来更新实际 DOM。 reconcileChildFibers 是调和算法的关键函数。

  1. JSX ：

JSX 是一种语法扩展，允许在 JavaScript 中编写类似 HTML 的代码。JSX 会被编译成 React.createElement 调用，从而创建虚拟 DOM 元素。

通过这些设计和对应的源码，React 实现了从事件驱动到状态驱动的转变，使开发者能够更高效地管理组件状态、优化性能、提高开发效率。

React18 核心源码剖析

React 执行流程我们拆解为两部分，分别为：创建与更新。

创建阶段，主要完成的工作包含：容器创建、元素对应 Fiber 创建、更新队列初始化等操作。

更新阶段，主要包含：状态更新触发任务入队、scheduler 调度、重新构建 fiber、完成 fiber 到元素映射更新视图

工程架构

React 采用 monorepo 架构，几个核心包如下：

  • react
  • react-dom
  • react-reconciler
  • scheduler
  • react-noop-renderer

创建

完整执行顺序（方法名）及核心文件：

  1. react-dom

    1. ReactDOM.createRoot
    2. createRootImpl

  2. react-reconciler

    1. createContainer
    2. createFiberRoot
    3. createHostRootFiber
    4. createFiber
    5. initializeUpdateQueue

  3. react-dom

    1. ReactDOMRoot.prototype.render
    2. markContainerAsRoot
    3. updateContainer
    4. ... 此处省略，我们在更新处探讨

更新

上文提到，react 应用创建会先初始化所需数据，包含 fiberRoot、rootFiber、updateQueue 等，然后调用 render 方法，我们可以看到在 render 时，却是调用了与状态更新时所调用的同一方法——updateContainer，这正是其设计的精妙之处。

ReactDOMHydrationRoot.prototype.render = ReactDOMRoot.prototype.render = function(
  children: ReactNodeList,
): void {
  const root = this._internalRoot;
  if (root === null) {
    throw new Error('Cannot update an unmounted root.');
  }

  // ...
  updateContainer(children, root, null, null);
};

完整执行顺序（方法名）及核心文件：

  • react-reconciler

    • updateContainer
    • requestUpdateLane
    • enqueueUpdate
    • scheduleUpdateOnFiber

  • scheduler

    • unstable_scheduleCallback
    • workloop

  • react-reconciler

    • performConcurrentWorkOnRoot

    • renderRootConcurrent

    • workLoop

    • performUnitOfWork

      • beginWork
      • completeWork

    • commitRoot

妙码学院全网独家项目实战矩阵

所有项目实战，均完全 从零到一手写 ， 纯原创 ，项目架构与编码规范真一线大厂级。

  • 微前端在分拆原子应用场景下的落地与实践

  • 协同编辑器从零到一架构实现

  • 推动团队基建落地

  • 数字孪生平台整体架构设计

  • 低代码平台设计与实现

    • 编排引擎
    • 流程引擎
    • 编辑器
    • 代码执行器与 JavaScript 沙箱

  • 用户行为分析 SDK 及监控可视化整体实现

  • 可视化渲染引擎设计与实现

  • 基于 RAG / Agent 前端 AI 应用流程编排平台

简历优化（30K+ 简历样板）

技能描述

  • 熟练掌握 HTML、CSS、JavaScript、Typescript 以及 OOP、FP、 AOP 等设计思想

  • 掌握样式体系构建与落地，对 css 预编译、css in js、module css 以及 utility-first CSS 有深入研究，并从零改良过样式体系以支持 SSR、SSG

  • 熟悉 React、Vue 相关技术栈，熟悉 React、Vue 及相关技术框架的实现原理

  • 掌握构建工具 Webpack、Vite 等，掌握编译工具 Babel，并深入理解其原理，并参与 Rspack 构建

  • 丰富的数据可视化经验，熟悉 Canvas、svg 开发范式，理解 Echarts、Antv 原理，能根据业务需求基于 d3、zrender 开发自定义渲染引擎

  • 丰富的跨端开发经验，熟练使用 Taro、Flutter、React-Native 开发跨端应用，对构建 hybird App 有丰富经验，深入理解跨端开发编译原理

  • 基于 Node.js 开发脚手架、打包构建优化工具及中间件服务

  • 掌握常用设计模式、算法与安全知识，追求开发高质量、高可维护性代码，追求极致产品体验

  • 团队管理经验，并在项目架构设计与性能优化方面具有丰富经验

  • 算法与编程技术

    • 精通各种算法题的分类及解决方法，包括排序与查找、数据结构、动态规划、贪心算法、回溯算法、分治算法、图论算法、数学算法等。
    • 重点掌握动态规划的基本概念、解题步骤和经典题目。

  • 3D 数字孪生平台开发经验

    • 熟练使用 WebGL 和 WebAssembly 技术，开发高效的 3D 渲染引擎。
    • 精通正射影像和倾斜摄影技术，具备 Tile 和模型（包括白膜和精模）的处理经验，能够使用 Blender 进行模型制作。
    • 熟悉材质、光效和粒子系统的实现与优化。

  • 全面性能优化能力

    • 具备打包构建优化经验，熟练使用 Webpack 进行模块打包，掌握 chunk、treeshaking、happypack、cache-loader 等优化技巧，并使用 Webpack Module Federation 进行模块联邦管理。
    • 精通资源优化，能够有效进行图片、字体压缩，管理请求队列，并通过 OSS 和 CDN 提升资源加载速度。
    • 具有应用性能优化经验，包括数据结构优化和应用模块更新。
    • 深入了解缓存机制，熟悉强缓存（Expiration、Cache-Control）、协商缓存（Etag）和策略缓存（Service-Worker）的配置与管理。

项目描述

这个环节至关重要，很多同学不重视，简历随便写一写就开始投递了，结果投出去几百份可能一家公司面试都没有，结果就在怀疑前端行情出问题了

STAR 法则：

  • 遇到了什么问题 question，需求
  • 怎么评估解决方案，方案对比，方案落地 react 状态管理（redux、mobx、jotai、recoil）Vue3 -> Pinia
  • 具体方案落地
  • 结果反思，细节优化思考

大家先看这段描述：

技术栈：Java、Vue2、echarts、WEui、BaiduMap、JavaScript 、HTTP数据库：MySQL管理工具：SVN

责任描述：

1）产品前端研发负责人，主要负责整体样式沟通，样式调配实现；门户、管理平台、移动端、智端、可视化等前端内容实现；

2）实现组织管理、人员管理、党员关系转接、待办通知、绩效考核（复杂功能算法实现）、发展党员（25个流程）、可视化等主体功能，兼容性优化、适配1920*1080屏幕以及响应式布局实现；

3）相关功能开发，包含前后端、数据库；

4）门户框架搭建、门户整体设计、后端接口、门户前端 UI 实现等；

5）微信小程序框架搭建、小程序页面设计及开发、知识图谱技术预演；

6 ）项目经理工作辅助，包含需求沟通、UI设计沟通、交付材料项目经历整理、前端代码质量管理、部分功能设计。

深度优化一下

工作内容和成果

  • 【 架构设计 】参与智慧管理平台整体架构设计、技术选型与方案评审，担任全栈开发，完成相关核心模块
  • 【 企微开发 】对接企业微信生态，基于企微 SDK 完成平台支付、消息推送、机器人等功能开发
  • 【 可视化 】主导完成平台可视化渲染引擎（可视化图表的组件，数据协议）设计与开发，基于 echarts （svgRenderer、canvasRenderer 一千万行数据的表格渲染【不能使用 虚拟滚动 】 canvas table，chunk）封装业务图表库，服务于平台可视化场景
  • 【 地图开发 】使用百度地图 SDK，封装业务地图渲染器（MapRenderer），包含：地图撒点、地区数据下钻等功能
  • 【 小程序与App 】基于 uniapp 实现智慧党建用户端多端开发落地，产物编译为 H5、微信小程序两端应用
  • 【 团队基建 】推进团队业务组件库、图表库与基础库沉淀，完成 10+ 个业务组件沉淀，以此提升了团队协同开发效率
  • 【 优化 】设计产品响应式系统，基于 media query 设计响应式端点规则，适配不同端应用的展示
  • 【 自研 OA 打通 】...

STAR

【技术栈】

  • Java、Vue2、ECharts、WEui、BaiduMap、JavaScript、HTTP
  • 数据库 ：MySQL
  • 管理工具 ：SVN

【产品前端研发负责人】

  • 情境 (Situation) ：担任产品前端研发负责人，负责门户、管理平台、移动端、智端、可视化等前端内容的实现。
  • 任务 (Task) ：主要任务是与设计团队沟通，调配和实现整体样式，确保产品界面的一致性和用户体验。
  • 行动 (Action) ：我协调设计与开发团队，定期召开样式沟通会，亲自进行样式的调配与实现，并负责不同平台和设备的前端内容开发。
  • 结果 (Result) ：成功实现了多个平台的前端开发工作，提升了产品的用户体验和一致性，获得了团队和用户的高度评价。

【实现复杂功能及优化】

  • 情境 (Situation) ：项目需要实现复杂功能算法和大规模功能模块，包括组织管理、人员管理、党员关系转接、待办通知、绩效考核、发展党员（25个流程）和可视化功能。
  • 任务 (Task) ：负责上述复杂功能的实现，并优化其兼容性和响应式布局。
  • 行动 (Action) ：通过设计和实现复杂算法，确保各模块的功能性；进行兼容性优化，使系统适配1920*1080屏幕和响应式布局。
  • 结果 (Result) ：成功实现并优化了所有复杂功能，系统在不同设备和分辨率下均表现良好，提高了用户操作的流畅度和满意度。

【全面功能开发】

  • 情境 (Situation) ：需要进行前后端和数据库的全面开发，确保系统各功能模块的无缝集成。
  • 任务 (Task) ：开发和实现相关功能，包括前端UI、后端接口和数据库交互。
  • 行动 (Action) ：采用Java、Vue2等技术，开发并调试各功能模块，与后端团队密切合作，确保接口的准确性和数据的一致性。
  • 结果 (Result) ：成功完成了所有功能模块的开发和集成，系统运行稳定，性能优异，受到了客户的好评。

【微信小程序开发与知识图谱预演】

  • 情境 (Situation) ：项目需要开发微信小程序，并进行知识图谱技术的预演。
  • 任务 (Task) ：负责小程序框架的搭建、页面设计及开发，同时进行知识图谱的技术预演。
  • 行动 (Action) ：使用WEui、JavaScript等技术，设计并开发小程序页面，进行知识图谱的技术预演和验证。
  • 结果 (Result) ：成功搭建了微信小程序框架，完成了页面设计和开发工作，知识图谱技术预演顺利，通过了技术验证。

【项目经理工作辅助】

  • 情境 (Situation) ：在项目中辅助项目经理，确保项目需求沟通顺畅，UI设计协调到位，交付材料齐全，前端代码质量高。
  • 任务 (Task) ：辅助项目经理进行需求沟通、UI设计沟通、交付材料整理、前端代码质量管理以及部分功能设计。
  • 行动 (Action) ：积极参与需求和UI设计的沟通，整理和管理项目交付材料，进行代码审查和质量管理，并参与功能设计。
  • 结果 (Result) ：成功辅助项目经理完成了项目的各项工作，提高了项目的开发效率和交付质量，确保了项目的顺利进行。

其实还不够，这些项目才是求职香饽饽

你可能不具备这些项目的实战经验，很多同学写了很多年管理系统，简单增删改查项目，如果不跳出这个圈子，很难在薪资上有非常大的突破！

  • 大厂 UI 组件库（Vue3）整体设计与开发实践(monorepo 架构)

  • 大厂业务 Hooks 库（React 18）整体设计与开发实践(从零到一的架构、规范流程)

  • 企业级脚手架工具开发实践

  • 企业级文档编辑器飞书文档开发实践

  • 前端性能、异常与行为监控

  • 3D 可视化数字孪生低代码实战 💥

    • 基于 cesium（arcGis、超图） 方案的 WebGIS 开发实践
    • 基于 openlayer、mapbox 开发
    • 基于 WebGL 3D 可视化开发实践

年包 50W+ 薪资长线规划

核心要素

  1. 全面的技术储备

    1. Vue 经验、React 经验，Vue3 + Typescript，React18（Hooks、Concurrent）【框架基础】
    2. 框架原理，React 生态库原理（React-Router、Redux）、Vue 生态库原理
    3. 工程化（构建工具：Webpack、Vite、Rspack、ESBuild、swc）
    4. CI/CD 自动化，自动化构建、自动化部署
    5. 基建能力（Node、命令行工具开发 Cli），UI 库、图表库、工具库
    6. 业务方面（管理系统、图表类），衍生 -> 可视化、编辑器、云表格、低代码、SaaS 产品、数字孪生、三维可视化

  2. 至少参加过两个以上大型项目，并主导过一个复杂项目

    1. 管理系统，（项目搭建、方案、技术栈、CI/CD 等等）
    2. 可视化、编辑器、云表格、低代码、SaaS 产品、数字孪生、三维可视化

  3. 面试表现好

    1. 个人介绍【 打个草稿 】，基本信息、技术栈、项目重难点

    2. STAR：

      • 遇到了什么问题 question，需求
      • 怎么评估解决方案，方案对比，方案落地 react 状态管理（redux、mobx、jotai、recoil）Vue3 -> Pinia
      • 方案落地
      • 反思，优化
    • 面试过程中，重点去复习只是重难点（v8 内存管理、Promise A+ 规范、事件循环、this、面向对象编程原型）
    • 技术储备，由你的项目经验体验，技术怎样在你的项目中落地的

  4. 学历

    1. 大专，尽快考一个本科证（年限去掉）
    2. 民办
    3. 内推，学历问题、工作经历的问题

补足短板

  • 项目简单，管理后台一做就是大半年，天天 CRUD

    • 看开源项目（react-hook-form ts 类型、hook 处理、状态管理、架构 Provider，keyPath）
    • 找一些不错的项目练手
    • 拿好的项目，学习完放在简历里， 可视化、编辑器、云表格、低代码、SaaS 产品、数字孪生、三维可视化
    • 1.自研：15K， 2.外包：20K ，这个火坑， 灰（供需决定）

  • 技术栈掌握不深不广，只会用 Vue2 （Vue3 + Typescript），React18（React stack reconciler）

  • 架构、方案设计没碰过

    • React，create-react-app、umi，没有真正从零到一去设计初始化过一个项目
    • Vue，Vue CLI，Vite/Webpack。Vue2 CLI 创出来项目 1. webpack、2.vite

  • 没有专精的技能或业务

    • 自驱 （假定自己是 Leader），项目的赢利点、商业价值【 可视化、编辑器、白板、团队基建、AI产品 】
    • 与生俱来有些东西，好奇心、自驱力、清晰规划
    • 我：管理平台，HPE（官网、后台管理），云表格（维格表、飞书云表格）、云编辑器（CKEditor 老【html string】）（语雀、【石墨文档】）

妙码学院——全程陪跑、督学、内推

⚠️ 暂不支持的文档区域，【文档小组件】

  • 跨端开发 Taro（Taro 编译器 compiler、运行时 runtime）、uniapp
  • 协同编辑器（文档类、画板类）wangEditor、CKEditor
  • 团队基建工程（UI 库、图表库、Cli -> 产生产物 npm 包）
  • 3D 可视化数字孪生 bigdata
  • 低代码平台

课程体系 2.0 升级，除了基础知识夯实，融入了更多项目实战内容，包含：

  • 企业级脚手架工具开发实践

  • 企业级文档编辑器飞书文档开发实践

  • 大厂 UI 组件库（Vue3）整体设计与开发实践

  • 大厂业务 Hooks 库（React 18）整体设计与开发实践

  • 埋点与数据监控平台实战

  • 3D 可视化数字孪生实战 💥

    • 基于 cesium 方案的 WebGIS 开发实践
    • 基于 WebGL 3D 可视化开发实践

不同阶段对前端人的硬性要求

以下是对您提供的内容进行权威和专业化改写的建议：

1~3年

在此阶段，重点在于评估个人的基础知识和热情。对前端基础、计算机原理、网络通信和算法等领域的要求较高。由于在此阶段难以评估业务深度，因此更多关注基础知识的掌握程度。

  • 关键在于通过学术教育或网络资源加强基础知识；
  • 在简历中以多种方式展示对前端的热情，展现个人潜力；
  • 积极探索前沿技术，关注国内外技术动态；
  • 尝试开发小型项目或参与社区开源项目；
  • 建立技术博客，以输出促进知识吸收。

3~5年

此阶段通常是向成为独立工程师发展的关键时期，避免重复使用有限的经验。

  • 关注社区中关于进阶的资料和路线，强化基础知识；

  • 深入掌握常用框架的高级用法，探索其原理；

  • 在业务开发中不仅完成功能，还需考虑项目结构设计、封装基础工具、设计和开发基础组件；

  • 思考提高团队效率的方法，例如：

    • 集成代码检验和风格统一插件（如 eslint、stylelint、prettier、spellcheck）；
    • 从工程化角度提高本地开发效率，优化webpack构建，探索esbuild、vite等工具；
    • 对于多项目开发，整理差异和统一部分，建立内部脚手架以减少重复工作；
    • 尝试搭建CI/CD平台，维护公司内部的通用npm包；
    • 培养软技能，如沟通协作，协调各角色共同推进目标。

5年以上

进入此阶段，可能朝技术专家或管理方向发展。期望您能够独立负责高复杂度项目，突破关键技术难题。

  • 负责技术调研，关注行业趋势，选择最优技术方案，具备决策能力；
  • 拥有丰富的技术经验和技术储备，能够解决遇到的困难，并有自己的方法论；
  • 协助或主导业务目标制定，合理推动项目达成预期效果；
  • 是否具有团队领导经验，能够协调跨团队项目，处理团队成员情绪问题，解决技能分布不平衡等问题；
  • 打造技术氛围，促进团队共同成长。

职业规划指导

评论区选取三位同学互动，其他同学也可以联系咨询老师，文字方式提供辅导解答。

【未知组件reminder】