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 <div>Hello {this.props.name}.</div>;

    }

}HelloMessage.defaultProps = {

    name: 'World'

}

这样就可以了，<HelloMessage /> 这样不为组件设置任何属性，那么它就会在页面上展示Hello World.。

5. 我期望其 name 属性只能是字符串类型的，你要是给我一个 Object，我是没法正确展示的。为了在开发过程中尽快的发现这类问题，React 为组件添加了类型检查的机制，你需要给组件设置静态字段 propTypes 来设置组件各个属性的类型检查器。

import React, {Component} from 'react';

import PropTypes from 'prop-types';

class HelloMessage extends Component {

    render() {

        return <div>Hello {this.props.name}.</div>;

    }

}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 (

    <User

        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]);
//使用扩展运算符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值判断显示隐藏。方法虽然很笨，但是效果还行！

 

导航栏样式，好好看

上，模型展示时必须引jquery

 

改layout布局样式，（我只改了margin）

解决es6兼容ie问题。上述两行代码

 

百度：Generator函数