<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】学习笔记-基础篇

<p>今年是我来佛山定居的第十年，所以去参加了50km徒步纪念一下。</p>
<h3>6:30 AM 起床</h3>
<p>一大早就起床，吃完早餐就骑电驴向集结地文华公园出发。</p>
<figure class="figure-sm">
  <img data-src="//static.hezhiyi.com/images/blog/2025/0326/01.jpg" alt="">
</figure>
<h3>8:24 AM 起点·文华公园，人山人海</h3>
<p>到现场直接吓懵 —— 人也太多了吧！电视塔下面全是人。之前我还想走50公里不是普通的运动量，参加的人应该不多，结果发现满头白发的老人、三岁小孩都来参加，看来我低估了大家对这个活动的积极性。好，从此刻正式开始！</p>
<figure class="figure-sm">
  <img data-src="//static.hezhiyi.com/images/blog/2025/0326/02.jpg" alt="">
</figure>
<h3>09:53 AM 第一签：升平里（5KM）</h3>
<p>开局像过年游花市，大家都是一个挨一个，沿途的路都围蔽了。就这样慢吞吞地走了1.5小时。心想，这样走岂不是晚上十点都走不完？！来到升平里人更多了（是我见过这个地方人最多的一次），赶紧找签到点盖章离开。</p>
<h3>11:48 AM 第二签：欧洲工业园C区（12.8KM）</h3>
<p>这段感觉人少了不少，原因其实很多人只是为了打个卡发发朋友圈，（毕竟 5km 对现在的人还是极限）。太阳也出来营业了，还好沿途绿道大树也比较多。这一段是考验耐心的，因为要经过一片老旧的工业区，所以风景一般，路边的大货车经过会扬起一片灰尘&#8230;&#8230;</p>
<figure class="figure-sm">
  <img data-src="//static.hezhiyi.com/images/blog/2025/0326/03.jpg" alt="">
</figure>
<h3>13:24 AM 第三签：城发悦城峯境（17.8KM）</h3>
<p>沿汾江河边都是新打造的绿道，风景很不错。沿途都是卖小吃、饮料的小贩。也经过了我一直想去的王借岗公园，又帮我在百度地图点亮了一个片区。</p>
<figure class="figure-sm">
  <img data-src="//static.hezhiyi.com/images/blog/2025/0326/04.jpg" alt="">
</figure>
<h3>14:29 PM 第四签：绿岛湖国际中心（20.5KM）</h3>
<p>距离不远，但人走了一个上午已经有点累，所以走到绿岛湖就在湖边休整了20分钟。在这里汇合身穿浅蓝色衣服的&#8221;三水线&#8221;驴友，这些都是大神人，因为他们的线路比我们多出14km，也就是说别人一大早7点就已经出发，并且走得很快。其实禅城线算是“作弊”线路，因为它全场是36km，是全部线路中最短的。</p>
<h3>15:25 PM 第五签：智慧公园（24.5KM）</h3>
<p>这段就开始拼耐力了，阳光猛烈，大树比较少，脚步也渐渐慢下来。不过令我意外的是智慧公园原来很漂亮，又找多了一个休闲的地方。  </p>
<h3>16:46 PM 第六签：青年公园（30.5KM）</h3>
<p>如果认真计算距离和时间，就发现我速度快了很多。不，我没作弊（已经看到很多人骑共享单车跑了），其实原因是身边的队友也受不了骑车去。我只是自己发挥真正的实力 ^_^。PS沿线的公交线路都挤满了人，其实这不是比赛，尽力而为就好。</p>
<div class="image-list col-2">
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/0326/05.jpg" alt="">
    </div>
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/0326/06.jpg" alt="">
    </div>
</div>
<h3>18:12 PM 终点·世纪莲体育中心（36KM）</h3>
<p>突然想起十年前那次30公里徒步，走完整个人都废了，所以这次出发前一直怀疑自己到底行不行。现在看来，身体确实比以前能扛了，但更关键的是——只要咬咬牙，好像也没什么走不完的路。</p>
<div class="image-list col-2">
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/0326/07.jpg" alt="">
    </div>
    <div class="image-item">
        <img data-src="//static.hezhiyi.com/images/blog/2025/0326/08.jpg" alt="">
    </div>
</div>

2025佛山50公里徒步（禅城线）

<p>早上我和家人去了广州动物园，下午回来赶上了11号线的开通首日，顺便体验一下新线路。</p>
<p>列车进站的时候，大家都掏出手机拍照，我也赶紧拍了几张发朋友圈。11号线的站台和车厢都很大，不愧为A8列车，坐着特别舒服，相比广州其它线路，绝对的王者。而且它是城区环线，所以去哪里换乘都方便。</p>
<p>到了中医学院站，发现人还挺多的，大家都想第一时间体验新线路，而且这个站也是「大站」，以后可以换乘12号线。站台设计很有特色，融入了很多中医药文化的元素。</p>
<div class="image-list col-4">
    <div class="image-item">
        <img data-src="https://static.hezhiyi.com/images/blog/2024/20241228_01.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="https://static.hezhiyi.com/images/blog/2024/20241228_02.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="https://static.hezhiyi.com/images/blog/2024/20241228_03.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="https://static.hezhiyi.com/images/blog/2024/20241228_04.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="https://static.hezhiyi.com/images/blog/2024/20241228_05.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="https://static.hezhiyi.com/images/blog/2024/20241228_06.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="https://static.hezhiyi.com/images/blog/2024/20241228_07.png" alt="">
    </div>
    <div class="image-item">
        <img data-src="https://static.hezhiyi.com/images/blog/2024/20241228_08.png" alt="">
    </div>
</div>

广州11号线开通首日体验

<p>MIDI 音符代码是用于表示音符的数字系统，范围从0到127，对应不同的音高和八度。具体如下：
<br><br></p>
<ol>
<li>
<p><strong>音符编号</strong>：每个音符对应一个唯一的编号，例如：</p>
<ul>
<li>C4（中央C）的编号为60。</li>
<li>C5的编号为72。</li>
</ul>
</li>
<li>
<p><strong>音高与编号</strong>：</p>
<ul>
<li>编号0对应C-1（最低音）。</li>
<li>编号127对应G9（最高音）。</li>
</ul>
</li>
<li>
<p><strong>八度划分</strong>：</p>
<ul>
<li>每增加12，编号提高一个八度。例如，C4为60，C5为72。</li>
</ul>
</li>
<li>
<p><strong>半音关系</strong>：</p>
<ul>
<li>相邻编号相差一个半音。例如，C4为60，C#4/Db4为61。</li>
</ul>
</li>
<li>
<p><strong>常用音符示例</strong>：</p>
<ul>
<li>C4: 60</li>
<li>D4: 62</li>
<li>E4: 64</li>
<li>F4: 65</li>
<li>G4: 67</li>
<li>A4: 69</li>
<li>B4: 71</li>
<li>C5: 72</li>
</ul>
</li>
<li>
<p><strong>应用</strong>：</p>
<ul>
<li>MIDI音符代码用于音乐软件、硬件和数字乐器中，控制音符的播放。</li>
</ul>
</li>
</ol>
<p>附表：</p>
<table>
<thead>
<tr>
<th>编号</th>
<th>音符代码（二进制码）</th>
<th>音符代码（十六进制码）</th>
<th>所在音阶</th>
<th>音调</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>0000000</td>
<td>00</td>
<td>-1</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>0000001</td>
<td>01</td>
<td>-1</td>
<td>C#</td>
</tr>
<tr>
<td>2</td>
<td>0000010</td>
<td>02</td>
<td>-1</td>
<td>D</td>
</tr>
<tr>
<td>3</td>
<td>0000011</td>
<td>03</td>
<td>-1</td>
<td>D#</td>
</tr>
<tr>
<td>4</td>
<td>0000100</td>
<td>04</td>
<td>-1</td>
<td>E</td>
</tr>
<tr>
<td>5</td>
<td>0000101</td>
<td>05</td>
<td>-1</td>
<td>F</td>
</tr>
<tr>
<td>6</td>
<td>0000110</td>
<td>06</td>
<td>-1</td>
<td>F#</td>
</tr>
<tr>
<td>7</td>
<td>0000111</td>
<td>07</td>
<td>-1</td>
<td>G</td>
</tr>
<tr>
<td>8</td>
<td>0001000</td>
<td>08</td>
<td>-1</td>
<td>G#</td>
</tr>
<tr>
<td>9</td>
<td>0001001</td>
<td>09</td>
<td>-1</td>
<td>A</td>
</tr>
<tr>
<td>10</td>
<td>0001010</td>
<td>0A</td>
<td>-1</td>
<td>A#</td>
</tr>
<tr>
<td>11</td>
<td>0001011</td>
<td>0B</td>
<td>-1</td>
<td>B</td>
</tr>
<tr>
<td>12</td>
<td>0001100</td>
<td>0C</td>
<td>0</td>
<td>C</td>
</tr>
<tr>
<td>13</td>
<td>0001101</td>
<td>0D</td>
<td>0</td>
<td>C#</td>
</tr>
<tr>
<td>14</td>
<td>0001110</td>
<td>0E</td>
<td>0</td>
<td>D</td>
</tr>
<tr>
<td>15</td>
<td>0001111</td>
<td>0F</td>
<td>0</td>
<td>D#</td>
</tr>
<tr>
<td>16</td>
<td>0010000</td>
<td>10</td>
<td>0</td>
<td>E</td>
</tr>
<tr>
<td>17</td>
<td>0010001</td>
<td>11</td>
<td>0</td>
<td>F</td>
</tr>
<tr>
<td>18</td>
<td>0010010</td>
<td>12</td>
<td>0</td>
<td>F#</td>
</tr>
<tr>
<td>19</td>
<td>0010011</td>
<td>13</td>
<td>0</td>
<td>G</td>
</tr>
<tr>
<td>20</td>
<td>0010100</td>
<td>14</td>
<td>0</td>
<td>G#</td>
</tr>
<tr>
<td>21</td>
<td>0010101</td>
<td>15</td>
<td>0</td>
<td>A</td>
</tr>
<tr>
<td>22</td>
<td>0010110</td>
<td>16</td>
<td>0</td>
<td>A#</td>
</tr>
<tr>
<td>23</td>
<td>0010111</td>
<td>17</td>
<td>0</td>
<td>B</td>
</tr>
<tr>
<td>24</td>
<td>0011000</td>
<td>18</td>
<td>1</td>
<td>C</td>
</tr>
<tr>
<td>25</td>
<td>0011001</td>
<td>19</td>
<td>1</td>
<td>C#</td>
</tr>
<tr>
<td>26</td>
<td>0011010</td>
<td>1A</td>
<td>1</td>
<td>D</td>
</tr>
<tr>
<td>27</td>
<td>0011011</td>
<td>1B</td>
<td>1</td>
<td>D#</td>
</tr>
<tr>
<td>28</td>
<td>0011100</td>
<td>1C</td>
<td>1</td>
<td>E</td>
</tr>
<tr>
<td>29</td>
<td>0011101</td>
<td>1D</td>
<td>1</td>
<td>F</td>
</tr>
<tr>
<td>30</td>
<td>0011110</td>
<td>1E</td>
<td>1</td>
<td>F#</td>
</tr>
<tr>
<td>31</td>
<td>0011111</td>
<td>1F</td>
<td>1</td>
<td>G</td>
</tr>
<tr>
<td>32</td>
<td>0100000</td>
<td>20</td>
<td>1</td>
<td>G#</td>
</tr>
<tr>
<td>33</td>
<td>0100001</td>
<td>21</td>
<td>1</td>
<td>A</td>
</tr>
<tr>
<td>34</td>
<td>0100010</td>
<td>22</td>
<td>1</td>
<td>A#</td>
</tr>
<tr>
<td>35</td>
<td>0100011</td>
<td>23</td>
<td>1</td>
<td>B</td>
</tr>
<tr>
<td>36</td>
<td>0100100</td>
<td>24</td>
<td>2</td>
<td>C</td>
</tr>
<tr>
<td>37</td>
<td>0100101</td>
<td>25</td>
<td>2</td>
<td>C#</td>
</tr>
<tr>
<td>38</td>
<td>0100110</td>
<td>26</td>
<td>2</td>
<td>D</td>
</tr>
<tr>
<td>39</td>
<td>0100111</td>
<td>27</td>
<td>2</td>
<td>D#</td>
</tr>
<tr>
<td>40</td>
<td>0101000</td>
<td>28</td>
<td>2</td>
<td>E</td>
</tr>
<tr>
<td>41</td>
<td>0101001</td>
<td>29</td>
<td>2</td>
<td>F</td>
</tr>
<tr>
<td>42</td>
<td>0101010</td>
<td>2A</td>
<td>2</td>
<td>F#</td>
</tr>
<tr>
<td>43</td>
<td>0101011</td>
<td>2B</td>
<td>2</td>
<td>G</td>
</tr>
<tr>
<td>44</td>
<td>0101100</td>
<td>2C</td>
<td>2</td>
<td>G#</td>
</tr>
<tr>
<td>45</td>
<td>0101101</td>
<td>2D</td>
<td>2</td>
<td>A</td>
</tr>
<tr>
<td>46</td>
<td>0101110</td>
<td>2E</td>
<td>2</td>
<td>A#</td>
</tr>
<tr>
<td>47</td>
<td>0101111</td>
<td>2F</td>
<td>2</td>
<td>B</td>
</tr>
<tr>
<td>48</td>
<td>0110000</td>
<td>30</td>
<td>3</td>
<td>C</td>
</tr>
<tr>
<td>49</td>
<td>0110001</td>
<td>31</td>
<td>3</td>
<td>C#</td>
</tr>
<tr>
<td>50</td>
<td>0110010</td>
<td>32</td>
<td>3</td>
<td>D</td>
</tr>
<tr>
<td>51</td>
<td>0110011</td>
<td>33</td>
<td>3</td>
<td>D#</td>
</tr>
<tr>
<td>52</td>
<td>0110100</td>
<td>34</td>
<td>3</td>
<td>E</td>
</tr>
<tr>
<td>53</td>
<td>0110101</td>
<td>35</td>
<td>3</td>
<td>F</td>
</tr>
<tr>
<td>54</td>
<td>0110110</td>
<td>36</td>
<td>3</td>
<td>F#</td>
</tr>
<tr>
<td>55</td>
<td>0110111</td>
<td>37</td>
<td>3</td>
<td>G</td>
</tr>
<tr>
<td>56</td>
<td>0111000</td>
<td>38</td>
<td>3</td>
<td>G#</td>
</tr>
<tr>
<td>57</td>
<td>0111001</td>
<td>39</td>
<td>3</td>
<td>A</td>
</tr>
<tr>
<td>58</td>
<td>0111010</td>
<td>3A</td>
<td>3</td>
<td>A#</td>
</tr>
<tr>
<td>59</td>
<td>0111011</td>
<td>3B</td>
<td>3</td>
<td>B</td>
</tr>
<tr>
<td>60</td>
<td>0111100</td>
<td>3C</td>
<td>4</td>
<td>C</td>
</tr>
<tr>
<td>61</td>
<td>0111101</td>
<td>3D</td>
<td>4</td>
<td>C#</td>
</tr>
<tr>
<td>62</td>
<td>0111110</td>
<td>3E</td>
<td>4</td>
<td>D</td>
</tr>
<tr>
<td>63</td>
<td>0111111</td>
<td>3F</td>
<td>4</td>
<td>D#</td>
</tr>
<tr>
<td>64</td>
<td>1000000</td>
<td>40</td>
<td>4</td>
<td>E</td>
</tr>
<tr>
<td>65</td>
<td>1000001</td>
<td>41</td>
<td>4</td>
<td>F</td>
</tr>
<tr>
<td>66</td>
<td>1000010</td>
<td>42</td>
<td>4</td>
<td>F#</td>
</tr>
<tr>
<td>67</td>
<td>1000011</td>
<td>43</td>
<td>4</td>
<td>G</td>
</tr>
<tr>
<td>68</td>
<td>1000100</td>
<td>44</td>
<td>4</td>
<td>G#</td>
</tr>
<tr>
<td>69</td>
<td>1000101</td>
<td>45</td>
<td>4</td>
<td>A</td>
</tr>
<tr>
<td>70</td>
<td>1000110</td>
<td>46</td>
<td>4</td>
<td>A#</td>
</tr>
<tr>
<td>71</td>
<td>1000111</td>
<td>47</td>
<td>4</td>
<td>B</td>
</tr>
<tr>
<td>72</td>
<td>1001000</td>
<td>48</td>
<td>5</td>
<td>C</td>
</tr>
<tr>
<td>73</td>
<td>1001001</td>
<td>49</td>
<td>5</td>
<td>C#</td>
</tr>
<tr>
<td>74</td>
<td>1001010</td>
<td>4A</td>
<td>5</td>
<td>D</td>
</tr>
<tr>
<td>75</td>
<td>1001011</td>
<td>4B</td>
<td>5</td>
<td>D#</td>
</tr>
<tr>
<td>76</td>
<td>1001100</td>
<td>4C</td>
<td>5</td>
<td>E</td>
</tr>
<tr>
<td>77</td>
<td>1001101</td>
<td>4D</td>
<td>5</td>
<td>F</td>
</tr>
<tr>
<td>78</td>
<td>1001110</td>
<td>4E</td>
<td>5</td>
<td>F#</td>
</tr>
<tr>
<td>79</td>
<td>1001111</td>
<td>4F</td>
<td>5</td>
<td>G</td>
</tr>
<tr>
<td>80</td>
<td>1010000</td>
<td>50</td>
<td>5</td>
<td>G#</td>
</tr>
<tr>
<td>81</td>
<td>1010001</td>
<td>51</td>
<td>5</td>
<td>A</td>
</tr>
<tr>
<td>82</td>
<td>1010010</td>
<td>52</td>
<td>5</td>
<td>A#</td>
</tr>
<tr>
<td>83</td>
<td>1010011</td>
<td>53</td>
<td>5</td>
<td>B</td>
</tr>
<tr>
<td>84</td>
<td>1010100</td>
<td>54</td>
<td>6</td>
<td>C</td>
</tr>
<tr>
<td>85</td>
<td>1010101</td>
<td>55</td>
<td>6</td>
<td>C#</td>
</tr>
<tr>
<td>86</td>
<td>1010110</td>
<td>56</td>
<td>6</td>
<td>D</td>
</tr>
<tr>
<td>87</td>
<td>1010111</td>
<td>57</td>
<td>6</td>
<td>D#</td>
</tr>
<tr>
<td>88</td>
<td>1011000</td>
<td>58</td>
<td>6</td>
<td>E</td>
</tr>
<tr>
<td>89</td>
<td>1011001</td>
<td>59</td>
<td>6</td>
<td>F</td>
</tr>
<tr>
<td>90</td>
<td>1011010</td>
<td>5A</td>
<td>6</td>
<td>F#</td>
</tr>
<tr>
<td>91</td>
<td>1011011</td>
<td>5B</td>
<td>6</td>
<td>G</td>
</tr>
<tr>
<td>92</td>
<td>1011100</td>
<td>5C</td>
<td>6</td>
<td>G#</td>
</tr>
<tr>
<td>93</td>
<td>1011101</td>
<td>5D</td>
<td>6</td>
<td>A</td>
</tr>
<tr>
<td>94</td>
<td>1011110</td>
<td>5E</td>
<td>6</td>
<td>A#</td>
</tr>
<tr>
<td>95</td>
<td>1011111</td>
<td>5F</td>
<td>6</td>
<td>B</td>
</tr>
<tr>
<td>96</td>
<td>1100000</td>
<td>60</td>
<td>7</td>
<td>C</td>
</tr>
<tr>
<td>97</td>
<td>1100001</td>
<td>61</td>
<td>7</td>
<td>C#</td>
</tr>
<tr>
<td>98</td>
<td>1100010</td>
<td>62</td>
<td>7</td>
<td>D</td>
</tr>
<tr>
<td>99</td>
<td>1100011</td>
<td>63</td>
<td>7</td>
<td>D#</td>
</tr>
<tr>
<td>100</td>
<td>1100100</td>
<td>64</td>
<td>7</td>
<td>E</td>
</tr>
<tr>
<td>101</td>
<td>1100101</td>
<td>65</td>
<td>7</td>
<td>F</td>
</tr>
<tr>
<td>102</td>
<td>1100110</td>
<td>66</td>
<td>7</td>
<td>F#</td>
</tr>
<tr>
<td>103</td>
<td>1100111</td>
<td>67</td>
<td>7</td>
<td>G</td>
</tr>
<tr>
<td>104</td>
<td>1101000</td>
<td>68</td>
<td>7</td>
<td>G#</td>
</tr>
<tr>
<td>105</td>
<td>1101001</td>
<td>69</td>
<td>7</td>
<td>A</td>
</tr>
<tr>
<td>106</td>
<td>1101010</td>
<td>6A</td>
<td>7</td>
<td>A#</td>
</tr>
<tr>
<td>107</td>
<td>1101011</td>
<td>6B</td>
<td>7</td>
<td>B</td>
</tr>
<tr>
<td>108</td>
<td>1101100</td>
<td>6C</td>
<td>8</td>
<td>C</td>
</tr>
<tr>
<td>109</td>
<td>1101101</td>
<td>6D</td>
<td>8</td>
<td>C#</td>
</tr>
<tr>
<td>110</td>
<td>1101110</td>
<td>6E</td>
<td>8</td>
<td>D</td>
</tr>
<tr>
<td>111</td>
<td>1101111</td>
<td>6F</td>
<td>8</td>
<td>D#</td>
</tr>
<tr>
<td>112</td>
<td>1110000</td>
<td>70</td>
<td>8</td>
<td>E</td>
</tr>
<tr>
<td>113</td>
<td>1110001</td>
<td>71</td>
<td>8</td>
<td>F</td>
</tr>
<tr>
<td>114</td>
<td>1110010</td>
<td>72</td>
<td>8</td>
<td>F#</td>
</tr>
<tr>
<td>115</td>
<td>1110011</td>
<td>73</td>
<td>8</td>
<td>G</td>
</tr>
<tr>
<td>116</td>
<td>1110100</td>
<td>74</td>
<td>8</td>
<td>G#</td>
</tr>
<tr>
<td>117</td>
<td>1110101</td>
<td>75</td>
<td>8</td>
<td>A</td>
</tr>
<tr>
<td>118</td>
<td>1110110</td>
<td>76</td>
<td>8</td>
<td>A#</td>
</tr>
<tr>
<td>119</td>
<td>1110111</td>
<td>77</td>
<td>8</td>
<td>B</td>
</tr>
<tr>
<td>120</td>
<td>1111000</td>
<td>78</td>
<td>9</td>
<td>C</td>
</tr>
<tr>
<td>121</td>
<td>1111001</td>
<td>79</td>
<td>9</td>
<td>C#</td>
</tr>
<tr>
<td>122</td>
<td>1111010</td>
<td>7A</td>
<td>9</td>
<td>D</td>
</tr>
<tr>
<td>123</td>
<td>1111011</td>
<td>7B</td>
<td>9</td>
<td>D#</td>
</tr>
<tr>
<td>124</td>
<td>1111100</td>
<td>7C</td>
<td>9</td>
<td>E</td>
</tr>
<tr>
<td>125</td>
<td>1111101</td>
<td>7D</td>
<td>9</td>
<td>F</td>
</tr>
<tr>
<td>126</td>
<td>1111110</td>
<td>7E</td>
<td>9</td>
<td>F#</td>
</tr>
<tr>
<td>127</td>
<td>1111111</td>
<td>7F</td>
<td>9</td>
<td>G</td>
</tr>
</tbody>
</table>

MIDI音符代码表

<p>音符一拍的时值计算是音乐理论中的基础概念，涉及音符的时值和拍号：</p>
<h3>1. 音符时值</h3>
<p>音符时值表示音符的持续时间，常见音符及其时值如下：</p>
<ul>
<li><strong>全音符</strong>：4拍</li>
<li><strong>二分音符</strong>：2拍</li>
<li><strong>四分音符</strong>：1拍</li>
<li><strong>八分音符</strong>：0.5拍</li>
<li><strong>十六分音符</strong>：0.25拍</li>
</ul>
<h3>2. 拍号</h3>
<p>拍号决定每小节的拍数和每拍的时值，通常表示为分数，如4/4、3/4等。</p>
<ul>
<li><strong>分子</strong>：每小节的拍数</li>
<li><strong>分母</strong>：每拍的音符类型（4代表四分音符，8代表八分音符）</li>
</ul>
<h3>3. 计算一拍的时值</h3>
<p>以4/4拍为例：</p>
<ul>
<li><strong>拍号</strong>：4/4</li>
<li><strong>每拍时值</strong>：四分音符（分母为4）</li>
<li><strong>每拍时长</strong>：1拍</li>
</ul>
<h3>4. 不同拍号的时值计算</h3>
<ul>
<li><strong>3/4拍</strong>：每拍为四分音符，每小节3拍。</li>
<li><strong>6/8拍</strong>：每拍为八分音符，每小节6拍。</li>
</ul>
<h3>5. 示例</h3>
<ul>
<li><strong>4/4拍</strong>：四分音符=1拍，二分音符=2拍，全音符=4拍。</li>
<li><strong>6/8拍</strong>：八分音符=1拍，四分音符=2拍，附点四分音符=3拍。</li>
</ul>
<h3>6. 实际应用</h3>
<ul>
<li><strong>4/4拍</strong>：四分音符=1拍，八分音符=0.5拍。</li>
<li><strong>3/4拍</strong>：四分音符=1拍，二分音符=2拍。</li>
</ul>
<h3>总结</h3>
<p>音符一拍的时值由拍号决定，分母指定每拍的音符类型，分子决定每小节的拍数。</p>

【React】学习笔记-基础篇
2025-04-07 16:55

2025佛山50公里徒步（禅城线）
2025-03-26 15:34

广州11号线开通首日体验
2024-12-28 20:51

MIDI音符代码表
2024-05-02 16:57

关于音符一拍的时值计算
2023-09-21 12:27

【React】学习笔记-基础篇2025-04-07 16:55

2025佛山50公里徒步（禅城线）2025-03-26 15:34

广州11号线开通首日体验2024-12-28 20:51

MIDI音符代码表2024-05-02 16:57

关于音符一拍的时值计算2023-09-21 12:27

【React】学习笔记-基础篇
2025-04-07 16:55

2025佛山50公里徒步（禅城线）
2025-03-26 15:34

广州11号线开通首日体验
2024-12-28 20:51

MIDI音符代码表
2024-05-02 16:57

关于音符一拍的时值计算
2023-09-21 12:27