官网共14节
package.json:npm install ;npm start

01-setting-up

只能open http：//localhost:8080
package.json中script:{start: }
webpack-dev-server –inline –content-base…
App.js中：

1
2
3
4
5

export default React.createClass ({
	render(){
		return  <.......>
	}
})

02-rendering-a-route

index.js

1
2
3
4
5

//hashHistory不需要服务器配置，在URL生成一个哈希来跟踪状态，在测试或者发布环境中使用
//可写{browerHistory需要服务器的配置,路径为真实URL（API）}
<Router history={hashHistory}>
  <Route path="/about" component={△}>
//import △ from "/modules/..."

03-Navigating-with-link

（1）< div>标签：块状元素
（2）< nav>标签：定义导航链接的部分
role属性：本意是增强属性，role=”form”告诉赋值设备这个元素扮演的角色
（3）webpack.config.js配置

1
2
3

module.exports = {
	entry: './index.js' //入口文件
}

04-nested-routes-practic

改变现实位置->显示在同一页面下部

05-active-links

大部分links不需是active，通常主要是导航链接需active
定义activeClassName或activeStyle
（1）inline-style
在<Link中定义activeStyle,定义不点击时属性
（2）activeClassName=”active”进入任何一个URL都会激活/的active
导航链接：定义Nav Links，生成NavLink.js <Link active……:始终都是active，并非点击后不active

06-params URL参数

1. repos/reactjs/react-router
   -> repos/:userName/:repoName (route path)
   (:userName为URL参数)
2. 解析后作为变量被路由组件使用 this.props.params.userName this.props.params[name]
3. path属性:指定路由的匹配规则
   访问index/messages/:id

   1 2 3

   <Inbox> <Message/> </Inbox>

(1)

1
2

<Route path="inbox" component={Inbox}>
  <Route path="message/:id" component={Message}

(2)

1
2

<Route 
  <Route path="inbox/message/:id"

08-index-links

<IndexRoute component={Home} 显式指定Home是根路由的子组件，即默认情况下加载的子组件，/是一切的子组件
使用IndexLink，修改问题，在其他界面Index route也被激活（使用onlyActiveOnIndex={true}来标记）

09-brower History

修改hashHistory -> browerHistory
刷新出错：修改package.json
“start”:”webpack-dev-server –inline” –content-base. –history-api-fallback

constructor(){
super(props)//建议写法
}
class设置state的初始值或者绑定事件

React.js:驱动html DOM渲染

React Native:用CSS定义，驱动Android/IOS原声组件渲染

HTML创建DOM，构建整个网页的布局和结构
CSS控制DOM样式，比如字体，色号，颜色，居中
Javascript接受用户事件，动态操控DOM
component：相关HTML标签，也就是app内UI控件

错误

1
2
3
4
5
6
7
8
9
10
11
12
13

var arr = [1,[[2,3],4],[5,6]]
var flat = function* (a){
	a.forEach(function (item) {
		if (typeof item !== 'number') {
			yield* flat(item)
		} else {
			yield item
		}
	})
}
for (var f of flat(arr)) {
	console.log(f)
}

forEach函数不可异步调用

成功:forEach函数改为for循环

1
2
3

for (var i = 0;i<length;i++) {

}

语法

console.log(‘Hello’ + yield)
console.log(‘hello’ + (yield))
yield作为函数/赋值表达式的右侧
（1）foo(yield ‘a’,yield ‘b’)
（2）let input = yield

Generator

1. 语法上：状态机器，封装了多个内部状态；遍历器对象生成函数
2. 返回：遍历器对象
   遍历Generator函数内部的每一个状态
3. 特征
   （1）function*
   （2）内部使用yield
4. 调用
   调用后并不执行，返回一个指向状态的指针对象（IteratorObject）

   1 2 3 4 5 6 7 8 9 10 11

   function* helloworld () { yield 'hello'; yield 'world'; return 'ending'; } => 执行函数 当前状态值 布尔值 hw.next() 返回hello done:false //执行第一个yield hw.next() world done:false hw.next() undefined done:true。//遍历已经结束

可暂停执行的函数，yield为暂停标志

next方法：可有一个参数，作为上个yield的返回值

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

function* f() { for (var i = 0;true;i++){ var reset = yield ; if (reset) {i = -1 } } } var g = f() g.next() g.next() g.next(true) => value:0 false value:1 false value:0 false next函数中有参数true，可调整函数行为

第一个next()函数传参数无效，用来启动遍历器对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function* foo(x){
	var y = 2 * (yield (x+1))
	var z = yield(y/3)
	return (x+y+z)
}
--->
var a = foo(5)
a.next()  //6  ..
a.next()  //x,y均无值 NaN ..
a.next()  //NaN ..
--->
var b = foo(5)
b.next()  //6 done:false:yield的值为5+1=6，返回yield的值为6
b.next(12) //8 done:false  12传递给等待状态的yield(x+1)语句，y=24,所以返回24/3=8
b.next(13) //42 done:true  8赋值给等待状态的yield(y/3),z=13,赋值完成（12+26+4=42）

若需要第一个参数有效，则外包一层

1
2
3
4
5
6
7
8
9
10
11

function wrapper(generatorFunction){
	return function(...args){
		let generatorObject = generatorFunction(...args)
		generatorObject.next()
		return generatorObject
	}
}
const wrappered = wrapper(function* () {
	console.log(`First input:${yield}`)
	})
wrappered.next('hello!')

直接迭代集合：for of循环，不用yield

1
2
3
4
5
6
7
8
9
10
11
12
13

function *foo() {
   yield 1;
   yield 2;
   yield 3;
   yield 4;
   yield 5;
   return 6;
}

for (var v of foo()) {
   console.log( v );
}
// 1 2 3 4 5

5. return
   若无return，则返回对象值undefined
6. return与yield：return无记忆功能，只返回一次
7. 和Iterator接口关系
   （1）myIterable[Symbol.iterator] = function * () {

}
（2）返回的遍历器对象，有Symbol.iterator属性
执行后返回自身

yield

带有保存功能的return

1. 2个yield
   将第一个yield返回一个常量

   1 2 3 4

   const response:RequestResponse = yield(() => { return request(action.payload) return getMyLocation().then(location => ({location})) })()

1

yield effects.put(updateGroupInfoAction(groupInfoData))

2. yield关键字用来暂停和恢复一个生成器(function* 或遗留的生成器函数)
   [rv] = yield [expression]
   rv:返回传递给生成器的next()方法的可选值，以恢复执行
   expression:通过迭代器协议从生成器函数返回的值
   （1）yield使生成器函数执行暂停
   基于生成器版本的return关键字
   （2）返回实际为IteratorResult对象

   2个属性：
   value：yield表达式求值结果
   done：false（表示未完成）

3. yield暂停
   用next()方法恢复执行 —> 结束
   （1）yield
   （2）throw异常，生成器完全停止执行
   （3）到达生成器函数结尾，返回undefined，done=true
   （4）return执行结束 done = true

4. function* countAppleSales() —> appleStore.next()

5. 函数运行到yield时退出，并保留上下文，下次进入时可以继续进行

action

action:Action
从Action中传入的数据默认在payload中
action.payload

1. 使用npm install –save XXX

2. 会优先考虑使用插入符号^而不是～

3. ~：更新到当前minor version（中间那位数字）中最新的版本

e.g body-parser:~1.15.2 会匹配1.15.x的最新版本
出现1.16.0,不会自动升级

4. 把当前库的版本更新到当前major version

也就是第一位的最新版本
e.g bluebird：^3.3.4
会匹配3.x.x中的最新版本，不会更新到4.0.0

1.15.2

1:major version：有了一个不可以和上一个版本兼容的大更改
15:minor version：增加了新的功能，可以向后兼容
2:patch version：表示修复了bug，可以向后兼容

使用yarn

yarn.lock：只要文件不发生变化，线上的包管理系统，无论如何更新，使用的antd版本永远是3.0.2

基础内容

position

1. absolute：绝对定位的元素，相对于static定位意外的第一个父元素定位（即找到上一个有positon属性的元素）
2. fixed：生成绝对定位的元素，相当于浏览器窗口进行定位 -> 滚动条时不动
   left，top，right，bottom
3. relative：生成相对定位的元素，相对于其正常位置定位

   left:20 向left位置+20

4. static

   left,right,bottom,top均不会生效

5. inherit：从父元素继承position属性

元素居中定位

1. 有宽度块标签，自身水平居中
   margin:0 auto
2. align-content: center + position属性实现水平居中(弹性盒方法)

border设置4个边框样式

border-color：上 右 下 左

border-left: width style color

e.g border-left: thick double #ff0000

border-radius 圆角边框

设置px和%

inherit: 从父元素继承边框颜色