动态呈现组件数组

// 示例代码：React 中动态渲染组件数组
import React from 'react';

const components = [
  { type: 'button', props: { label: 'Click me' } },
  { type: 'input', props: { placeholder: 'Enter text' } }
];

const DynamicComponent = ({ type, props }) => {
  const Component = React.createElement(type, props);
  return <div>{Component}</div>;
};

const App = () => {
  return (
    <div>
      {components.map((component, index) => (
        <DynamicComponent key={index} {...component} />
      ))}
    </div>
  );
};

export default App;

// 示例代码：使用 React Window 优化大量数据渲染
import React from 'react';
import { FixedSizeList as List } from 'react-window';

const data = Array.from({ length: 1000 }, (_, index) => `Item ${index}`);

const Row = ({ index, style }) => (
  <div style={style}>
    {data[index]}
  </div>
);

const App = () => {
  return (
    <List
      height={400}
      itemCount={data.length}
      itemSize={35}
      width={300}
    >
      {Row}
    </List>
  );
};

export default App;