原文: http://blog.gqylpy.com/gqy/427
置顶：来自一名75后老程序员的武林秘籍——必读（博主推荐）
来，先呈上武林秘籍链接：http://blog.gqylpy.com/gqy/401/
你好，我是一名极客！一个 75 后的老工程师！
我将花两分钟，表述清楚我让你读这段文字的目的！
如果你看过武侠小说，你可以把这个经历理解为，你失足落入一个山洞遇到了一位垂暮的老者！而这位老者打算传你一套武功秘籍！
没错，我就是这个老者！
干研发 20 多年了！我也年轻过，奋斗过！我会画原理图，会画 PCB，会模拟，会数字！玩过 PLC，玩过单片机，会用汇编，会用 C！玩过 ARM，比如 PLC，STM32，和时下正在起飞的 NXP RT1052！搞过 DSP，比如 TMS320F28335！搞过 FPGA，不管 Xilinx 还是 Altera，也不管是 Verilog 还是 VHDL，或者直接画数字电路图！我懂嵌入式系统，比如 uCOS 和 Linux！我懂开源的硬件，比如 Arduino 和树莓派!我也搞软件，学了一堆上位机的语言C#，JAVA，Python，Kotlin，Swift！会写爬虫工具，又自学写APP，不管Android 还是 IOS！
可是这一切有什么用呢？土鸡瓦狗！不值一提！干技术的永远就是最苦逼的那个人！
我相信看到这里的你，应该是个 IT 圈的人！或许是个学生，在学习某个技能！或者是个初入职场的年轻人，在啃某个技术！或者是个工程师，被项目困住，想找个资料快速突破阻碍！反正不管怎么样，你们都不会是泛泛之辈，不可能轻易交出智商税！
所以我把这份资料放进我的收费资源里，以证明接下去我要跟你讲的这本武功秘籍是可以真真实实的帮你赚到钱的！
我不知道叫它什么好，我把它写的像武林秘籍！所以我姑且叫它《武林秘籍》或者叫《赚钱秘籍》!
《武林秘籍》里封装了一个本人近期创造的一个可以一劳永逸的赚钱方法！你可以理解为躺着赚钱，或者挂机赚钱！请你放心，不是让你去违法！
我是一个IT男，从来不忽悠别人，这是我做人的原则。若此举能帮助你付起房子首付与月供，减轻一些目前高房价的压力，何乐而不为呢！
我提取里边几个要点：
- 将你手里有的资源按照说明书一步一步完成所有动作就可以躺着赚钱。
- 你不可能不劳而获，但是用这个方法确实是可以一劳永逸!
- 我用业余时间操作这个项目三个月，现在每天稳定收入300+。
- 里边会告诉你哪些是资源，怎么源源不断的获取资源。
- 里边会告诉你怎么获取爆炸的流量。
- 里边会告诉你很多黑技能（不是干坏事）。
- 总之，里边字字如金，有些东西我不告诉你可能这辈子都不会知道!
交了这波智商税，你的能力会爆涨，我说的不是你的专业能力，而是在这个社会生存的基础能力！
以上所有的东西可以规为武功的招式，但如果你想短期就实现目标，我还在说明书的最后留下了一些现成资源的下载链接，包括一些稀缺的资源，保证物有所值。这部分内容可以规为内功，继不继承由你自已决定！
好了，最后跟所有的老者不一样的是：这个老人要问你收取一点点小费，才会把无比珍贵的秘籍交到你手中！
以下是付款链接，付款后你将获取《武林秘籍》的访问密码。随后你将解锁另外一个谋生技能，在工作挣着死工资的同时，该技能也能同时帮你赚另一份钱，终身受用！
http://www.gqylpy.com/get_wlmj_pwd
能在此遇见是我们的缘分，我愿意帮助你，祝你取得成功！
传说中的武林秘籍：http://blog.gqylpy.com/gqy/401/
2-3 工程目录文件简介
-
PWA progressive web application：通过写网页的形式写手机APP
registerServiceWorker：将网页上线到支持https协议的服务器上，访问一次即可离线访问 -
index.js：整个React项目的入口文件 index.html：负责页面显示的html内容
2-4 React中的组件
-
import { Component } from ‘react’ 等价于 import React from ‘react’ const
Component = React.Component -
ReactDOM将组件中的内容挂在到页面某个节点下
-
如果项目中使用到了JSX语法，一定要引用React
-
React组件一定要引用Component基类，React组件的render函数返回的内容也是JSX，同样要引用React
2-5 React 中最基础的JSX语法
- 组件具体渲染的内容由render函数返回的内容决定
- 在js当中使用html标签称之为JSX语法，不仅可以使用html中的标签，还可以使用自定义标签
- 在JSX语法中，如果我们要使用自己创建的组件，直接通过标签形式来使用已定义的组件名即可
- 组件必须以大写字母开头，大写为组件，小写为html5标签
3-1 使用React编写TodoList功能
- React组件中render函数返回的内容只能是一个元素（即在最外层包裹一个标签）。如果想在最外层包一个不被显示的元素（即隐藏最外层的标签），需要引入Fragment，然后用Fragment占位符替换最外层包裹的标签
3-2 React 中的响应式设计思想和事件绑定
-
React作为响应式框架，并不直接对DOM进行操作，而是通过操作数据来改变DOM（React会感知数据的变化，自动生成DOM）
-
在js中，类一定会有一个constructor构造函数，当我们创建实例的时候，会优先于任何一个函数执行 3.
constructor函数会接收一个props的参数，super(props)用于调用父类的constructor函数
constructor(props) { super(props); … }
属于固定写法在js中，类一定会有一个constructor构造函数，当我们创建实例的时候，会优先于任何一个函数执行 -
constructor函数会接收一个props的参数，super(props)用于调用父类的constructor函数
constructor(props) { super(props); … }
属于固定写法constructor函数会接收一个props的参数，super(props)用于调用父类的constructor函数
constructor(props) { super(props); … } 属于固定写法 -
React中定义数据需把数据定义在状态中：this.state = {…}
-
在JSX中使用js的变量一定要使用{…}
-
React中事件绑定采用驼峰规则
-
页面中显示的内容由数据决定，要改变页面显示内容，只需要使数据发生变化
-
事件绑定时注意函数的作用域，通过bind(this)可以对作用域进行绑定
-
对this.state当中的数据进行修改不能使用引用的方式直接修改，需要调用this.setState方法对数据进行修改
3-3 实现 TodoList 新增删除功能
-
immutable：state不允许我们做任何改变
-
对state中内容进行修改需要使用备份的方式复制一份数据，再对复制的数据进行修改
-
直接修改state中内容的操作影响到React的性能优化
3-4 JSX语法细节补充
-
在JSX中写注释需要在两头使用{…}，单行注释需要注意换行
-
在JSX中解析HTML语法可在标签上加上属性dangerouslySetInnerHTML={{__html:…}}
-
可以扩大点击区域，label中for要替换成htmlFor，在对应组件上加上id属性即可扩大其点击区域
3-5 拆分组件与组件之间的传值
-
组件拆分思想：让程序分为多个组件
-
父组件向子组件传值通过属性的方式传递，子组件通过this.props…来接受对应的属性中的内容
-
子组件修改父组件的数据：父组件通过属性的方式将父组件的方法传给子组件，子组件通过this.props…来调用父组件传递进来的方法来修改父组件中的数据
3-6 TodoList 代码优化
- 本章节笔记详见代码注释
3-7 围绕 React 衍生出的思考
- 声明式开发：React为声明式开发 命令式开发：jQuery为命令式开发 React可以与其他框架并存，在index.js当中将React挂载到id='root’的DOM结点下，在index.html中存在id='root’的标签，React项目只管理id='root’标签中DOM的渲染，其他DOM可以引入其他框架。 React为组件化的开发，组件在应用中应为一个树状结构 React存在单向数据流的概念，父组件可向子组件传值，子组件只可使用不可修改，若需要修改父组件的数据，只能通过调用父组件传入的方法进行修改 React只是视图层的框架，需要配合数据流框架
- React采用函数式编程模式，为前段的自动化测试提供了极大便利
4-2 PropTypes 与 DefaultProps 的应用
-
使用PropTypes对父组件传递的属性进行校验，首先引入PropTypes from
‘prop-types’，属性校验对开发有更加友好，如果要求一定需要传值，在后面加上.isRequired -
使用DefaultProps为属性设置默认值，即使父组件没有向子组件传值，也不会出现错误
-
深入学习相关内容可以进入官网，找到Docs，右侧点击Advanced Guides，点击Typechecking With
PropTypes，查看官方的demo和文档
4-3 props，state 与 render 函数的关系
-
页面是有render函数渲染出来的，当组件的state或者props发生改变的时候，render函数就会重新执行，这个变化是实时的、同步变化的
-
当父组件的render函数被运行时，子组件的render都将被重新运行一次
4-4 React 中的虚拟DOM
4-5 深入了解虚拟DOM
- 可以使用React.createElement方法创建一个虚拟DOM（JS对象）
- React数据视图更新原理及其优点
- 虚拟DOM使得React既能开发网页应用，也能开发原生应用，在网页应用中将虚拟DOM转化为真实DOM，在原生应用中将虚拟DOM转化为组件
4-7 React 中 ref 的使用 - ref函数可以直接获取DOM元素：<input ref={(input) => { this.input = input }}
/>调用时使用this.input调用ref函数 - setState是异步函数，并不会立即执行，可能会合并执行，setState((prevState) => ({}), () => {})，第二个参数用于当setState方法执行完成后的回调
4-8 React 的生命周期函数
-
生命周期函数指在某一时刻组件会自动调用执行的函数，render就是一个生命周期函数
-
生命周期函数componentWillMount在组件即将挂载到页面的时候自动执行，即render函数执行执行之前
-
生命周期函数componentDidMount在组件挂载完成后自动执行，即render函数执行之后
-
componentWillMount和componentDIdMount只在组件被挂载到页面时执行，即在组件第一次被放在页面上时才执行
-
props和states发生变化时，组件会更新
-
props发生变化和states发生变化时组件更新有些许不同
-
生命周期函数shouldComponentUpdate在组件被更新之前，自动被执行，需要返回一个布尔类型的值
-
componentWillUpdate在组件更新之前，自动被执行
-
componentDidUpdate在组件更新之后，自动被执行
-
生命周期函数componentWillReceiveProps执行条件：从父组件接收参数，且父组件的render被重新执行了，子组件componentWillReceiveProps就会被执行
-
生命周期函数componenWillUnmount执行条件：当组件即将从页面中剔除
4-9 React 生命周期函数的使用场景
-
生命周期函数render必须存在
-
当父组件的render被重新渲染时，子组件render也会被重新渲染，此处会产生性能上的损耗
-
如果希望父组件render被重新渲染时，子组件render不重新渲染，可以使用生命周期函数shouldComponentUpdate，通过返回false来阻止子组件随着父组件更新而更新
-
性能优化的方法：（1）bind(this)作用域的绑定放在constructor中（2）setState本身就是一个异步函数，并不会立即执行，降低虚拟DOM的比对频率（3）key值同城比对提高虚拟DOM比对速度（4）借助生命周期函数shouldComponentUpdate避免不必要的组件render运行（5）将Ajax请求放在生命周期函数componentDidMount中可以避免组件render执行时重复发送请求
-
借助axios模块可以在React中发送Ajax请求，使用方法：axios.get(’/api/todolist’).then(()=>{}).catch(()=>{})成功执行then方法，失败执行catch方法
4-10 使用Charles实现本地数据mock
- 通过axios模块来发送Ajax请求：
import axios from 'axios'; componentDidMount() { axios.get('/api/todolist') .then((res) => { this.setState(() => ({ list: [...res.data] })); }) .catch(() => { alert('error') }); } 根据返回的数据来修改list中的数据，使得页面被挂载的时候就存在部分数据
-
Charles的使用方法：tools->Map Local，然后设置地址、选择本地文件位置
4-13 使用 react-transition-group 实现动画（1） -
react-transition-group安装方式：进入GitHub，搜索react-transition-group回车，选择MainDocument根据提示安装
-
使用react-transition-group前先引入：
import { CSSTransition } from 'react-transition-group'; 使用时，在需要添加动画的组件外面包裹
<CSSTransition></CSSTransition>
组件相关属性的作用已保存到文件注释中