金九银十，带你复盘大厂常问的项目难点（四）

function flattenTreeData(treeData = [], parent = null) {
  const nodes = [];
  treeData.forEach((node) => {
    const newNode = {
      ...node,
      parent,
    };
    nodes.push(newNode);
    if (newNode.children) {
      nodes.push(...flattenTreeData(newNode.children, newNode));
    }
  });
  return nodes;
}

function flattenTreeData(treeData = [], parent = null) {
  const nodes = [];
  treeData.forEach((node) => {
    const newNode = {
      ...node,
      parent,
    };
    nodes.push(newNode);
    if (newNode.children) {
      nodes.push(...flattenTreeData(newNode.children, newNode));
    }
  });
  return nodes;
}

function toggleExpanded(nodes, node) {
  return nodes.map((currentNode) => {
    if (currentNode === node) {
      return {
        ...currentNode,
        expanded: !currentNode.expanded,
      };
    }
    return currentNode;
  });
}
// 在渲染时计算缩进：
function renderNode(node) {
  const indentLevel = getIndentLevel(node);
  const style = {
    paddingLeft: `${indentLevel * 16}px`,
  };
  return (
    <div style={style} onClick={() => handleNodeClick(node)}>
      {node.label}
    </div>
  );
}

const columnsToRender = columns.filter(column => column.shouldRender);
return (
  <table>
    <thead>
      <tr>
        {columnsToRender.map(column => (
          <th key={column.key}>{column.title}</th>
        ))}
      </tr>
    </thead>
    <tbody>
      {data.map(row => (
        <tr key={row.id}>
          {columnsToRender.map(column => (
            <td key={column.key}>{row[column.key]}</td>
          ))}
        </tr>
      ))}
    </tbody>
  </table>
);

function Row({ data, columns }) {
  return (
    <tr>
      {columns.map(column => (
        <Cell key={column.key} data={data[column.key]} />
      ))}
    </tr>
  );
}
const areEqual = (prevProps, nextProps) => {
  return prevProps.data === nextProps.data && prevProps.columns === nextProps.columns;
};
export default React.memo(Row, areEqual);

import { FixedSizeList as List } from "react-window";
function Table({ data, columns }) {
  const Row = ({ index, style }) => (
    <div style={style}>
      {columns.map(column => (
        <Cell key={column.key} data={data[index][column.key]} />
      ))}
    </div>
  );
  return (
    <List
      height={500}
      itemCount={data.length}
      itemSize={35}
    >
      {Row}
    </List>
  );
}

// 创建一个新的 worker
const worker = new Worker('worker.js');
// 向 worker 发送数据
worker.postMessage(data);
// 监听 worker 的消息
worker.addEventListener('message', (event) => {
  // 更新表格数据
  updateTable(event.data);
});

self.addEventListener('message', (event) => {
  // 处理数据
  const processedData = processData(event.data);
  // 发送处理后的数据
  self.postMessage(processedData);
});