feat: todoList总结

Author: webVueBlog

README.md

@@ -250,6 +250,7 @@
 - [React 组件 API](./react/API.md)
 - [React 组件生命周期](./react/组件生命周期.md)
 - [React Refs](./react/Refs.md)
+- [todoList总结](./react/todoList.md)
 
 ### 阶段二
 
@@ -271,6 +272,8 @@
 - [Update和UpdateQueue](./react/Update和UpdateQueue.md)
 - [react脚手架](./react/react脚手架.md)
 - [消息订阅与发布](./react/消息订阅与发布.md)
+- [fetch](./react/fetch.md)
+
 
 ## 常见问题及解答
 

react/fetch.md

@@ -0,0 +1,45 @@
+fetch的出现就是为了解决XHR的问题：
+
+使用XHR发送一个json请求一般是这样：
+
+```js
+var xhr = new XMLHttpRequest();
+xhr.open('GET', url);
+xhr.responseType = 'json';
+
+xhr.onload = function() {
+ console.log(xhr.response);
+};
+
+xhr.onerror = function() {
+ console.log('eerror')
+}
+
+xhr.send();
+```
+
+fetch:
+
+```js
+fetch('').then(
+ response => {
+  console.log('联系服务器成功了');
+  return response.json()
+ },
+ error => {console.log('联系服务器失败了', error)}
+).then(
+ response => {console.log('获取数据成功了', response)},
+ error => {console.log('获取数据失败了', error)}
+)
+```
+
+```js
+try {
+ const response = await fetch('')
+ const data = await response.json()
+ console.log(data)
+} catch (error) {
+ console.log('请求出错', error)
+}
+```
+

react/todoList.md

@@ -0,0 +1,43 @@
+1. 拆分组件，实现静态组件，注意：className，style 的写法
+2. 动态初始化列表，如何确定将数据放在哪个组件的state中？
+
+某个组件使用：放在其自身的state中
+
+某些组件使用：放在他们共同的父组件state中
+
+3. 关于父子之间通信
+
+【父组件】给【子组件】传递数据：通过props传递
+
+【子组件】给【父组件】传递数据：通过props传递，要求父提前给子传递一个函数
+
+4. 注意defaultChecked 和 checked 的区别，类似的还有： defaultValue 和 value
+
+5. 状态在哪里，操作状态的方法就在哪里
+
+设计状态时要考虑全面，例如带有网络请求的组件，要考虑请求失败怎么办。
+
+ES6小知识点： 解构赋值+重命名
+
+```js
+let obj = {a: {b:1} }
+const {a} = obj; // 传统解构赋值
+const {a:{b}} = obj; // 连续解构赋值
+const {a:{b:value}} = obj; // 连续解构赋值+重命名
+```
+
+消息订阅与发布机制
+
+1. 先订阅，再发布
+2. 适用于任意组件通信
+3. 要在组件的componentWillUnmount中取消订阅
+
+fetch发送请求
+
+```js
+try {
+
+}catch(error) {
+
+}
+```

react/消息订阅与发布.md

@@ -10,3 +10,20 @@
 2. PubSub.subscribe('delete', function(data){}); // 订阅
 3. PubSub.publish('delete', data) // 发布消息
 
+```js
+var mySubscriber = function(msg, data) {
+ console.log(msg, data);
+};
+
+var token = PubSub.subscribe('MY TOPIC', mySubscriber);
+
+PubSub.unsubscribe(token);
+```
+
+```js
+var mySubscriber = function (msg, data) {
+ console.log()
+}
+
+PubSub.publish('消息名', 'hello world')
+```