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

react

React

ReactRouter

React 全家桶

react-antd

echarts

事件和行为

重点-注意事项

数据的动态更新

你可能感兴趣的:(react)