<h4>虚拟 DOM 的原理是什么？为什么比直接操作 DOM 高效？</h4>
<ul>
<li>虚拟 DOM 是一个轻量的 JS 对象，用来描述真实 DOM 的层次和属性。</li>
<li>通过 Diff 算法最小化 DOM 操作，减少重绘和回流。</li>
</ul>
<h4>JSX 是什么？和普通 JavaScript 的区别？</h4>
<ul>
<li>JSX 是语法糖，最终会被 Babel 编译为 React.createElement() 调用。</li>
</ul>
<h4>数据流</h4>
<ul>
<li>单向数据流，自上而下传递。</li>
<li>父组件通过 props 把数据传递给子组件；</li>
<li>子组件可以通过回调函数通知父组件。</li>
</ul>
<h4>Props</h4>
<ul>
<li>PropTypes 定义类型</li>
<li>defaultProps 定义默认值</li>
<li>this.props.children 表示组件的所有子节点</li>
<li>不要把 props 复制到 state 中，要尽可能把 props 当作数据源（避免反模式）</li>
</ul>
<h4>高阶组件（HOC）</h4>
<ul>
<li>用于复用组件逻辑。本质上是一个函数，通过接收一个组件并返回一个新组件</li>
</ul>
<h4>PureComponent 和 React.memo</h4>
<ul>
<li>PureComponent 会对 props 和 state 进行浅比较</li>
<li>memo 只对 props 进行浅比较</li>
</ul>
<h4>`</h4>
` 和 &#8220; （空标签）的区别

&#8211; 只有 `
` 可以带 key 属性，这在列表渲染时非常重要

#### 类组件和函数组件的区别？

&#8211; 语法与结构

&#8220;`js
class MyComponent extends React.Component {
  render() {
    return 
<div>Hello, {this.props.name}</div>;
  }
}

function MyComponent(props) {
  return 
<div>Hello, {props.name}</div>;
}
&#8220;`

&#8211; 状态管理
&#8211; 类组件通过 `this.state` 定义状态，`this.setState()` 更新状态
&#8211; 函数组件使用 Hooks 的 `useState` 管理状态
&#8211; 生命周期与副作用
&#8211; 类组件通过生命周期处理副作用
&#8211; 函数组件通过 `useEffect` 替代生命周期
&#8211; `this` 的绑定问题
&#8211; 类组件通过手动绑定事件函数的 `this`

&#8220;`js
class
 Button extends React.Component {
  handleClick() { console.log(this); } // this 可能为 undefined
  render() {
    return <button>Click</button>;
  }
}
&#8220;`

&#8211; 函数组件没有 this，直接访问 props 和状态

&#8220;`js
function Button() {
  const handleClick = () =&gt; console.log(&#8220;No this!&#8221;);
  return <button>Click</button>;
}
&#8220;`

&#8211; 性能优化
&#8211; 类组件使用 `shouldComponentUpdate` 或 `PureComponent` 避免不必要的渲染
&#8211; 函数组件使用 `React.memo` 进行浅比较

### 【状态管理】

#### React 中的状态提升（Lifting State Up）是什么？

&#8211; 把状态提升到父组件进行管理，子组件通过 props 读取数据。 

#### Context API 的作用？如何避免不必要的渲染？

&#8211; Context（上下文） 是 React 提供的跨层级组件数据传递方案，用于解决多层组件嵌套时（逐层传递 props）的问题。
&#8211; 核心作用
&#8211; 跨组件共享数据（如主题、用户信息、全局配置等）
&#8211; 避免中间组件透传 props（减少冗余代码）

#### MobX / Redux

&#8211; 全局状态管理，把状态抽离到组件之外。

**Redux**

* 工作流程：
    1. 定义 Store：集中管理全局状态（createStore）。
    2. 派发 Action：组件通过 dispatch(action) 发出状态修改请求（action 是一个描述“发生了什么”的普通对象）。
    3. 执行 Reducer：根据 action.type，纯函数 reducer 计算新状态（不可变更新）。
    4. 更新视图：Store 通知订阅者（如 React 组件），触发重新渲染。
* 核心概念：
    &#8211; 单向数据流：View → Action → Reducer → Store → View
    &#8211; 三大原则：单一数据源、状态只读、纯函数修改。
* 总结：
    &#8211; 组件 dispatch → Reducer 处理 → Store 更新 → 视图同步

**MobX**

* 工作流程：
    1. 定义 Observable State：用 @observable 或 makeObservable 标记可变状态。
    2. 修改 State：在 @action 函数中更新状态（直接赋值/修改对象属性）。
    3. 自动追踪依赖：组件用 observer 包裹，自动订阅其依赖的状态。
    4. 触发更新：状态变化时，依赖它的组件自动重渲染。
* 核心概念：
    &#8211; 响应式编程：像 Excel 公式一样自动更新（无需手动 dispatch/reducer）。
    &#8211; 直接修改状态（但通过 action 规范变更）。
* 总结：
    &#8211; 响应式状态，自动追踪依赖，修改即更新

### 【性能优化】

#### React 的渲染机制是怎样的？如何避免不必要的渲染？
&#8211; 使用 React.memo、useMemo、useCallback、避免内联对象/函数。

#### React 的 key 属性有什么作用？
&#8211; 帮助 React 识别元素变化，优化列表渲染。

#### 实现代码分割（Code Splitting）
&#8211; 动态 import() 语法
&#8211; 动态 import() 是 ES2020 引入的语法，返回一个 Promise：

&#8220;`js
// 普通模块中使用
import(&#8220;./math&#8221;).then(math =&gt; {
  console.log(math.add(16, 26));
});

// React 组件中使用
import(&#8220;./OtherComponent&#8221;).then(OtherComponent =&gt; {
  // 使用加载的组件
});
&#8220;`
&#8211; React.lazy + Suspense
&#8211; React.lazy 和 Suspense 来实现组件的懒加载：

&#8220;`js
import React, { Suspense } from &#8216;react&#8217;;

const OtherComponent = React.lazy(() =&gt; import(&#8216;./OtherComponent&#8217;));

function MyComponent() {
  return (

<div>
      &lt;suspense fallback=&quot;{<div>Loading&#8230;</div>}&gt;
        
      
    
  );
}
&#8220;`

【React】学习笔记-基础篇