Webstorm编辑器的一些小操作
因为之前一直是在用VsCode在写代码，所以刚刚接触Webstorm还不是很熟悉，下面是我今天碰到的问题。
1.因为这是款需要破解的软件所以很显然需要小小破解下，我使用的方法如下：
打开网址http://idea.lanyus.com/
点击获得注册码就行的，但是记得一定要把那个“0.0.0.0 account.jetbrains.com”添加到hosts文件中。
很多人会出现host权限问题无法修改，记得更改下hosts文件的权限
找不到hosts地址的请看这C:\Windows\System32\drivers\etc
然后右键点击hosts→属性→选择自己的用户Users→点击编辑→勾选完全控制即可，当然可能因为安全因素，记得改完hosts后再把权限回退回来
three.js基本概念
1.下载
GitHub上的地址https://github.com/mrdoob/three.js，如果想先感受下three.js的魅力可以先到这逛逛https://threejs.org/
看下他的目录结构
Build目录：包含两个文件，three.js 和three.min.js 。这是three.js最终被引用的文件。一个已经压缩，一个没有压缩的js文件。
Docs目录：这里是three.js的帮助文档，里面是各个函数的api。
Editor目录：一个类似3D-max的简单编辑程序，它能创建一些三维物体。
Examples目录：一些很有趣的例子demo，可惜没有文档介绍。对图像学理解不深入的同学，学习成本非常高。
Src目录：源代码目录，里面是所有源代码。
Test目录：一些测试代码，基本没用。
Utils目录：存放一些脚本，python文件的工具目录。例如将3D-Max格式的模型转换为three.js特有的json模型。
.gitignore文件：git工具的过滤规则文件，没有用。
LICENSE文件：版权信息。
README.md文件：介绍three.js的一个文件，里面还包含了各个版本的更新内容列表。
2.三大组件
在Three.js中，要渲染物体到网页中，我们需要3个组建：场景（scene）、相机（camera）和渲染器（renderer）。有了这三样东西，才能够使用相机将物体渲染到网页中去。
场景与相机还有渲染器之间的关系是，我们拿拍电影来举例子，场景就类似演员和道具等各个实体的物质，然后相机的目的就是从不同角度去取样来获取大量的“帧照片”，我们人眼能感知的保留帧数大概是1/24，也就是每秒24帧动画，所以我们拍照也不需要特别多帧数，因为这会消耗程序的性能，不过大多数游戏的fps最低都会超过30，最后渲染器渲染出相机拍摄的结果。
接下来上一个画线的demo，基本了解到三大组件的功能，具体参数有很多，等日后再慢慢学习，其实整个创建过程跟canvas很相似。
react开发依赖粗阅览
1.react-hot-loader
hot loader 是干嘛的呢？引用官网的一句话就是
React Hot Loader is a plugin for Webpack that allows instantaneous live refresh without losing state while editing React components.
简单的讲，就是使用 react 编写代码时，能让修改的部分自动刷新。但这和自动刷新网页是不同的，因为 hot-loader 并不会刷新网页，而仅仅是替换你修改的部分，也就是上面所说的 without losing state。
我之前用的就是单纯的热更新，每次更新保存完代码都会导致webpack重新打包，然后刷新所有页面，而使用这个能显著提高自己的调试效率！
2.ali-oss
对象存储 ( Object Storage Service, 简称 OSS ) OSS 相信大家都听过, 它是阿里云对外提供的海量, 安全和高可靠的云存储服务. 大家可以把自己网站的资源存上面加快自己网站速度 ，这里是官方文档http://doc.oss.aliyuncs.com/
3.Axios
官方文档https://www.kancloud.cn/yunye/axios/234845
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
我之前用的是fetch，但是大致看了下常用语法基本是类似的，具体差异在哪里，我查阅了下人家的博客
Axios本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，从它的官网上可以看到它有以下几条特性：
1.从 node.js 创建 http 请求
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口（重要，方便了很多的操作）
这个支持防止CSRF其实挺好玩的，是怎么做到的呢，就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。Axios既提供了并发的封装，也没有fetch的各种问题（参见《fetch没有你想象的那么美》《fetch使用的常见问题及解决方法》），而且体积也较小，当之无愧现在最应该选用的请求的方式。
fetch号称是AJAX的替代品，它的好处在《传统 Ajax 已死，Fetch 永生》中提到有以下几点：
1.更加底层，提供的API丰富（request, response）
2.脱离了XHR，是ES规范里新的实现方式
3.符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
4.更好更方便的写法，诸如：
这只是概念上的对比，具体问题等以后接触多了，再来总结！
4.PropTypes
PropTypes定义为组件类自身的属性，用以定义prop的类型。在开发模式下，当提供一个不合法的值作为prop时，控制台会出现警告；在产品模式下，为了性能考虑应忽略propTypes.
所以这是一个在开发环境下用的东西，主要避免忽视组件类中的属性参数出现问题，帮助开发人员更好地debug
5.query-string
querystring从字面上的意思就是查询字符串，一般是对http请求所带的数据进行解析，之前学姐有在课上一行一行敲了个简单的解析函数，所以基本就是看文档使用就行了。
6.react-custom-scrollbars
这个就是个滚动条的组件，之前项目用过，在页面内置入滚动条确实蛮方便，而且样式也比浏览器自带的好看！
7.react-addons-css-transition-group
React为动画提供了一个附加组件ReactTransitionGroup，这个附加组件是动画的底层API，并且还提供了一个附件组件ReactCSSTransitionGroup，当一个React组件插入或者移除DOM时，它是一种简单的去执行css转换和动画的方法。
这是个好东西啊，以前怎么没发现，之前绞尽脑汁在想css的过渡动画效果，有了这个页面的交互效果好又省事儿！
8.react-loadable
厉害的来了，上面我们介绍了react-hot-loader，那个是作为开发人员使用的打包代码热加载工具，而这个就是能影响到响应性能的东西。
这里我转载里的另一篇文章
原文地址 https://medium.com/@thejameskyle/react-loadable-2674c59de178
当你有一个很大的应用，把所有代码打成一个单一的包那么应用的启动时间会成问题（现在的前端打包工具在生产环境一般都是把所有 js 拼接压缩成一个长文件，css 拼接压缩成一个长文件，配合 source map 发到用户的浏览器。如果项目使用到的包很多，这个单一的 js 文件会很大，严重延迟网页的首次加载时间）。你需要开始分拆你的应用到分离的包，然后在需要的时候动态加载。
（上图注意深色阴影部分，左边的阴影是连成一块，右边的是分成了小块。作者作图的时候估计没有考虑到很多红绿色盲的人。不过红绿色盲的话估计也不好做前端）
如何分割一个包到多个是打包工具诸如 Browserify 和 Webpack 等早就很好解决了的问题。
但是现在你需要找出你的应用里可以分割到其他包并动态加载的部分。你也需要在你的应用里找到一个当有组件在加载时的交流方式（估计指 loading 组件）。
基于路由的分割 vs 基于组件的分割
你会遇到的一个常规建议是把你的应用分成多个路由，然后一个个异步加载。这种方式似乎对大多数应用有作用，点击一个链接然后加载一页新的页面并不是一个太差的体验。
但是我们可以做得比这个更好。
React 的大多数路由工具都是一个简单的组件。没有什么特别的。所以如果我们优化组件而不是把责任交给路由会给我们带来什么？（指在组件层动态优化而不是传统的动态加载路由）
（上图可以看到，路由分割的粒度还是比较大，一个路由就是一条系列组件，而组件的分割更细，在路由里还可以细分）
效果是显著的。除了路由之外，有太多的地方你可以轻松地分割你的应用。例如 modals、tabs，还有其他更多的隐藏 UI 组件，这些都是直到用户的某些交互完成后才展现的（所以适合延迟加载）。
更别提其他所有在更高优先级内容加载完成后才会延迟加载的部分。例如在你的页面最底部有的组件需要加载一堆包（虽然组件本身可能不大，但是这些底部组件可能引入一些很大的第三方包）：为什么这些需要和顶部的组件一起加载呢？
你也可以继续轻松地分割路由，因为路由也仅仅是组件而已。怎么对你的应用最好怎么做。
但是我们需要使在组件层面分割和路由层面分割一样容易。分割一块新位置应该简单到改变应用的几行代码一样容易，其他剩余的工作应该是自动化的。
当然使用方法就去查文档吧，不过其中一点让我眼前一亮，就是如何避免加载组件时的闪烁
因为你用loading组件代替正在渲染的组件，有时组件加载非常快，小于 200ms，提示加载的组件会在界面上一闪而过。所以你的loading组件展示的时间是需要一个delay的，如图。
想让用户得到即时的响应，有种优化手段就是Preloading
作为一种优化手段，你也可以在一个组件被渲染之前预加载它。 例如，如果你需要一个按钮被点击时加载一个新的组件，你可以在这个用户把鼠标 hover 到这个按钮之上时就开始预加载这个组件。 被 Loadable 构建的组件会开放一个 preload 静态方法刚好做到这点（指预加载） 。
一段误会的代码
因为之前只在java里见过这样的东西，那个名字叫注解，于是乎我去百度JavaScript的注解，怎么啥
都查不到，后面经过询问学长得知这是JavaScript的装饰器，真的hin尴尬了
装饰器是用一个代码包装另一个代码的简单方式。这个概念与之前所听过的函数复合和高阶组件相似。这已经用于很多情况，就是简单的将一个函数包装成另一个函数，我今天看到的是类属性装饰器：
装饰器函数调用三个参数：
- target-被修饰的类
- name-类成员的名字
- descriptor-成员描述符（对象会将这个参数传给Object.defineProperty）
最后贴个今天看到的科普知识：
色温是照明光学中用于定义光源颜色的一个物理量。即把某个黑体加热到一个温度，其发射的光的颜色与某个光源所发射的光的颜色相同时，这个黑体加热的温度称之为该光源的颜色温度，简称色温。其单位用“K”（开尔文温度单位）表示。
正常日光下的色温为6500K，这个色温值下图片显示为真实色彩，即眼睛看到的原始色彩，而当色温值大于6500K时，蓝绿色占主导，色调偏冷，低于6500K时，红黄色占主导，色调偏暖，就会出现偏色、色差等问题。