React_music开发日记
此文在项目开发阶段持续更新，记录自己项目开发时遇到的一些问题以及思考，比较难的点会另写文章记录
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-2allsobaiduend~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开发日记相关推荐
- 广东海洋大学体育馆管理系统 开发日记2
GYM用来对体育馆进行管理,主要功能包括人员管理.场地使用管理.体育赛事管理.器材管理.运营金额数据报表. GYM包括三种角色(Actor): 1. 普通用户(User) 普通用户指的是GYM系统 ...
- 开发日记-20190513 关键词 汇编语言（六）
其实,每次当我写一篇开发日记,并且这篇开发日记并没有关键词,或者我并没有和你扯东扯西的情况下... 这意味着我这天偷懒了= = ;AddTwo.asm --两个32位整数相加.386.model fl ...
- 开发日记-20190328 关键词 利用eolinker一键快速生成API接口文档
今天感觉效率真的很低= =各个层面的,apk发布到现场发现出现了问题,所以一个下午都在忙着解决现场出现的问题,领导一直打电话询问进度,午觉也没有睡所以今天预计的很多计划都处于停滞状态,像昨天规划的今天 ...
- LayIM.AspNetCore Middleware 开发日记（一）闲言碎语
前言 前几天写博客的时候突然看见了历史上的今天.不禁感慨时光如梭,这系列博客后来被我标注了已经过时,但是还有很多小伙伴咨询我.既然过时就要更新,正好 .NET Core 也出来很久了,于是乎想到把La ...
- YunTable开发日记（3） – BigTable的数据模型和调用接口 （转载）
源地址:http://peopleyun.com/?p=665 本文将深入分析BigTable的数据模型,并介绍它是如何被调用的. 数据模型 就像向我之前所说的那样,其实BigTable顾名思义,是一 ...
- ping 工具开发日记（1）
ping 工具开发日记(1) 2021.1.15 hyp 0.准备 开发语言:python 3.8 开发环境:windows 7 开发工具:pycharm 应用功能:1.能实现不同系统(windows ...
- 【原创】shadowebdict开发日记：基于linux的简明英汉字典（三）
全系列目录: [原创]shadowebdict开发日记:基于linux的简明英汉字典(一) [原创]shadowebdict开发日记:基于linux的简明英汉字典(二) [原创]shadowebdic ...
- 小程序分享到朋友圈功能_小程序开发日记 分享到朋友圈
贵州 水司楼 图片来自 视频截图 最近微信小程序开始公测小程序分享到朋友圈的功能了.记得前两天刚开始内测时,小程序社区里就不断有人发帖问关于分享到朋友圈的各种问题.很显然大家对这个新特性都特别关心.那 ...
- Linux 小程序开发日记（终章）(pyqt+yolov5)
Linux 小程序开发日记(终章) 哈喽大家好,我是爱喝欢乐水的柳橙汁,这一篇,是最后一篇啦.我会将所有个过程都梳理一遍. 关于代码的详细注释,大家就参考一下之前的笔记吧.这一篇博客我就放上我精简的代 ...
- 云音乐vue开发日记
云音乐vue开发日记 前言 2020-11-21 1.vue中sass的配置 2.页面布局 3.引组件 2020-11-22 1.el-menu的使用 2.css经验 3.element-ui修改默认 ...
最新文章
- 【模块】脉搏血氧仪和心率监测仪生物传感器MAX30102
- intel服务器芯片组介绍,Intel芯片组的简介
- python 正则表达式应用——缩写词扩充
- input在iOS里的兼容性
- c语言socket面试题,【C++工程师面试宝典】学习说明_互联网校招面试真题面经汇总_牛客网...
- 基于JAVA+SpringMVC+Mybatis+MYSQL的就业信息管理系统
- 重要：Git stash的使用
- fireworks8序列号：
- 华为软件测试笔试真题之变态逻辑推理题【二】华为爆火面试题
- PLC扩展模块西门子smart200PLC扩展RS485modbus以太网模块
- snapchat_如何在Snapchat快照中添加背景
- 酒精需要存放在防爆柜中吗？
- Autodesk ReCap-现实捕获技术
- mysql表的基础操作： Create,，Retrieve，Update，Delete（大量示例）
- 【LaTex】第二行作者居中（IEEEtran模板）
- 大白话5分钟带你走进人工智能-第二十八节集成学习之随机森林概念介绍(1)
- 创世战车服务器维护,《创世战车》5月24日版本更新内容公告
- c0语言 测试用例,按照 Promise/A+ 手写Promise，通过promises-aplus-tests的全部872个测试用例...
- 国家自然科学基金的“关键科学问题”(转)
- 日本游戏制作学校探秘（原创）