Skip to content

Commit a7b9f58

Browse files
committed
feat: up
1 parent 35d99b2 commit a7b9f58

File tree

6 files changed

+380
-20
lines changed

6 files changed

+380
-20
lines changed

node笔记/node实战.md

Lines changed: 48 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,9 @@ req 的事件:
172172
})
173173
```
174174

175-
处理 http 请求(需要 tostring 方法可以将接受到的二进制转化成字符串)
175+
处理 post 请求(需要 tostring 方法可以将接受到的二进制转化成字符串)
176+
177+
思路就是用一个水管将桶连起来,不断的接受,知道数据结束
176178

177179
```js
178180
const http = require('http')
@@ -190,4 +192,48 @@ const server = http.createServer((req, res) => {
190192
server.listen(3000, () => {
191193
console.log('server is running')
192194
})
193-
```
195+
```
196+
197+
### 文档
198+
199+
* request 的文档对应着 [http.IncomingMessage 类](http://nodejs.cn/api/http.html#http_class_http_incomingmessage)
200+
201+
* response 对应着 [http.ServerResponse 类](http://nodejs.cn/api/http.html#http_class_http_serverresponse)
202+
203+
### 总结
204+
205+
1. request 类中的 url 能获取到路由和queryString
206+
207+
2. queryString 模块能解析 querystring 请求
208+
209+
3. 响应的数据必须是字符串,用 JSON.stringify 序列化
210+
211+
4. 还有一种方式能设置header
212+
213+
```js
214+
res.writeHeader(404, {'Content-type': 'text/plain'})
215+
```
216+
217+
修改返回内容的另一种方式(除了 end),不用再 end 里面修改数据
218+
219+
```js
220+
res.write('404 Not Found\n')
221+
```
222+
223+
5. 获取到的 method 是大写的
224+
225+
# 4. 搭建开发环境
226+
227+
* 从 0 开始,不使用任何框架
228+
* 使用 nodemon 检测文件变化,自动重启node
229+
* 使用 cross-env 设置环境变量,兼容 mac、linux、windows
230+
231+
# 5. 开发接口
232+
233+
* 初始化路由: 根据之前技术方案的设计,做出路由
234+
* 返回假数据,将路由和数据处理分离,以符合设计原则
235+
236+
接口分类:
237+
238+
1. blog
239+
2. user

react16.md

Lines changed: 57 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -421,9 +421,10 @@ import svg from '.tet.png'
421421
* hoc 则是把公共的方法提取为外层父组件,把公共的方法通过 props 传给需要使用的组件,然后返回这个外层组件。有一些缺点,命名来源(多个hoc 是谁传入的 props 数据,命名冲突)
422422
* render prop 是把公共的部分当成子组件,父组件来传递一个 render 命名的函数,来控制子组件(公共方法的执行),但是会直接呈现在页面上(因为子组件的调用就是直接在页面上),因此类似于 vue 中的插槽,不能纯使用公共的方法,必须要返回 ui 。
423423

424-
## 插槽
424+
## 插槽与子节点
425425

426426
* react 也可以像 vue的插槽一样 中在组件内部传入值
427+
* react 的子节点就是插槽位置的节点
427428

428429
使用:
429430

@@ -781,6 +782,16 @@ diff 规则:
781782
```
782783

783784
不推荐使用 ref 尽量别直接操作 DOM,使用数据驱动的方式。
785+
786+
也可以像 vue 一样简写
787+
788+
```jsx
789+
<input ref='inout'></input>
790+
791+
this.ref.inout
792+
```
793+
794+
784795

785796
注意:
786797

@@ -1891,4 +1902,48 @@ export default () => {
18911902
18921903
## 1. setState 不能设置到render里面
18931904
1894-
* 这样会造成死循环,直接报错
1905+
* 这样会造成死循环,直接报错
1906+
1907+
## 2. setState 是同步的还是异步的
1908+
1909+
1. 生命周期函数中的 setState、react 事件监听回调中的 setState 都是异步的
1910+
2. 定时器、原生事件回调、promise回调,setState 是同步执行的
1911+
1912+
### 使用
1913+
1914+
1. 函数类型的使用
1915+
1916+
setState((state, props) => {}, callback)
1917+
1918+
里面的state 和 props 总是最新的数据
1919+
1920+
2. 对象类型的使用
1921+
1922+
* setState 是异步调用的时候,才回去研究 render中执行的数据,同步调用不需要考虑render的渲染调用几次
1923+
1924+
* 两种方式的调用都会合并成一次修改数据(在render上显示)
1925+
* 调用对象的形式如果使用到 this.state ,这个数据不是最新的,因此建议使用 函数使用的形式
1926+
1927+
## 3. react 事件绑定是根据事件委托来实现的
1928+
1929+
## 4. react 组件相关
1930+
1931+
* react 组件元素不能直接写子元素,不会显示,必须要在该组件的内部使用 创建插槽来实现渲染
1932+
1933+
```jsx
1934+
<Item>
1935+
<div>我不会显示</div>
1936+
</Item>
1937+
```
1938+
1939+
### 4.1 component 存在的问题
1940+
1941+
* 继承 Component 的组件
1942+
1. 父组件的 render 一定会触发子组件的 render
1943+
2. 档期组件 调用了 setState ,就会触发当前组件的 render,即使啥也没干
1944+
1945+
### 4.2 PureComponent 的使用
1946+
1947+
* 使用 PureComponent 能够实现组件数据没更新,不去执行 render 更新组件
1948+
1949+
实现了 `shouldComponentUpdate`的拦截,使用的浅层拷贝对比。只能识别到对象属性的属性的变化。

vue 学习笔记.md

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2788,7 +2788,7 @@ Object.defineProperty(obj, 'a', {
27882788
2. 方式2
27892789

27902790
```vue
2791-
<a @click='a(), b()'>点击</a>
2791+
<a @click='a(), b()'>点击1</a>
27922792
```
27932793

27942794

@@ -2799,3 +2799,36 @@ Object.defineProperty(obj, 'a', {
27992799
<button @click='Event($event)'>
28002800
```
28012801

2802+
## 8. 响应式原理
2803+
2804+
* vue 实例中声明的数据,就是响应式的
2805+
2806+
数据发生变化,视图会重新渲染,更新最新的数据
2807+
2808+
* 问题
2809+
2810+
1、Vue 是怎么知道数据改变?
2811+
2812+
2、Vue 在数据改变时,怎么知道通知哪些视图更新?
2813+
2814+
3、Vue 在数据改变时,视图怎么知道什么时候更新?
2815+
2816+
核心的三个概念: Object.defineProperty,依赖收集,依赖更新
2817+
2818+
* 答案
2819+
2820+
1. vue 在 set 方法中做了数据劫持
2821+
2822+
data 中的每个属性,都拥有一个数组,保存着谁依赖了他,这就是依赖收集,依赖我的页面统统保存起来。
2823+
2824+
每个属性都有一个 dep 来保存这个属性的依赖,key值跟别是 id (属性的id),subs(依赖收集器) 数组中保存这所有依赖该属性的 watcher
2825+
2826+
watcher: 每个页面都有一个 watcher,可用于实例更新
2827+
2828+
总结: 每个属性都有一个专属的 dep 中保存这依赖数组 subs,每个使用到该属性的页面(watcher)都将添加到该数组 subs(依赖收集器) 里面。
2829+
2830+
依赖收集使用的就是 defineProperty 中的 getter
2831+
2832+
2. 当属性发生变化的时候,就用 setter 通知更新,遍历依赖收集器中的页面,逐个通知 watcher去更新视图
2833+
2834+
3. 当触发了 setter 的时候就要进行更新。

0 commit comments

Comments
 (0)