面试题：React微前端架构下如何实现基础组件的复用

组件的封装方式

原子化设计：
- 将基础组件如按钮、输入框设计为原子组件，每个组件只负责一个单一功能。例如按钮组件只负责处理点击交互、展示不同状态（如默认、按下、禁用）。
- 以React函数式组件为例：

import React from'react';

const Button = ({ text, onClick, disabled }) => (
  <button onClick={onClick} disabled={disabled}>
    {text}
  </button>
);

export default Button;

遵循单一职责原则：
- 确保每个组件只做一件事，这样可以提高组件的可维护性和复用性。比如输入框组件只负责处理输入、验证输入格式等与输入相关的操作。
- 示例代码：

import React, { useState } from'react';

const Input = ({ type, placeholder, onChange }) => {
  const [value, setValue] = useState('');
  const handleChange = (e) => {
    setValue(e.target.value);
    if (onChange) {
      onChange(e.target.value);
    }
  };
  return (
    <input type={type} placeholder={placeholder} value={value} onChange={handleChange} />
  );
};

export default Input;

依赖管理

使用npm包管理：
- 将基础组件库发布为npm包。在每个微前端应用中通过npm install安装该包。这样可以统一管理基础组件的版本，并且方便更新。
- 例如，在根目录创建一个基础组件库项目，编写好组件后，通过npm publish发布到npm仓库。然后在微前端应用的package.json中添加依赖："my - base - components": "^1.0.0"。
Tree - shaking：
- 利用Webpack等构建工具的Tree - shaking特性，只引入实际使用的组件代码，避免引入整个基础组件库导致代码冗余。在Webpack配置中，可以通过设置mode: 'production'来开启Tree - shaking，它会自动移除未使用的导出。
- 例如，如果基础组件库中有多个组件，而某个微前端应用只使用了按钮组件，Webpack在打包时不会把其他未使用组件的代码打包进来。

解决样式冲突

CSS Modules：
- 在基础组件中使用CSS Modules。每个组件有自己独立的CSS文件，通过局部作用域来避免样式冲突。
- 例如，对于按钮组件，创建Button.module.css文件：

.button {
  background - color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border - radius: 5px;
}

- 在`Button.jsx`中引入：

import React from'react';
import styles from './Button.module.css';

const Button = ({ text, onClick, disabled }) => (
  <button className={styles.button} onClick={onClick} disabled={disabled}>
    {text}
  </button>
);

export default Button;

Shadow DOM：
- 对于一些现代浏览器支持的场景，可以使用Shadow DOM来隔离组件样式。在React中，可以借助一些库如react - shadow来实现。
- 首先安装react - shadow：npm install react - shadow。
- 然后在组件中使用：

import React from'react';
import { createComponent } from'react - shadow';

const Button = ({ text, onClick, disabled }) => {
  const StyledButton = createComponent(`
    button {
      background - color: blue;
      color: white;
      padding: 10px 20px;
      border: none;
      border - radius: 5px;
    }
  `);
  return (
    <StyledButton>
      <button onClick={onClick} disabled={disabled}>
        {text}
      </button>
    </StyledButton>
  );
};

export default Button;

命名规范：
- 采用一套严格的命名规范，如BEM（块、元素、修饰符）命名规范。以按钮组件为例，可以命名为.button（块）、.button__text（元素）、.button--disabled（修饰符）。这样可以在一定程度上避免不同组件间样式命名冲突。
- 例如：

.button {
  background - color: blue;
}
.button__text {
  color: white;
}
.button--disabled {
  background - color: gray;
}

星途面试题库

面试题：React微前端架构下如何实现基础组件的复用

知识考点

面试题答案

组件的封装方式

依赖管理

解决样式冲突