<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><code>&lt;Fragment /&gt;</code> 和 <code>&lt;&gt;&lt;/&gt;</code> （空标签）的区别</h4>
<p>只有 <code>Fragment</code> 可以带 key 属性，这在列表渲染时非常重要</p>
<h4>类组件和函数组件的区别？</h4>
<ul>
<li>语法与结构</li>
</ul>
<pre><code class="lang-js language-js js">class MyComponent extends React.Component {
  render() {
    return 
&lt;div&gt;Hello, {this.props.name}&lt;/div&gt;;
  }
}

function MyComponent(props) {
  return 
&lt;div&gt;Hello, {props.name}&lt;/div&gt;;
}</code></pre>
<ul>
<li>状态管理</li>
<li>类组件通过 <code>this.state</code> 定义状态，<code>this.setState()</code> 更新状态</li>
<li>函数组件使用 Hooks 的 <code>useState</code> 管理状态</li>
<li>生命周期与副作用</li>
<li>类组件通过生命周期处理副作用</li>
<li>函数组件通过 <code>useEffect</code> 替代生命周期</li>
<li><code>this</code> 的绑定问题</li>
<li>类组件通过手动绑定事件函数的 <code>this</code></li>
</ul>
<pre><code class="lang-js language-js js">class
 Button extends React.Component {
  handleClick() { console.log(this); } // this 可能为 undefined
  render() {
    return &lt;button onClick={this.handleClick.bind(this)}&gt;Click&lt;/button&gt;;
  }
}</code></pre>
<ul>
<li>函数组件没有 this，直接访问 props 和状态</li>
</ul>
<pre><code class="lang-js language-js js">function Button() {
  const handleClick = () =&gt; console.log(&quot;No this!&quot;);
  return &lt;button onClick={handleClick}&gt;Click&lt;/button&gt;;
}</code></pre>
<ul>
<li>性能优化</li>
<li>类组件使用 <code>shouldComponentUpdate</code> 或 <code>PureComponent</code> 避免不必要的渲染</li>
<li>函数组件使用 <code>React.memo</code> 进行浅比较</li>
</ul>
<h3>【状态管理】</h3>
<h4>React 中的状态提升（Lifting State Up）是什么？</h4>
<ul>
<li>把状态提升到父组件进行管理，子组件通过 props 读取数据。 </li>
</ul>
<h4>Context API 的作用？如何避免不必要的渲染？</h4>
<ul>
<li>Context（上下文） 是 React 提供的跨层级组件数据传递方案，用于解决多层组件嵌套时（逐层传递 props）的问题。</li>
<li>核心作用</li>
<li>跨组件共享数据（如主题、用户信息、全局配置等）</li>
<li>避免中间组件透传 props（减少冗余代码）</li>
</ul>
<h4>MobX / Redux</h4>
<ul>
<li>全局状态管理，把状态抽离到组件之外。</li>
</ul>
<p><strong>Redux</strong></p>
<ul>
<li>工作流程：
<ol>
<li>定义 Store：集中管理全局状态（createStore）。</li>
<li>派发 Action：组件通过 dispatch(action) 发出状态修改请求（action 是一个描述“发生了什么”的普通对象）。</li>
<li>执行 Reducer：根据 action.type，纯函数 reducer 计算新状态（不可变更新）。</li>
<li>更新视图：Store 通知订阅者（如 React 组件），触发重新渲染。</li>
</ol></li>
<li>核心概念：
<ul>
<li>单向数据流：View → Action → Reducer → Store → View</li>
<li>三大原则：单一数据源、状态只读、纯函数修改。</li>
</ul></li>
<li>总结：
<ul>
<li>组件 dispatch → Reducer 处理 → Store 更新 → 视图同步</li>
</ul></li>
</ul>
<p><strong>MobX</strong></p>
<ul>
<li>工作流程：
<ol>
<li>定义 Observable State：用 @observable 或 makeObservable 标记可变状态。</li>
<li>修改 State：在 @action 函数中更新状态（直接赋值/修改对象属性）。</li>
<li>自动追踪依赖：组件用 observer 包裹，自动订阅其依赖的状态。</li>
<li>触发更新：状态变化时，依赖它的组件自动重渲染。</li>
</ol></li>
<li>核心概念：
<ul>
<li>响应式编程：像 Excel 公式一样自动更新（无需手动 dispatch/reducer）。</li>
<li>直接修改状态（但通过 action 规范变更）。</li>
</ul></li>
<li>总结：
<ul>
<li>响应式状态，自动追踪依赖，修改即更新</li>
</ul></li>
</ul>
<h3>【性能优化】</h3>
<h4>React 的渲染机制是怎样的？如何避免不必要的渲染？</h4>
<ul>
<li>使用 React.memo、useMemo、useCallback、避免内联对象/函数。</li>
</ul>
<h4>React 的 key 属性有什么作用？</h4>
<ul>
<li>帮助 React 识别元素变化，优化列表渲染。</li>
</ul>
<h4>实现代码分割（Code Splitting）</h4>
<ul>
<li>动态 import() 语法</li>
<li>动态 import() 是 ES2020 引入的语法，返回一个 Promise：</li>
</ul>
<pre><code class="lang-js language-js js">// 普通模块中使用
import(&quot;./math&quot;).then(math =&gt; {
  console.log(math.add(16, 26));
});

// React 组件中使用
import(&quot;./OtherComponent&quot;).then(OtherComponent =&gt; {
  // 使用加载的组件
});</code></pre>
<ul>
<li>React.lazy + Suspense</li>
<li>React.lazy 和 Suspense 来实现组件的懒加载：</li>
</ul>
<pre><code class="lang-js language-js js">import React, { Suspense } from &#039;react&#039;;

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

function MyComponent() {
  return (

&lt;div&gt;
      &lt;Suspense fallback={&lt;div&gt;Loading...&lt;/div&gt;}&gt;
        &lt;OtherComponent /&gt;
      &lt;/Suspense&gt;
    &lt;/div&gt;
  );
}</code></pre>

【React】学习笔记-基础篇