Shihan Liao

1. **外部CSS文件** - **方式**：在React组件中引入外部CSS文件，通常在入口文件（如`index.js`或`App.js`）中用`import './style.css';`语句引入。 - **优点**：简单易用，适合全局样式的管理；开发者较为熟悉的传统做法。 - **缺点**：全局样式容易导致不同组件之间的样式冲突。 2. **内联样式（Inline Styles）** - **方式**：直接在JSX元素的`style`属性中使用JavaScript对象来定义样式，例如：`Hello`。 - **优点**：样式与组件绑定，不会造成全局污染；支持动态样式。 - **缺点**：不支持CSS伪类和媒体查询；可能导致代码臃肿，不易维护。 3. **CSS模块** - **方式**：通过创建`*.module.css`文件并在组件中以模块的方式引入，如`import styles from './Button.module.css';`，然后在JSX中使用类似`className={styles.button}`。 - **优点**：自动生成唯一的类名避免样式冲突；易于维护和更新。 - **缺点**：需要额外的配置支持，随着复杂度增加，设置可能变得繁琐。 4....

### React生命周期 #### 挂载阶段（Mounting） 1. **constructor(props) **构造函数：在组件被创建时调用。这里初始化状态或方法绑定等。 2. **static getDerivedStateFromProps(props, state) **静态方法：在每次渲染前调用，允许组件更新state以响应props的改变。是一个静态方法，不建议在普通逻辑中常用。 3. **render() **渲染：唯一必须实现的方法，返回React元素。此方法应保持纯粹，不应在此处修改组件state。 4. **componentDidMount() **组件已挂载：在组件挂载后（插入DOM树中）立即调用。在此处进行一些初始数据的加载。 #### 更新阶段（Updating） 1. **static getDerivedStateFromProps(props, state) **静态方法：与挂载阶段相同，在每次渲染前调用。 2. **shouldComponentUpdate(nextProps, nextState) **组件是否应更新：此方法可以让你阻止组件的更新过程。返回`false`则阻止更新。 3....

省略版： ### React构建组件的方式有哪些？区别？ 1. **函数组件（Functional Components）**： - **定义方法**：这是构建组件的最简单方式，使用JavaScript函数定义组件。 - **特点**：在`react hooks`出来之前是无状态组件，出来之后可以添加状态和生命周期等功能。 ```React JSX function MyComponent(props) { return Hello, {props.name}!; } ``` 2. **类组件（Class Components）**： - **定义方法**：使用ES6的类语法。 - **特点**：适合复杂组件。 ```React JSX...

#### 1. BrowserRouter **模式：** - 使用 HTML5 的 `history` API 提供干净的 URL（不带哈希符号）。 - URL 看起来类似于常规的网页 URL，例如 `/about`、`/contact`。 **实现原理：** - `BrowserRouter` 利用 `history.pushState` 和 `history.replaceState` 方法来操作 URL，而不会引起页面刷新。 - 在用户操作浏览器的前进和后退按钮时，`popstate` 事件会被触发，`BrowserRouter` 会监听这个事件，并根据当前...