今天工作空余，整理原来的工作笔记，看到这个思维导图，这个是刚刚学习react的时候整理的，现在还能看，分享出来。
那时候刚刚接触react，需要上手的技术栈是react+mobx。几乎从零开始，先在b站看视频，认识react的原理，慢慢梳理项目代码，并总结。成长都是在一次次焦虑，和做项目中进行的。最近一年半，成长真的很多。
阅读顺序：从右上角开始，从上往下看。
React简介
介绍
Facebook,区别与angular是谷歌的（三大框架一大抄：angular最早，印度用的多,Vue最火，国内,React最流行，美国）
概念
library 库:小巧，可以很方便从一个库切换到另一个库，代码几乎不会改变。只提供了特定API
framework框架：（全家桶）大而全，框架提供一整套解决方案，项目中间切换框架较困难
React和Vue比较
组件化和模块化
React没有vue中component 组件模板文件，以Js来表现
开发团队
React Facebook团队
Vue 尤雨溪
社区
React开源较早，社区强大
Vue社区较小
移动APP
React Native无缝迁移到移动APP（百度，腾讯，特斯拉等ISO&Androw）
Vue Weex（阿里的所有项目）
其他
只处理view逻辑
一个最基本的 React 组件由数据和JSX两个主要部分构成
核心概念
虚拟DOM
DOM：浏览器中提供的概念，JS对象表示页面元素，提供操作DOM对象API
虚拟DOM：用JS对象形式，模拟页面的DOM和DOM嵌套关系
目的：实现页面DOM的高效更新
Diff算法
tree diff：新旧DOM树，逐层对比过程，整棵DOM数对比完，所有需要按需更新的元素，必然能找到
component diff：在tree diff时，每一层组件级别对比
element diff：组件对比时，如果组件类型相同，再进行元素级别对比
JSX
js中混合写入类似HTML语法,符合XML规范的js语法
本质是在运行的时候被转换成React.creatElement执行
JSX 使用的是预编译模板，React 提供了一个预编译工具，叫 react-tools
JSX比HTML规则严格，必须闭合标签。如果遇到<就当做是html，如果是{就当做是js
在jsx里面写js表达式，要把js写到{}里面
jsx里面写注释用{/* */}
创建一个react组件
class TestComponent extends React.Component {
render() {
return <div>123123</div>
}}
ReactDom.render(<TestComponent/>, domElement)
属性名称驼峰命名
React DOM 在渲染之前默认会 过滤 所有传入的值。它可以确保你的应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。
props
是竹笕里面的水，单向数据流
props是组件唯一的数据来源
一个组件没有传递任何属性的时候，我们调用了this.props.data就会使用默认的属性值
this.props.children
表示的是所有子节点的属性
this.props
属性和组件的属性值是一一对应
组件标签中的标签属性和子节点构成的集合
props永远是只读的
state
不改变的值使用props,而改变的值我们要使用state
理解
props 数据接收来的，只读 this.props.data state 数据在组件定义 可以改变父组件 在框架里用mobx observable 观察者 代替state 可以观察数据变化，智能检测传值
React实操
webpack
weback项目：基于Node构建，支持Node API和语法。约定大于配置。
实时打包： webpack-dev-server
创建插件实例对象
项目中使用react
1、导入接收成员
2、创建虚拟DOM元素
3、使用ReactDOM把虚拟dom渲染到页面上
组件
组件的返回值只能有一个根元素
写代码要注意的
注意报错，验证，否则会打包失败。比如多了空格
react中循环必须加key，否则报错
类型不匹配，容易报undefined错误
其他
gulp
gulp --run 等于npm run dev.
D:\Develop\nodejs\node.exe D:\Develop\code\lims-web\node_modules\gulp\bin\gulp.js --color --gulpfile D:\Develop\code\lims-web\gulpfile.js -s web-liangei --run
this.props
createClass
map
map方法不会对空数组进行检测 map返回新数组。必须有return map方法不会改变原始数组
只能遍历数组
JS中map（）与forEach（）的用法相同点：
1.都是循环遍历数组中的每一项
2.每次执行匿名函数都支持三个参数，参数分别为item（当前每一项），index（索引值），arr（原数组） 3.匿名函数中的this都是指向window
4.只能遍历数组
map方法返回一个新的数组，数组中的元素为原始数组调用函数处理后的值 也就是map（）进行处理之后返回一个新的数组
⚠️注意：map（）方法不会对空数组进行检测
map方法不会改变原始数组
js是否加分号
一行开头是括号或者方括号的时候加上分号就可以了，其他时候全部不需要。
是专门为元素服务的，为其定义标记
变量声明
**var**
可以修改，如果不初始化会输出undefined
**let es6**
局部变量，作用于块级作用域+for，不能重复声明
**const**
不可以修改，而且必须初始化
**暂时性死区TDZ**
ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。 总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。
JSON
JSON.parse()
将接收的字符串数据转换为 JavaScript 对象
组件
创建组件
无状态组件：用构造函数创建组件
用props接收数据，return 虚拟dom
有状态组件：es6 class 创建组件
以上两者区别：有无state属性
注意
组件名称必须大写
父组件向子组件传递数据
组件封装在单独文件中
使用{...obj}扩散传递数据
JS
形参和实参
实参 很多const定义的常量、变量、表达式、函数，是确定的值
形参（虚拟变量） V等等，函数用来传值，从前面的实参把数据传给形参在函数里面进行使用，函数结束后形参释放内存，在函数外面不起作用
promise
ES6 Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法js。
mobx
状态管理解决方案
对于应用开发中的常见问题，React 和 MobX都提供了最优和独特的解决方案。React 提供了优化UI渲染的机制， 这种机制就是通过使用虚拟DOM来减少昂贵的DOM变化的数量。MobX 提供了优化应用状态与 React 组件同步的机制，这种机制就是使用响应式虚拟依赖状态图表，它只有在真正需要的时候才更新并且永远保持是最新的。
**state(状态)**
状态是驱动应用的数据
observable(value) && @observable
将 React (函数)组件转换为它们需要渲染的数据的衍生
**observer(观察者)**
被observer修饰的组件，将会根据组件内使用到的被observable修饰的state的变化而自动重新渲染
observer 会将 React (函数)组件转换为它们需要渲染的数据的衍生。 使用 MobX 时没有所谓的智能和无脑组件。 所有的组件都会以巧妙的方式进行渲染，而只需要一种简单无脑的方式来定义它们。MobX 会确保组件总是在需要的时重新渲染，但仅此而已。
**action(动作)**
actions ------> state ------> view
**computed**
getter：获得计算得到的新state并返回
setter： 不能用来直接改变计算属性的值，但是它们可以用来作“逆向”衍生
**autorun**
反应式代码桥接到命令式代码
**reactions**
响应式编程和命令式编程之间建立沟通的桥梁
