个人笔记-zfreact

郭永峰

1 jsxtranformer.js(替代babel?)

2 react配合es6语法特别爽,特别简介

3 redux + react-router + webpack + es6 + babel +react一套技术栈

4 关注性能immutable.js

5 关注测试

学习阶段

  • babel + jsx + es6
  • react实例
  • 学习路由react-router
  • 管理应用的数据redux(中间件middleware)
  • Nodejs + react全站开发

babel

babel->分拆

npm install babel --save-dev //之前

babel-core
babel-cli
babel-preset-x
babel-plugin-x
babel-polyfill
...

presets
一系列的plugin插件组合,完成es2015
babel-preset-es2015

plugin
每个插件只做一件事
babel-runtime,tarnsform-runtime解析代码整洁

**babel-core
API

babel-loader
react依赖

loose
normal,loose实际上代码规范了

模块化规范

兼容ie8
API浏览器运行
babel-polyfill

require('babel-polyfill')

有哪些polyfill?

生态
plugin扩展
gulp-babel

gulp

  • 代码解析
  • 打包合并
  • 压缩混淆
  • md5

git st?

npm run dev  // ok

仓库使用

npm install

ES6

趋势
性能

  • let
  • 箭头函数
  • class

Gulp

ES6 class

解构:小功能大作用,可以减少for循环的使用,解析对象,字符串,数组

import React, {Component, ProtoType } from 'react'

Spread 扩展操作符:...
Object.assign 用于对象的合并,第一个值被覆盖

Webpack

npm script做环境搭建,方便很多

hot:调用sockt.js实现热更新

$ npm install --save-dev babel-loader babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-0

Day2

defaultProps,state在es6y语法更优美简单

props可以写在父集里,直接定义一个obj即可,写在子集里有两种方法,一种是defaultProps,一种是定义静态static

创建 -> 渲染 -> 销毁

getDefaultProps()
getInitialState()
componentWillMount()
render()
componentDidMount()
componentWillUnmount()

更新组件

componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()

atom注释插件

Link是react-router提供的导航组件,可以直接使用进行路由切换

路由的懒加载

Redex

  • createStore用来创建一个store,仓库,数据
  • reducer,给一个初始的数据inital state,然后你告诉我要怎么做,执行哪个action。执行完毕后,返回一个新的state
  • createStore只能调用一次,100个reducer,需要combine合并

三大概念
store ler store = createStore(reducer)
reducer 纯函数 functon(state,sction){}
action 简单对象{type:''DECREMENT}

改变数据唯一途径就是store dipatch action,分发一条指令,去改变数据
store.dispatch({type:'eat'})
// react-redux会更简单

五个顶层API
createStore
combineReducers
applyMiddleware
bindActionCreators
compose

@2017-05-06 22:28