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
}
}HelloMessage.defaultProps = {
name: 'World'
}
这样就可以了，
5. 我期望其 name 属性只能是字符串类型的，你要是给我一个 Object，我是没法正确展示的。为了在开发过程中尽快的发现这类问题，React 为组件添加了类型检查的机制，你需要给组件设置静态字段 propTypes 来设置组件各个属性的类型检查器。
import React, {Component} from 'react';
import PropTypes from 'prop-types';
class HelloMessage extends Component {
render() {
return
}
}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(c); } var arr = [1, 2, 3]; //传统写法 foo(arr[0], arr[1], arr[2]); //2 //3 yield 关键字用来暂停和继续一个生成器函数。我们可以在需要的时候控制函数的运行。 函数返回对象包括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循环可以自动遍历Generator函数时生成的Iterator对象。 function* ge() { yield '1'; yield '2'; yield '3'; return '4'; }for(let v of ge()){ alert(V); // 1 2 3 4 } 函数在遇到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。 安装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值判断显示隐藏。方法虽然很笨，但是效果还行！ 导航栏样式，好好看 上，模型展示时必须引jquery 改layout布局样式，（我只改了margin） 解决es6兼容ie问题。上述两行代码 百度：Generator函数扩展运算符
//使用扩展运算符foo(...arr);//1ES6 yield
一、介绍
yield 关键字使生成器函数暂停执行，并返回跟在它后面的表达式的当前值。与return类似，但是可以使用next方法让生成器函数继续执行函数yield后面内容，直到遇到yield暂停或return返回或函数执行结束。二、使用
三、for…of
四、yield与异步
数据流向
在react怎样引入jQuery