React Fiber 架构中的原型模式：为什么这种设计如此重要

class BoardSquare {
  constructor(color, row, file, piece) {
    this.color = color;      // 颜色
    this.row = row;          // 行号
    this.file = file;        // 列号
    this.piece = piece;      // 棋子
  }

  occupySquare(piece) {
    this.piece = piece;
  }

  clearSquare() {
    this.piece = null;
  }
}

// 创建64个格子
const squares = [];
for (let i = 0; i < 8; i++) {
  for (let j = 0; j < 8; j++) {
    const color = (i + j) % 2 === 0 ? 'white' : 'black';
    squares.push(new BoardSquare(color, i, j, null));
  }
}

class BoardSquarePrototype {
  constructor(prototype) {
    this.prototype = prototype;
  }

  clone() {
    return Object.assign(new BoardSquare(), this.prototype);
  }
}

// 创建模板
const whiteSquareTemplate = new BoardSquare('white', null, null, null);
const prototype = new BoardSquarePrototype(whiteSquareTemplate);

// 快速复制
const square1 = prototype.clone();
const square2 = prototype.clone();

const squareTemplate = {
  color: 'white',
  row: 0,
  file: 0,
  piece: null,

  occupySquare(piece) {
    this.piece = piece;
  }
};

// 创建基于原型的对象
const square1 = Object.create(squareTemplate);
const square2 = Object.create(squareTemplate);

function createFiber(tag, pendingProps, key, mode) {
  return {
    tag,
    key,
    elementType: null,
    type: null,
    stateNode: null,
    pendingProps,
    memoizedProps: null,
    // ... 很多其他属性
    alternate: null,  // 关键指针
  };
}

function createWorkInProgressFiber(current) {
  let workInProgress = current.alternate;

  if (workInProgress === null) {
    // 首次创建，使用 Object.assign 快速复制
    workInProgress = Object.assign(new FiberNode(), current);
    workInProgress.alternate = current;
    current.alternate = workInProgress;
  } else {
    // 复用现有对象，只更新必要属性
    workInProgress.pendingProps = current.pendingProps;
    workInProgress.type = current.type;
    // ... 更新其他变化的属性
  }

  return workInProgress;
}

// 创建草案对象
const draft = Object.assign(Object.create(base), base);

// 修改草案
draft.user.name = '新名字';

// 最终生成新状态
const nextState = finalizeDraft(draft);

const createConfig = () => ({
  apiUrl: 'https://api.example.com',
  timeout: 5000,
  retry: 3,
  headers: { 'Content-Type': 'application/json' }
});

// 每次都要重新初始化所有属性
const configs = Array(100).fill().map(() => createConfig());

class ConfigFactory {
  constructor(template) {
    this.template = template;
  }

  clone(overrides = {}) {
    return Object.assign({}, this.template, overrides);
  }
}

const baseConfig = {
  apiUrl: 'https://api.example.com',
  timeout: 5000
};

const configFactory = new ConfigFactory(baseConfig);

// 快速创建
const config1 = configFactory.clone();
const config2 = configFactory.clone();

// 创建变体
const devConfig = configFactory.clone({ apiUrl: 'http://localhost:3000' });

const template = {
  user: { name: 'Alice' },
  tags: ['js', 'react']
};

const copy1 = Object.assign({}, template);
const copy2 = Object.assign({}, template);

// 问题：嵌套对象是共享的
copy1.user.name = 'Bob';
console.log(template.user.name);  // 也变成了 'Bob'

// 需要完全独立时使用深拷贝
import _ from 'lodash';

class ConfigFactory {
  constructor(template) {
    this.template = template;
  }

  // 浅拷贝（性能好）
  clone() {
    return Object.assign({}, this.template);
  }

  // 深拷贝（完全独立）
  deepClone() {
    return _.cloneDeep(this.template);
  }
}

class ObjectFactory {
  constructor(template) {
    this.template = template;
  }

  // 创建新对象
  create(overrides = {}) {
    return Object.assign({}, this.template, overrides);
  }

  // 批量创建
  createBatch(count, overridesFn) {
    return Array(count)
      .fill()
      .map((_, i) => this.create(overridesFn?.(i) || {}));
  }

  // 更新模板
  updateTemplate(updates) {
    this.template = Object.assign({}, this.template, updates);
  }
}

// 使用示例
const userFactory = new ObjectFactory({
  id: null,
  name: '',
  role: 'user',
  permissions: []
});

// 批量创建用户
const users = userFactory.createBatch(1000, (i) => ({
  id: i,
  name: `用户${i}`
}));