此文在項目開發階段持續更新，記錄自己項目開發時遇到的一些問題以及思考，比較難的點會另寫文章記錄

5.3 當我辛辛苦苦看懂dnd用法后，發現當時的用法已經版本太舊，跟現在不一樣了，就挺難受的，然后根據自己寫的demo查找最新的官方文檔進行處理

note:音符
measure：一小節
“4n” is a quarter-note, “8t” is an eighth-note triplet, and “1m” is one measure.
“4n”，一個四分音符，"8t"一個八分音符三重音和"1m"一個小節。

查了所有的依賴
“dependencies”: {
“axios”: “^0.17.1”,
“gh-pages”: “^1.1.0”,
“lodash”: “^4.17.4”,
“normalize.css”: “^7.0.0”,
“react”: “^16.2.0”,
“react-dnd”: “^2.5.4”,
“react-dnd-html5-backend”: “^2.5.4”,
“react-dom”: “^16.2.0”,
“react-redux”: “^5.0.6”,
“react-router-dom”: “^4.2.2”,
“react-scripts”: “1.0.17”,
“redux”: “^3.7.2”,
“tone”: “^0.11.11”,
“uuid”: “^3.2.1”

“gh-pages”: “^1.1.0”,是可以將項目預覽到github的一個叫gh-pages的分支上的依賴，參考鏈接
lodash 是一個 JavaScript 實用工具庫，提供一致性，及模塊化、性能和配件等功能。

Lodash 消除了處理數組的麻煩，從而簡化了 JavaScript、 數字、對象、字符串等。它的模塊化方法非常適合：
迭代數組，對象和字符串、操作和測試值、創建復合功能，參考鏈接

normalize.css， Normalize.css到底有什么用
不同的瀏覽器在對于CSS沒有定義的一些樣式屬性是不一樣的，
比如沒有在自己的CSS里面規定超鏈接有沒有下劃線的時候，有些瀏覽器有，有些瀏覽器沒有；
再比如有一些瀏覽器規定的超鏈接默認顏色是藍色，有一些又是黑色。
而這個CSS的功能就是對幾乎所有的默認樣式進行重置，讓所有的瀏覽器上對于未定義的樣式瀏覽效果達到一致
（雖然說無法完全一致，但至少可以消除掉大部分差距）
當然如果你自己的CSS已經對默認樣式進行了重置，不使用它也是可以的。 參考鏈接

“react-dnd”: “^2.5.4”, React DnD是一組React 高階組件，可以在保持組件分離的前提下幫助構建復雜的拖放接口。它非常適合Trello 之類的應用程序，其中拖動在應用程序的不同部分之間傳輸數據，并且組件會根據拖放事件更改其外觀和應用程序狀態。
react-dnd-html5-backend ， react-dnd-html5-backend 是官方的html5 backend 實現。主要暴露了一個工廠函數，傳入 manager 來獲取 HTML5Backend 實例。 參考鏈接

tone, tone.js是一個用于在瀏覽器中創建交互式音樂的Web音頻框架。tone.js的架構旨在讓希望創建基于web的音頻應用程序的音樂愛好者和音頻程序員熟悉。參考鏈接

uuid 生成一個唯一的標識符
UUID介紹
UUID是Universally Unique Identifier的縮寫，它是在一定的范圍內唯一的機器生成的標識符，使用RFC規范。

結構
UUID 是一個128bit的數字，也可以表現為32個16進制的字符，中間用”-”分割

3F2504E0-4F89-11D3-9A0C-0305E82C3301

其中的字母是16進制表示，大小寫無關。

時間戳＋UUID版本號，分三段占16個字符(60bit+4bit)，
Clock Sequence號與保留字段，占4個字符(13bit＋3bit)，
節點標識占12個字符(48bit)
————————————————
版權聲明：本文為CSDN博主「VoiceU」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/Voiceu/article/details/116351979

Public文件下的入口文件index.html
< noscript>標簽的使用，是在當瀏覽器設置了禁用js的時候，會彈出這個標簽里的內容

manifest.json查了好像是做html5+移動應用的配置文件

https://www.cnblogs.com/tuyile006/p/5395909.html
https://ask.dcloud.net.cn/article/94
也有點像是谷歌瀏覽器擴展程序manifest.json參數詳解
https://blog.csdn.net/weixin_34260991/article/details/94504261?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control

https://blog.csdn.net/huazai2019wzqj/article/details/105886094?spm=1001.2014.3001.5501

后面回顧之前的react視頻，50集react腳手架文件public講解里面講了，就是應用加殼，是移動端的配置文件，不是瀏覽器擴展程序

繼續
// if we’re in a dev environment and have the redux devtools, use them
// 如果是在開發環境，并且有redux devtools，就需要把devtools用上，需要在第二個參數里面寫進去
console.log(process.env.NODE_ENV);
console.log(process);
let store;
if (process.env.NODE_ENV === ‘development’ && window.__ REDUX_DEVTOOLS_EXTENSION__ ) {
store = createStore(
reducers,
window.__ REDUX_DEVTOOLS_EXTENSION__ ()
);
}
else
store = createStore(reducers);

在這里，扒一扒process.env
process對象是全局變量，它提供當前node.js的有關信息，以及控制當前node.js的有關進程。因為是全局變量，它對于node應用程序是始終可用的，無需require()。
既然process都是一個對象了，env自然是它的一個屬性，這個屬性返回包含用戶環境信息的對象。在終端輸入node后，在輸入process.env可以看到打印出來的信息。
主角出場 process.env.NODE_ENV
NODE_ENV不是process.env對象上原有的屬性，它是我們自己添加上去的一個環境變量，用來確定當前所處的開發階段。一般生產階段設為production，開發階段設為develop，然后在腳本中讀取process.env.NODE_ENV。
https://blog.csdn.net/xiaolinlife/article/details/107032533
理解webpack之process.env.NODE_ENV詳解(十八)
這個是webpack的東西
https://www.cnblogs.com/tugenhua0707/p/9780621.html

這里用的是非侵入式
侵入式是要安裝redux-devtools-extension該模塊的，在文件里引用模塊。
https://blog.csdn.net/achenyuan/article/details/80884895
非侵入式使用中間件的情況里面，compose是從redux中引入的
我在自己的例子里面進行了試驗驗證
import { createStore ,applyMiddleware,compose} from ‘redux’

let store = process.env.NODE_ENV === ‘development’ ?(
createStore(reducer,compose(applyMiddleware(thunk), window. __ REDUX_DEVTOOLS_EXTENSION__ ()))
):null
export default store

5.4
我自己的不需要登錄功能這些，只需要在線編輯玩耍即可

webpack實例解析五（用.env.development設置環境變量）
https://blog.csdn.net/weixin_43206949/article/details/99460759
這個是在根文件夾目錄下的.env.development和.env.production里面定義的

// api http://localhost:5000/ 后端接口
// web http://localhost:3000/ 前端接口
export const API_BASE_URL = process.env.REACT_APP_API_URL;
export const WEB_BASE_URL = process.env.REACT_APP_WEB_URL;

.env.development和.env.production也是webpack 的內容

https://blog.csdn.net/weixin_35773751/article/details/106069911?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-3.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-3.control

https://blog.csdn.net/qq_28827635/article/details/106271580

相當于在weibpack的環境下，
.env 全局默認配置文件，不論什么環境都會加載合并
.env.development 開發環境下的配置文件
.env.production 生產環境下的配置文件
process.env是一個對象，里面不包括NODE_ENV，這個是取決于我們啟動的時候的環境，
在.env.development和.env.production里還可以設置其他的配置，React里面是以REACT_APP_開頭，Vue則是VUE_APP_，
比如REACT_APP_API_URL=http://localhost:5000/，
要想用這個，需要在js文件里面寫process.env.REACT_APP_API_URL，又回到了這個對象
比如
export const API_BASE_URL = process.env.REACT_APP_API_URL;
而且這三個變量不能加.js文件名后綴

process.env.PUBLIC_URL中PUBLIC_URL是什么，
https://create-react-app.dev/docs/using-the-public-folder/#docsNav
PUBLIC_URL是public文件夾的地址
這不是PUBLIC_URL變量的使用方式.根據文檔,您可以在HTML中使用PUBLIC_URL:
< link rel=“shortcut icon” href="%PUBLIC_URL%/favicon.ico">
或者在你的JavaScript中:
render() {
// Note: this is an escape hatch and should be used sparingly!
// Normally we recommend using import for getting asset URLs
// as described in “Adding Images and Fonts” above this section.
return <img src={process.env.PUBLIC_URL + ‘/img/logo.png’} />;
}
PUBLIC_URL不是您設置為您選擇的值的東西,它是一種在Webpack的構建系統之外的部署中存儲文件的方法.
要查看此內容,請運行您的CRA應用并將其添加到src/index.js文件中:
console.log('public url: ', process.env.PUBLIC_URL)
您將看到該URL已存在.

Adding Assets Outside of the Module System#
You can also add other assets to the public folder.
Note that we normally encourage you to import assets in JavaScript files instead. For example, see the sections on adding a stylesheet and adding images and fonts. This mechanism provides a number of benefits:
? Scripts and stylesheets get minified and bundled together to avoid extra network requests.
? Missing files cause compilation errors instead of 404 errors for your users.
? Result filenames include content hashes so you don’t need to worry about browsers caching their old versions.
However there is an escape hatch that you can use to add an asset outside of the module system.
If you put a file into the public folder, it will not be processed by webpack. Instead it will be copied into the build folder untouched. To reference assets in the public folder, you need to use an environment variable called PUBLIC_URL.
Inside index.html, you can use it like this:

< link rel=“icon” href="%PUBLIC_URL%/favicon.ico" />

Only files inside the public folder will be accessible by %PUBLIC_URL% prefix. If you need to use a file from src or node_modules, you’ll have to copy it there to explicitly specify your intention to make this file a part of the build.
When you run npm run build, Create React App will substitute %PUBLIC_URL% with a correct absolute path so your project works even if you use client-side routing or host it at a non-root URL.
In JavaScript code, you can use process.env.PUBLIC_URL for similar purposes:
render() {
// Note: this is an escape hatch and should be used sparingly!
// Normally we recommend using import for getting asset URLs
// as described in “Adding Images and Fonts” above this section.
return <img src={process.env.PUBLIC_URL + ‘/img/logo.png’} />;
}
Keep in mind the downsides of this approach:
? None of the files in public folder get post-processed or minified.
? Missing files will not be called at compilation time, and will cause 404 errors for your users.
? Result filenames won’t include content hashes so you’ll need to add query arguments or rename them every time they change.
When to Use the public Folder#
Normally we recommend importing stylesheets, images, and fonts from JavaScript. The public folder is useful as a workaround for a number of less common cases:
? You need a file with a specific name in the build output, such as manifest.webmanifest.
? You have thousands of images and need to dynamically reference their paths.
? You want to include a small script like pace.js outside of the bundled code.
? Some libraries may be incompatible with webpack and you have no other option but to include it as a < script> tag.
Note that if you add a < script> that declares global variables, you should read the topic Using Global Variables in the next section which explains how to reference them.

在public的入口index.html處進行驗證，結果確實是public文件夾的位置，但是沒有在js里面驗證，因為有路由的關系
< a href="%PUBLIC_URL%/favicon.ico">dian</ a>

然后刪除了rander內部的原有內容，進行驗證，發現確實是public的位置，驗證如下：

const dizhi = '/favicon.ico' ReactDOM.render(<a href={process.env.PUBLIC_URL+dizhi} >dian</a>// <Provider store={store}>// {/* PUBLIC_URL代表public文件夾的路徑，在public下的index里的link里有 */}// <BrowserRouter basename={process.env.PUBLIC_URL}>// <Switch>// <Route exact path="/" component={App} />// <Route path="/share/:id" component={App} />// </Switch>// </BrowserRouter>// </Provider>, document.getElementById('main') );

確實能點擊跳轉到目標地址

<BrowserRouter basename={process.env.PUBLIC_URL}> https://www.cnblogs.com/snowhite/p/14005435.html basename的屬性就相當于自定義BASE，會自動加上 <BrowserRouter>

一個使用了 HTML5 history API 的高階路由組件，保證你的 UI 界面和 URL 保持同步。此組件擁有以下屬性：
basename: string
作用：為所有位置添加一個基準URL
使用場景：假如你需要把頁面部署到服務器的二級目錄，你可以使用 basename 設置到此目錄。

<BrowserRouter basename="/minooo" /> <Link to="/react" /> // 最終渲染為 <a href="/minooo/react">

搞懂dnd，然后是tone 的基本用法
搞出來了一點dnd的用法，明天慢慢繼續新的
5.6
Dnd 的使用，分為三個部分，
DndProvider：可理解為其包裹的組件提供dnd的功能，
我將之比喻為提供棋盤和棋子的人，包裹的組件是‘棋盤’，
例子是將state存放在這一層，然后傳如處理函數

Container：可理解為‘棋盤’，進行展示頁面，也可以說是UI組件，其 中可可以有普普通通的UI子組件，比如div，span或者其他
導入的子組件，
也可以是可拖動的和放置被拖動的組件?‘棋子’

Example：可拖動的組件或者可被放置的位置的組件，即‘棋子’，
需要有特殊的配置，如果是函數式組件的話需要用useDrag 或者useDrop，或者都用，即可拖動又可以被放置，這兩個
函數會返回一個數組，數組的第二個參數是drag或者drop，
這倆可以直接當做組件的ref，也可以先定義ref然后把ref當
做參數傳入，比如drop(ref), drag(ref)，或者drag(drop(ref)),
注意防抖，不然會出現報錯，如下

beat-bucket開始
只看client部分，其中的component里account相關的都是注冊賬戶

1. @DragDropContext(HTML5Backend) 2. export default class Contaier extends Component { 3. render() { 4. return ( 5. <div> 6. <Dustbin/> 7. <Box/> 8. </div> 9. ); 10. } 11. }

@DragDropContext(HTML5Backend)
是JavaScript裝飾器
鏈接1

https://blog.csdn.net/zl_best/article/details/94447018?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162029090316780274167689%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=162029090316780274167689&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduend~default-2-94447018.first_rank_v2_pc_rank_v29&utm_term=Javascript%E8%A3%85%E9%A5%B0%E5%99%A8

所以
1.
@DropTarget(type, spec, collect)
2. class MyComponent extends Component {
3. /* … */
4. }
這個可以參考

類的裝飾
當裝飾的對象是類時，我們操作的就是這個類本身，即裝飾器函數的第一個參數，就是所要裝飾的目標類。
@decorator
class A {}

// 等同于
class A {}
A = decorator(A) || A;
即是MyComponent = MyComponent(type, spec, collect) || MyComponent

自己寫的時候出現
對修飾器的實驗支持是一項將在將來版本中更改的功能。設置+“experimentalDecorators”+選項以刪除此警告。
然后解決后發現修飾器也不能用，需要下載其他的依賴，所以先暫時改用其他方法

Drag中的spec里beginDrag的return在drop里面的spec中的drop能通過monitor.getItem()得到，
通過collect可以將drop從drag那邊收到的組件信息傳進當前組件，但是如果把monitor傳進去，會實時監控，一旦取消drop就沒了

5.11
store.subscribe()

---

Store 允許使用store.subscribe方法設置監聽函數，一旦 State 發生變化，就自動執行這個函數。
import { createStore } from ‘redux’;
const store = createStore(reducer);

store.subscribe(listener);
顯然，只要把 View 的更新函數（對于 React 項目，就是組件的render方法或setState方法）放入listen，就會實現 View 的自動渲染。
store.subscribe方法返回一個函數，調用這個函數就可以解除監聽。
let unsubscribe = store.subscribe(() =>
console.log(store.getState())
);

unsubscribe();

作者：珍珠林
鏈接：https://www.jianshu.com/p/9dcfa43d4e5a
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
https://www.jianshu.com/p/9dcfa43d4e5a

5.24
Redux中遇到對象里有對象，但是要修改其中的值，比如此處的project里的tracks包含了sequence里面還有數組，關系比較復制，之前用的淺拷貝就不能生效了，明天改成深拷貝

6.4終于找到問題所在了
之前找遍了也無法找到原因，后來查看現版本的tone官方文檔，對比發現，模板案例的老版本0.11.11里面的時間可以用字符串相加的形式，如下

但是新版本已經不支持了，新版本的支持如下，

所以改回了舊版本，等后面有時間的話再去修改時間的問題，這個就需要樂理知識了，改回來還得修改部分代碼，畢竟版本相差太多，比如
將 this.synth = new Tone.Synth().toDestination()
改為 this.synth = new Tone.Synth().toMaster()

其他的暫時不用修改

這是一個非常嚴重的問題
目前可以把note添加進去，但是播放器并不會播放新加的，因為目前只是把初始化的default數據init成part了，對新加入的只是在ui層面上顯示了，又遇到了深淺拷貝的問題
這次是之前的深拷貝出了問題，因為之前設置了所有reducer都深拷貝，導致后面的sequence（state最內部的一個對象）的監聽，代碼邏輯是監聽sequence的改變，一改變就會調用onSequenceChange，這里面又會調用initPart初始化音軌，所以無法播放全部（因為每個音軌的bpm不同，快的播放到一半，切換currentnote會導致sequence改變，然后就會初始化音軌，就無法正常播放），因此需要對reducer進行處理，不是單純的深拷貝，分情況考慮，這個currentnote的就要每一層的淺拷貝去達到目的層位，

每一層的淺拷貝sequence之上的對象，這樣可以在currentnote改變的時候sequence不改變，就可以解決問題了

總結

以上是生活随笔為你收集整理的React_music开发日记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。