| 实习

Day 5之redux学习笔记及代码文件组织方式

1.关于redux的action、reducer和store

a.action：
1).是行为的抽象
2).是普通JS对象
3).一般由方法生成
4).必须有一个type属性

b.reducer：
1).是响应的抽象
2).是纯方法
3).传入旧状态和action
3).返回新状态

c.store:
1).action作用于store
2).reducer根据store响应
3).store是唯一的
4).store包括了完整的state
5).state完全可预测
6).store根据reducer生成

2.在启动一个有redux的项目遇到的坑
之前在react-redux查找安装方式，官网给出的是

1
npm install react-redux --save

但是启动的时候报错

查找原因之后发现是因为还要先安装redux依赖，所以在项目中要使用redux的时候可以以前安装。
1
npm install redux react-redux --save

3.关于代码文件组织方式
a.按角色分（MVC框架）

b.按功能组织（redux应用适合）
1).每个功能应该有一个固定的对外的接口文件，便于其他模块想要访问这个模块的时候通过这个模块暴露出来的接口访问不会影响这个模块里其他的模块，减少耦合
2).store状态树的设计
一个模块控制一个状态节点
避免数据冗余
树形结构扁平

4.关于扩展操作符的补充
如果接受的参数是一个数组，返回想新增一个数组对象，就可以使用扩展操作符
例如：

1
2
3
4
5
6
7
8
return [
    {
        id : action.id,
        text : action.text,
        completed : false
    },
    ...state
]

5.关于ref
为了获取DOM树上某个节点的value的时候方便，react用了一个ref，他是访问到组件内部DOM节点唯一可靠的方式，并且会自动销毁对子组件的引用。
用法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
refInput(node) {
    this.input = node;
}

onSubmit(ev){
    ev.preventDefault();
    const input = this.input;
    if(!input.value.trim()){
        return;
    }
    this.props.onAdd(input.value);
    input.value ="";
}

render(){
    return (
        <div>
            <form onSubmit={this.onSubmit}>
                <input ref={this.refInput} />
                <button type="submit">添加</button>
            </form>
        </div>
    )
}

因为React的产生就是为了避免直接操作DOM元素，直接访问DOM元素很容易产生失控的情况。
可以改成：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
onInputChange(event){
    this.setState({
        value : event.target.value
    });
}
onSubmit(ev){
    ev.preventDefault();
    const inputValue = this.state.value;
    if(!inputValue.trim()){
        return;
    }
    this.props.onAdd(inputValue);
    this.setState({
        value : ''
    });
}

render(){
    return (
        <div>
            <form onSubmit={this.onSubmit}>
                <input onChange={this.onInputChange} value={this.state.value} />
                <button type="submit">添加</button>
            </form>
        </div>
    )
}

6.关于filter方法
语法：

1
array.filter(function(currentValue,index,arr), thisValue)

currentValue ： 必须，当前元素的值
index ： 可选，当前元素的索引
arr ： 可选，当前元素属于的数组对象
thisValue ： 可选，对象作为该执行回调时使用，传递给函数，用作 “this” 的值。
如果省略了 thisValue ，”this” 的值为 “undefined”

7.object.assign()方法
语法：

1
Object.assign(target, ...sources)

target：目标对象
sources：源对象
返回值是一个对象

实例：

1
2
3
4
5
6
7
8
9
const object1 = {
  a: 1,
  b: 2,
  c: 3
};

const object2 = Object.assign({c: 4, d: 5}, object1);

console.log(object2.c, object1.c);   // expected output: 3 3

注意：针对深拷贝，需要使用其他方法，因为 Object.assign()拷贝的是属性值。假如源对象的属性值是一个指向对象的引用，它也只拷贝那个引用值。

还可以合并相同属性对象

1
2
3
4
5
6
var o1 = { a: 1, b: 1, c: 1 };
var o2 = { b: 2, c: 2 };
var o3 = { c: 3 };

var obj = Object.assign({}, o1, o2, o3);
console.log(obj); //   { a: 1, b: 2, c: 3 }

8.trim()方法
trim() 方法会从一个字符串的两端删除空白字符。在这个上下文中的空白字符是所有的空白字符 (space, tab, no-break space 等) 以及所有行终止符字符（如 LF，CR）。
返回值是一个新的字符串，不影响源字符串

ESC