网易云dva开发日志 day3

发表于
字数统计: 1.6k | 阅读时长 ≈ 6

愿你的生活每天都开出一朵花来 NHXWYJS

（1)

之前写组件都是拆成UI和容器…直到被告知dva中是不拆的，而且也不好维护。

dva中的component只放共用组件，routes放业务组件（比如展示…的页面），可以理解为一个路由组件。所以…今天把代码重构了一下。

(2)

尝试完全由一个数组加一个img标签实现轮播图。

这里主要通过数组模拟栈和队列的API实现

队列

  • shift:从集合中把第一个元素删除，并返回这个元素的值。
  • unshift: 在集合开头添加一个或更多元素，并返回新的长度

栈

  • push:在集合中添加元素，并返回新的长度
  • pop:从集合中把最后一个元素删除，并返回这个元素的值。

思路

(3)今天搞定了网易云的循环动画

先上代码

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
this.state = {
			left: ["-643px", "35px", "713px", "713px"],
			ani: [false, true, false, false],
		};
		this.prev = this.prev.bind(this);
		this.next = this.next.bind(this);

...

render() {

	return (
		<ul
    className={classnames({
    recNewList: true,
    aniActive: ani[0],
    })}
    style={{
      left: left[0],
    }}
  >
  ...
  </ul>
  <ul
    className={classnames({
      recNewList: true,
      aniActive: ani[1],
    })}
    style={{
      left: left[1],
    }}
  >
  </ul>
  <ul
    className={classnames({
      recNewList: true,
      aniActive: ani[2],
    })}
    style={{
      left: left[2],
    }}
  >
  </ul>
  <ul
    className={classnames({
      recNewList: true,
      aniActive: ani[3],
    })}
    style={{
      left: left[3],
    }}
  >
  </ul>
	);
}

...

prev() {
    const ani = [...this.state.ani];
    const left = [...this.state.left];
    // console.log(left.indexOf("35px"));
    for(let i = 0 ; i < ani.length ; i++) {
    	if(i !== left.indexOf("35px")) {
    		ani[i] = false;
    	}
    }
    const index = (left.indexOf("35px") - 1) < 0 ? 3 : left.indexOf("35px") - 1;
    ani[index] = true;
    left.push(left.shift());
    this.setState({
    	left,
    	ani,
    });
 }
 next() {
    const ani = [...this.state.ani];
    const left = [...this.state.left];
    for(let i = 0 ; i < ani.length ; i++) {
    	if(i !== left.indexOf("35px")) {
    		ani[i] = false;
    	}
    }
    const index = (left.indexOf("35px") + 1) > 3 ? 0 : left.indexOf("35px") + 1;
    ani[index] = true;
    left.unshift(left.pop());
    this.setState({
    	left,
   	 	ani,
    });
 }

(3)关于样式共用

例如ico整个网站都是共用的，每个页面都要重复写ico-position就会很low。

(4)关于react

  • render()里面不该有this.setState(),因为每一个纯函数都不该引起状态的变化。而是应该完全由this.state和this.props来决定渲染的内容。
  • componentWillMount存在的主要目的是为了和componentDidMount对称，意义不大，被废弃了。
  • 子组件不应该修改传入的props值。试想一下当一个父组件有多个子组件，并传入一个js对象，当某个子组件改变对象时，其他子组件都会受到影响。
  • 并不提倡在JSX中直接把匿名函数直接赋值给事件。原因：每次渲染都会创造一个新的匿名方法对象，而且有可能会引发子组件不必要的重新渲染。
  • componentWillUnmount中的工作往往和componentDidMount有关，比如在componentDidMount中用非React方法创造了一些DOM元素，如果撒手不管肯内存泄漏，需要在componentWillUnmount中清理这些DOM。

(5)ｄva的model中多个异步问题

直接贴代码

1
2
3
4
5
6
7
let Arr = [];
        if(payload.idxArr) {
          Arr = yield payload.idxArr.map((item) => {

		      return call(toplistService.getTopList, item);
				});
			}

底层是redux-saga的Promise.all()

(6)了解一些基本的Ubuntu命令

ll = ls -l 列出

ls -a 隐藏文件 （”.”开头的文件）

du -h –max-depth=1 查看各文件夹大小命令

cat xxx.xxx 展示该文件

pwd 执行pwd指令可立刻得知您目前所在的工作目录的绝对路径名称

（7）git学习

git命令的基本数据流

一个git仓库包含工作目录，与.git目录。其中.git目录是工作目录的下的一级子目录。

文件状态

已修改（Modified） - 文件已修改，且没有存入缓存或者版本库

已缓存（Staged） - 文件最新修改已放入缓存区中，但尚未存入版本库

已提交（Committed） - 文件最新修改已存入版本库

基本命令

git init - 初始化工作目录，使之能够被git管理。会生成子目录“.git”.

git commit -m “des” - 总是从缓冲区发出。

git commit –amend -m “Correct message” - 把本次提交与最后一次提交合并（删除最后一次提交，加入合并后的提交

echo”temp/“ >> .gitignore - 忽略的文件 ignore files

git status - 显示某些文件已修改，哪些文件已准备提交等信息

git add xxx.xxx 将文件加入缓存区

git branch -a - 列出所以分支

git branch xxx - 创建

git branch -d xxx - 删除

git branch -m - 重命名

git branch xxx –edit-description - 修改分支描述

git checout　- 到缺省分支

git checkout xxx -切换至某分支

git checkout -b xxx - 创建新分支并切换至新分支

git clone URI路径

git clone –depth 1 URI路径 注意如果不设置–no–single-branch，只会克隆HEAD所在的分支。–depth表示克隆的最近版本数

git diff - 显示缓存区（Index）与当前git库版本之间的差异

git diff –cached

显示工作目录与当前git库版本之间的差异

git diff HEAD

git log - 显示所以提交 –online –merges –graph

git merge xxx - 把其他某个分支，合并入当前分支

git mv old.xxx new.xxx - 改名

git mv xx.xx ./path/to/xx - 移动

git mv -f myFile existingFile - 强制改名或者移动文件（适用于目的文件已经存在的情况）

git pull - 把远端origin的master分支拖动到本端git仓库

git pull origin master - 如果当前分支与某个“远端分支”绑定，则先把其远端分支拖动到本地，再合并入当前分支

git pull - 合并到本端分支的策略是采用rebase

git rebase master experimentBranch - 把特性开发分支重整到主分支上 - 一个重要准则：不要重整已经提交到公共仓库的版本

git reset - 用HEAD指向的内容更新缓存区（Index）

git reset –hard - 用HEAD指向的内容更新缓存区（Index）与工作目录

git reset 31f2bb1 - 先移动HEAD指针，再用get reset的操作

git reset –hard 31f2bb1 - 先移动HEAD指针，再用git reset –hard的操作

git reset –soft 31f2bb1 - 只移动HEAD指针

git revert - 回退特定提交

git rm /pather/to/the/file/HelloWorld.c - 删除文件(删除文件的同时，也变更git工作目录与缓存区（Index）的状态)

-------------要说再见啦感谢大佬的光临~-------------