react+ant design pro+dva项目阶段型总结（不定时更新）

1.如果你熟悉 HTML，那么 JSX 对于你来说是没有任何压力的，因为 HTML 中的所有标签，在 JSX 中都是支持的，基本上没有学习成本，只有如下几点略微的不同：
class 属性变为 className
tabindex 属性变为 tabIndex
for 属性变为 htmlFor
textarea 的值通过需要通过 value 属性来指定
style 属性的值接收一个对象，css 的属性变为驼峰写法，如：backgroundColor。
2.需要注意，不管那种方式，组件的名称首字母必须为大写。严格来说，是 JSX 要求用户自定义的组件名首字母必须为大写
3.属性必须为只读的，这一点非常重要，请严格遵守。对应到上面说到的，如果把组件理解为一个函数，那么这个函数必须为一个纯函数（Pure function），在纯函数中不能修改其参数，确定的输入必须有确定的输出。
虽然有些时候，你修改了组件的属性，貌似也能正常工作。没错，因为 JavaScript 语言特性的原因，没人能阻止你这么做。但是请先相信我，严格遵守这条规则不仅能让你少踩很多坑，而且能让你的应用稳定性更强、维护性更强。如果你直接修改组件的属性，React 并不会感知到此修改，从而不会重新渲染组件，就导致了当前组件的视图展示与数据不一致。
4.React 提供了相应的机制可以设置组件属性的默认值，如下所示，你需要通过组件的静态字段 defaultProps 来设置组件属性的默认值。如下所示：
import React, {Component} from ‘react’;
class HelloMessage extends Component {
render() {
return

Hello { this.props.name}.

;
}
}HelloMessage.defaultProps = {
name: ‘World’
}
这样就可以了， 这样不为组件设置任何属性，那么它就会在页面上展示Hello World.。
5.我期望其 name 属性只能是字符串类型的，你要是给我一个 Object，我是没法正确展示的。为了在开发过程中尽快的发现这类问题，React 为组件添加了类型检查的机制，你需要给组件设置静态字段 propTypes 来设置组件各个属性的类型检查器。
import React, {Component} from ‘react’;
import PropTypes from ‘prop-types’;
class HelloMessage extends Component {
render() {
return

Hello { this.props.name}.

;
}
}HelloMessage.defaultProps = {
name: ‘World’
}HelloMessage.propTypes = {
name: PropTypes.string
}
6.下面是 React 提供的可用的数据类型检查器。
PropTypes.array
PropTypes.bool
PropTypes.func
PropTypes.number
PropTypes.object
PropTypes.string
PropTypes.symbol
PropTypes.element 元素，其实就是 JSX 表达式，上一篇文章有说过 JSX 是 React.createElement 的语法糖，一个 JSX 表达式实际上会生成一个 JS 对象，在 React 中称之为元素（Element）。
PropTypes.node 所有可以被渲染的数据类型，包括：数值, 字符串, 元素或者这些类型的数组。
PropTypes.instanceOf(Message) 某个类的实例
PropTypes.oneOf([‘News’, ‘Photos’]) 枚举，属性值必须为其中的某一个值。
PropTypes.oneOfType([PropTypes.string, PropTypes.number]) 类型枚举，属性必须为其中某一个类型。
PropTypes.arrayOf(PropTypes.number) 属性为一个数组，且数组中的元素必须符合指定类型。
PropTypes.objectOf(PropTypes.number) 属性为一个对象，且对象中的各个字段的值必须符合指定类型。
PropTypes.any 任何类型
如果你想指定某些属性为必需属性，你可以链式调动其 isRequired 来标识某个属性对于当前组件来说是必需的。
7.设置组件的属性值
属性的值可以用一对大括号 { } 来包围，其中可以指定任意的 JavaScript 表达式。如下所示：
return (
name=“Tom” // 字符串
age={18} // 数值
isActivated={true} // 布尔值
interests={[‘basketball’, ‘music’]} // 数组
address={{ city: ‘Beijing’, road: ‘BeiWuHuan’ }} // 对象
/>
)
8.ReactDOM.render 在一个单页面 web 应用中通常只调用一次。
组件可以通过 setState 改变内部状态 state 来更新视图。
setState 多数情况下是异步的。
不要直接使用当前 state 的值生成下一个 state。
不要直接通过 this.state 修改 state。

9.扩展运算符
扩展运算符用三个点号表示，功能是把数组或类数组对象展开成一系列用逗号隔开的值
var foo = function(a, b, c) {
console.log(a);
console.log(b);
console.log©;
}
var arr = [1, 2, 3];
//传统写法
foo(arr[0], arr[1], arr[2]);
//使用扩展运算符foo(…arr);//1
//2
//3

ES6 yield
一、介绍
　　yield 关键字用来暂停和继续一个生成器函数。我们可以在需要的时候控制函数的运行。
　　yield 关键字使生成器函数暂停执行，并返回跟在它后面的表达式的当前值。与return类似，但是可以使用next方法让生成器函数继续执行函数yield后面内容，直到遇到yield暂停或return返回或函数执行结束。
二、使用
函数返回对象包括value和done。其中value值是yield后面表达式值或return后面表达式值。done用于表示函数运行
function* ge() { //声明时需要添加*，普通函数内部不能使用yield关键字，否则会出错
yield ‘1’;
yield ‘2’;
yield ‘3’;
return ‘4’;
}

var a = ge(); //调用函数后不会运行，而是返回指向函数内部状态的指针
a.next(); // { value: ‘1’, done: false } 遇到yield暂停
a.next(); // { value: ‘2’, done: false }
a.next(); // { value: ‘3’, done: false }
a.next(); // { value: ‘4’, done: true} 函数执行完毕，返回done
a.next(); // { value: undefined, done: true} 已经执行完毕，返回undefined
如果next没有带有参数true，yield不能返回值，返回undefined；next函数带有参数true，即.next(true)时，那么yield就可以返回表达式的值，用于赋值。如果next带有其他参数，那么它就会将当前yield返回值置为该参数。如：
var i = yield 1; // 将1赋值给i
三、for…of
for…of循环可以自动遍历Generator函数时生成的Iterator对象。
function* ge() {
yield ‘1’;
yield ‘2’;
yield ‘3’;
return ‘4’;
}for(let v of ge()){
alert(V); // 1 2 3 4
}

四、yield与异步
函数在遇到yield后暂停运行，我们可以在需要的地方使用next让它继续运行。并且必要时可以使用next传入参数。
对于一些可能被多处引用的功能模块，建议提炼成业务组件统一管理。这些组件一般有以下特征：
只负责一块相对独立，稳定的功能；
没有单独的路由配置；
可能是纯静态的，也可能包含自己的 state，但不涉及 dva 的数据流，仅受父组件（通常是一个页面）传递的参数控制。

model里面包括以下五部分：namespace、state、reducers、effects、subscriptions，缺一不可。注意，这里也需要从service层导入相应的方法。
namespace 命名空间
namespace: ‘projects’
state 相当于原生React中的state状态，用于存放数据的初始值。
state: {
projectsData: []}
reducers 用于存放能够改变view的action，这里按照官方说明，不应该做数据的处理，只是用来return state，从而改变view层的展示。
reducers: {
getProjectAllData(state, action) {
return { …state, …action.payload };
},
}
effects 用于和后台交互，是处理异步数据逻辑的地方。
effects: {
*getAllProjects({ payload = {} }, { call, put }) {
try {
const res = yield call(projectsService.checkBranches, payload);
yield put({
type: ‘getProjectData’,
payload: {
projectsData: res.data
}
});
} catch (e) {
message.warning(e.message);
}
},
}
subscriptions 订阅监听，比如监听路由，进入页面如何如何，就可以在这里处理。相当于原生React中的componentWillMount方法。就比如上述代码，监听/project路由，进入该路由页面后，将发起getAllProjects aciton，获取页面数据。
subscriptions: {
setup({ dispatch, history }) {
return history.listen(({ pathname }) => {
if (pathname === ‘/projects’) {
dispatch({
type: ‘getAllProjects’
});
}
});
}
}
数据流向
数据的改变发生通常是通过用户交互行为或者浏览器行为（如路由跳转等）触发的，当此类行为会改变数据的时候可以通过 dispatch 发起一个 action，如果是同步行为会直接通过 Reducers 改变 State ，如果是异步行为（副作用）会先触发 Effects 然后流向 Reducers 最终改变 State。

在react怎样引入jQuery
安装jQuery
npm i jquery -S
在那个地方使用jQuery就在什么地方引入jQuery
import $ from ‘jquery’
类似

使用Link,先引入Link
import {
BrowserRouter as Router,
Route,
Link
} from ‘react-router-dom’
有个很笨的办法可以出来效果：用menu的点击事件获取当前option的key存入state中，显示内容根据key值判断显示隐藏。方法虽然很笨，但是效果还行！