React

• 初始化命令
  • cnpm i -g create-react-app 全局安装，无需配置快速构建react开发环境，基于Webpack+ES6
  • create-react-app my-app 生成对应文件名的文件
  • cd my-app/ 进入生成的文件
  • npm start 执行启动命令
• 文件结构
  • mainfest.json
    • 指定开始页面index.html
    • src/App.js--文件内容
• 生命周期
  • componentWillMount
    • 组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state。
  • componentDidMount
    • 组件渲染之后调用，只调用一次。
  • componentWillReceiveProps
    • 组件初始化时不调用，组件接受新的props时调用
  • shouldComponentUpdate
    • react性能优化非常重要的一环。组件接受新的state或者props时调用，我们可以设置在此对比前后两个props和state是否相同，如果相同则返回false阻止更新，因为相同的属性状态一定会生成相同的dom树，这样就不需要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，尤其是在dom结构复杂的时候
  • componentWillUpdate
    • 组件初始化时不调用，只有在组件将要更新时才调用，此时可以修改state
  • componentDidUpdate
    • 组件初始化时不调用，组件更新完成后调用，此时可以获取dom节点
  • componentWillUnmount
    • 组件将要卸载时调用，一些事件监听和定时器需要在此时清除
• State与Props区别
  • props是组建对外的接口，state是组件对内的接口
  • props
    • 属性值来源于父级元素，属性在React中是单向流动的：从父级到子元素
    • props(属性)默认为true
      • 如果没有给prop(属性)传值，默认为true
      • 通常情况下，我们不建议使用这种类型，因为这会与ES6中的对象shorthand混淆 。ES6 shorthand 中 {foo} 指的是 {foo: foo} 的简写，而不是 {foo: true} 。这种行为只是为了与 HTML 的行为相匹配。
        (举个例子，在 HTML 中，< input type=”radio” value=”1” disabled /> 与 < input type=”radio” value=”1” disabled=”true” /> 是等价的。JSX 中的这种行为就是为了匹配 HTML 的行为。)
      • props扩展
        • 使用扩展操作符 … 传入整个 props 对象
        • 将数据进行了包装，而且还简化了赋值的书写
  • State(状态)
    • React的核心思想是组件化，而组件中最重要的概念是State(状态)，状态(State)与属性(props)类似，都是一个组件所需要一些数据集合，但是state是私有的，可以认为state是组件的'私有属性(或则局部属性)'
    • 判断是否为State
      1. 变量是否通过Props从父组件中获取？如果是，不是状态State
      2. 变量是否在组件的整个生命周期中都保持不变？
      3. 变量是否可以通过其它状态（State）或者属性（props）计算得到？
      4. 变量是否在组件的render方法中使用？如果不是，那么它不是一个状态
    • 并不是组件中用到的所有变量都是组件的状态！当存在多个组件共同依赖一个状态时，一般的做法是状态上移，将这个状态放到这几个组件的公共父组件中
    • 如何正确使用State
      1. 用setState修改State
      2. 直接修改state，组件并不会重新触发render（）
      3. State的更新是异步的
      4. 调用setState后，setState会把要修改的状态放入一个队列中(因而 组件的state并不会立即改变)
      5. 之后React会优化真正的执行时机，来优化性能，所以优化过程中有可能会将多个setState的状态修改合并为一次状态修改，因而更新可能是异步的
      6. 所以不要依赖当前的State，计算下个State。当真正执行状态修改时，以来的this.state并不能保证是最新的State，因为React会把多次State的修改合并成一次，这时，this.state将还是这几次State修改前的State
      7. 另外需要注意的事，同样不能依赖当前的Props计算下个状态，因为Porps一般也是从父组件的State中获取，依然无法确定在组件状态更新时的值
• React.Fragment--render(){return(<Fragment><div></div><div></div><Fragment>)}
  • React.Fragment标签可以用render函数return的jsx中
• SyntheticEvent,event
  • 事件

• 基本结构
  • import React,{ Component } from 'react'--引入react Component
  • import ReactDOM from 'react-dom'
  • import './index.css'

      class Header extends Component {
        constructor(props){
          super(props)
          this.state={
            //状态
          }
        }
        onClick(){
          //函数
        }
        render () {
          return (
            //返回jsx结构
          )
        }
      }
  

• 重点-注意
  • React只会更新必要的部分
    • React Dom首先会比较元素内容先后的不同，而在渲染过程中只会更新改变了的部分
      • React渲染ReactDom.render(dom)
      • 插值{js执行环境}
      • jsx不能使用if else语句，但可以使用conditional（三元运算）表达式来代替
      • React推荐使用内联样式
      • 注释{/*注释*/}
      • jsx允许在模板中插入数组，数组会自动展开所有成员
      • 由于jsx就是javascript，一些标识符像class和for不建议作为xml属性名-- React Dom使用className和htmlFor来做对应的属性

ReactRouter

• router
• route
• component
• link

React 全家桶

• React.js
• Babel--编译
• Redux--状态管理
• React-router 路由

react-antd

• DatePicker-日期选择框
  • 共同参数
    • allowClear
      • 是否显示清除按钮
    • autoFocus
      • 自动获取焦点
    • className
      • 选择器className
    • dateRender
      • 自定义日期单元格的内容
    • disabled
      • 禁用
    • disabledDate
      • 不可选择的日期
    • dropdownClassName
      • 额外的弹出日历className
    • getCalendarContainer
      • 定义浮层的容器，默认为body上新建div
    • locale
      • 国际化配置
    • open
      • 控制弹层是否展开
    • placeholder
      • 输入框提示文字
    • popupStyle
      • 额外的弹出日历央视
    • size
      • 输入框大小，large高度为40px，small为24px，默认为32px
    • suffixIcon
      • 自定义的选择框后缀图标
    • style
      • 自定义输入框样式
    • onOpenChange
      • 弹出日历和关闭日历的回调
  • 共同的方法
    • blur()
      • 移除焦点
    • focus()
      • 获取焦点
  • 参数
    • dafaultValue
      • 默认日期
    • disabledTime
      • 不可选择的时间
    • format
      • 展示的日期格式
    • mode
      • 日期面板的状态
    • renderExtraFooter
      • 在面板中添加额外的页脚
    • showTime
      • 增加时间选择功能
    • showTime.defaultValue
      • 设置用户选择日期时默认的时分秒
    • showToday
      • 是否展示‘今天’按钮
    • value
      • 日期
    • onChange
      • 时间发生变化的回调
    • onOk
      • 点击确定按钮的回调
    • onPanelChange
      • 日期面板变化时的回调
• Table
  • API
    • bordered
      • 是否展示外边框和列边框
    • childrenColumnName
      • 指定树形结构的列名
    • columns
      • 表格列的配置描述
    • components
      • 覆盖默认的table元素
    • dataSource
      • 数据数组
    • defaultExpandAllRows
      • 初始化时，是否展开所有行
    • defaultExpandedRowKeys
      • 默认展开的行
    • expandedRowKeys
      • 展开的行，控制属性
    • expandedRowRender
      • 额外展开行
    • expandRowByClick
      • 通过点击来展开子行
    • footer
      • 表格尾部
    • indentSize
      • 展开树形数据时，每层缩进的宽度，以px为单位
    • loading
      • 页面是否加载中
    • locale
      • 默认文案设置，目前包括排序

echarts

• 初始化
  • echarts.init(document.getElementById('main'));--基于准备好的dom，初始化echarts实例
    • echarts.init(document.getElementById('main','light'))--light/dark--主题样式
  • myChart.setOption(option);--使用刚指定的配置项和数据显示图表
• 配置项
  • option={}配置
    • title：{}-标题-左上
    • legend：{}-图例-顶部
    • xAxis：{}-横轴
    • yAxis:{}-纵轴
    • series：[]-数据
      • type：
        • 'pie'-饼图
        • 'line'-折线图
        • 'bar'-柱状图
        • 'sunburst'-旭日图
      • roseType:'angle'-南丁格尔
      • label:{}-标签
        • normal:{}
          • textStyle:{}
            • color:'red'
      • labelLine:{}-标签线
      • data:[]-数据
      • radius:'55%'-图形所占大小
      • itemStyle-区域样式-扇形-饼图
        • itemStyle: {
        • // 阴影的大小
        • shadowBlur: 200,
        • // 阴影水平方向上的偏移
        • shadowOffsetX: 0,
        • // 阴影垂直方向上的偏移
        • shadowOffsetY: 0,
        • // 阴影颜色
        • shadowColor: 'rgba(0, 0, 0, 0.5)'
        • }
    • backgroundColor-背景颜色-全局
    • textStyle：{}-文本样式-全局

事件和行为

  myChart.on('click', function (params) {
    // 控制台打印数据的名称
    console.log(params.name);
  });

  //'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'   支持的常规的鼠标事件类型

  //所有的鼠标事件包含参数 params，这是一个包含点击图形的数据信息的对象，如下格式：

{
    // 当前点击的图形元素所属的组件名称，
    // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
    componentType: string,
    // 系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。
    seriesType: string,
    // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。
    seriesIndex: number,
    // 系列名称。当 componentType 为 'series' 时有意义。
    seriesName: string,
    // 数据名，类目名
    name: string,
    // 数据在传入的 data 数组中的 index
    dataIndex: number,
    // 传入的原始数据项
    data: Object,
    // sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data，
    // dataType 的值会是 'node' 或者 'edge'，表示当前点击在 node 还是 edge 上。
    // 其他大部分图表中只有一种 data，dataType 无意义。
    dataType: string,
    // 传入的数据值
    value: number|Array
    // 数据图形的颜色。当 componentType 为 'series' 时有意义。
    color: string
}


//如何区分鼠标点击到了哪里：

myChart.on('click', function (params) {
    if (params.componentType === 'markPoint') {
        // 点击到了 markPoint 上
        if (params.seriesIndex === 5) {
            // 点击到了 index 为 5 的 series 的 markPoint 上。
        }
    }
    else if (params.componentType === 'series') {
        if (params.seriesType === 'graph') {
            if (params.dataType === 'edge') {
                // 点击到了 graph 的 edge（边）上。
            }
            else {
                // 点击到了 graph 的 node（节点）上。
            }
        }
    }
});

重点-注意事项

• ECharts 中在更新数据的时候需要通过name属性对应到相应的系列，上面示例中如果name不存在也可以根据系列的顺序正常更新，但是更多时候推荐更新数据的时候加上系列的name数据。
• loading动画

    myChart.showLoading();
    $.get('data.json').done(function (data) {
        myChart.hideLoading();
        myChart.setOption(...);
    });

数据的动态更新

• ECharts 由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得异常简单。

• 所有数据的更新都通过 setOption实现，你只需要定时获取数据，setOption 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。

• ECharts 3 中移除了 ECharts 2 中的 addData 方法。如果只需要加入单个数据，可以先 data.push(value) 后 setOption