react+dva+antdesign+umi文档阅读笔记总结

react

1）文档：
（1）Hello World
React是一个JavaScript库。
（2）JSX简介
JSX是一种javaScript的语法扩展，把表达式写在{}内，一般会在外面扩上（）可以防止分号自动插入的BUG。编译后JSX其实会被转化为普通的javaScript对象。小驼峰定义属性名称。JSX防注入攻击，可以放心使用用户输入，ReactDOM在渲染之前默认会过滤所有传入的值，所有内容在渲染之前都被转换成了字符串，有效防止XSS跨站脚本攻击。Babel转译器会把JSX转换成一个名为React.createElement()的方法调用
（3）元素渲染
元素是构成组件的一个部分，通过传递给ReactDOM.render（）来渲染
（4）组件&props
组件的返回值只能有一个根元素。这也是我们要用一个标签包裹的原因。
所有的React组件必须像纯函数那样使用它们的props，只读。
（5）State&生命周期
使用类就允许我们使用其它特性，例如局部状态，生命周期钩子。状态更新可能是异步的：因为this.props和this.state可能是异步更新的，你不应该依靠它们的值来计算下一个状态。// Wrong this.setState({ counter: this.state.counter + this.props.increment, });
要修复它，请使用第二种形式的setState()来接受一个函数而不是一个对象，该函数将接受先前的状态作为第一个参数，将此次更新被应用时的props作为第二个参数：// Correct this.setState((prevState, props) => ({ counter: prevState.counter + props.increment }));
同：// Correct this.setState(function(prevState, props) { return { counter: prevState.counter + props.increment }; });
浅合并：更新state中部分数据
（6）事件处理
向事件处理程序传递参数：

 this.deleteRow(id, e)}>Delete Row
Delete Row

参数e作为React事件对象将会被作为第二个参数进行传递。通过箭头函数的方式，事件对象必须显式的进行传递，但是通过bind的方式，事件对象以及更多的参数将会被隐式的进行传递，事件对象e要排在所传递参数的后面。

（7）条件渲染：
if判断；三目运算；逻辑&&；阻止渲染；
（8）列表&Keys
Keys可以在DOM中的某些元素被增加或删除的时候帮助React识别哪些元素发生了变化。因此你应当给数组中的每一个元素赋予一个确定的标识。如果列表可以重新排序，我们不建议使用索引来进行排序，这会导致渲染变得很慢。元素的key在他的兄弟元素之间应该唯一，不需要全局唯一。key会作为给React的提示，但不会传递给你的组件。
（9）表单
表单元素生来就保留一些内部状态而显得与众不同，其值被React控制的受控组件：value= onChange= 非受控组件：file input value只读，当你要处理多个受控的input元素时，你可以通过给每个元素添加一个name属性，来让处理函数根据event.target.name的值来选择做什么。[name]：value
（10）状态提升
状态提升比双向绑定方式要写更多的‘模板代码’，但带来的好处是，你也可以更快地寻找和定位bug的工作。因为哪个组件保佑状态数据，也只有它自己能够操作这些数据，此外你也可以使用自定义逻辑来拒绝或者更改用户输入
（11）组合vs继承
在Facebook网站上，我们的React使用了数以千计的组件，还未发现继承，组件可以接受任意元素，包括基本数据类型，React元素或函数。如果要在组件之间复用UI无关功能，我们建议将其提取到单独的JavaScript模块中。这样可以在不对组件进行扩展的前提下导入并使用该函数，对象或类。

（12）React理念
是否作为state考虑的问题：是否通过props从父级传来的，随时间推移不变么，能根据组件中任何其他state或props计算得出么

2）入门教程：前置知识ES6箭头函数，classes，let ，const，Babel REPL预览编译后效果。
React是一个采用声明式，高效而且灵活的用来构建用户界面的框架。
在使用JavaScript classes时，你必须调用super（）；方法才能在继承父类的子类中正确获取到类型的this。
当你遇到需要同时获取多个子组件数据，或者两个组件之间需要相互通讯的情况时，把子组件的state数据提升至其共同的父组件当中保存。之后父组件可以通过props将状态数据传递到子组件。
改变应用数据的方式一般分为两种。第一种是直接修改已有的变量的值。第二种则是将已有的变量替换为一个新的变量。第二种方式并没有改变之前已有的数据。可以很轻松地实现撤销/重做以及时间旅行，记录变化，判定何时重新渲染（尤其Pure components，shouldComponentsUpdate（））------不可变性原则
函数定义组件：一种只有render方法的组件定义方式function Square(props) { return ( {props.value} ); }

keys：key是React当中使用的一种特殊属性（除此之外还有ref）。当元素被创建时，React会将元素的key值和对应元素绑定存储，无法通过this.props.key获取key值。默认使用数组索引。

DvaJs：

1）指南：
（1）介绍：dva首先是一个基于redux和redux-sage的数据流解决方案，为了简化开发体验，dva还额外内置了react-router和fetch，所以也可以理解为一个轻量级的应用框架。
易学易用，仅有6个api，配合umi使用后降低为0api，elm概念，通过reducers,effects和subscriptions组织model，插件机制，比如dva-loading可以自动处理loading状态，不用一遍遍写showloading和hideloading，支持HMR，基于babel-plugin-dva-hmr实现components,routes和models的HMR
快速上手：安装dva-cli，创建新应用，安装antd和babel-plugin-import(按需加载）。dva-cli基于roadhog实现build和dev
Dva概念：数据流向
数据的改变发生通常是通过用户交互行为或者浏览器行为（如路由跳转等）触发的当此类行为会改变数据的时候可以通过dispatch发起一个action，如果是同步行为会直接通过Reducers改变State，如果是异步行为（副作用）会先触发effects然后流向reducers最终改变state
Models：
state：表示model的状态数据，通常表现为一个javascript对象，当作不可变对象对待，保证每次都是全新对象，没有引用关系。
action：是一个普通javascript对象，它是改变state的唯一途径。通过dispatch函数调用一个action，必须带有type属性指明具体行为，dispatch是在组件connect models以后通过props传入的。
reducer:函数接受两个参数：之前已经累积运算的结果和当前要被累积的值，返回的是一个新的累积结果。该函数把一个集合归并成一个单值。纯函数，不可变=〉所以热重载时间旅行才能使用。
effect：副作用，异步操作，底层引入了redux-sagas做异步流程控制，由于采用了generator的相关概念，所以将异步转成同步写法，从而将effects转为纯函数。
subscription：是一种从源获取数据的方法，他来自于elm，订阅一个数据源，然后dispatch需要的action，时间、键盘、地理、路由都可以
router：通常指的是前端路由，现在我们通常开发的是单页面应用，所以需要前端代码控制路由逻辑，通过浏览器提供的History AP可以监听浏览器url变化，dva实例提供react-router
router components：在组件设计方法中，dva通常以页面维度来设计container components。所以在dva中，通常需要connect model的组件都是route components，组织在/routes目录下，而/components/目录下则是纯组件。
2）入门课
react没有解决的问题：通信和数据流
目前最流行的数据流方案：路由=react-router；架构=redux；异步操作=redux-saga 缺点是要引入多个库，项目结构复杂
state：储存数据的地方，受到Action以后会更新数据。
View就是React组件构成的UI层，从state取数据后，渲染成HTML代码，只要state变化，View自动更新。
action：用来描述UI层事件的一个对象。
connect：是一个函数，绑定state到view，返回的也是一个react组件，原始UI组件的容器，在外面包了一层state，传入的第一个参数是mapStateToProps函数，返回一个对象，建立State到props的映射关系。
dispatch：函数方法，将action发送给state，被connnect的component会自动在props中拥有dispatch方法
namespace：当前model名称，多个小model的state整合
state：当前状态，保存数据。
reducers：action处理器，处理同步操作，用来算出最新state
effects：action处理器，处理异步动作。是一个Generator函数，内部使用yield关键字，标识每一步操作，处理函数：call执行异步，put发出action

umiJS

1）指南
可插拔的企业级react应用框架，以路由为基础，支持类next.js的约定式路由，以及各种进阶的路由功能，并以此进行功能扩展，比如支持路由级的按需加载。然后配以完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。
从源码到上线的生命周期管理，umi首先会加载用户的配置和插件，然后基于配置或者目录，生产一份路由配置，基于此路由配置，把js/css源码和HTML完整串联。
roadhog是基于webpack的封装工具，目的是简化webpack的配置
umi可以简单理解为roadhog+路由，思路类似next.js,辅以一套插件机制，目的是通过框架方式简化react开发
dva目前是纯粹的数据流，和umi以及roadhog之间并没有相互依赖关系。
dva 项目之前通常都是这种扁平的组织方式：

用了 umi 后，可以按页面维度进行组织：
再见！router.js
再见！query-string内置history
再见！配置文件
特别提醒的是layouts/index.js
全局布局，实际是在路由外面套了一层。404页面显示访问/404才能访问。
在页面间跳转：（1）声明式：基于umi/link，通常作为React组件使用。（2）命令式：基于umi/router，通常在事件处理中被调用