0916 NOTE

0916 NOTE

todoList案例总结

​ 1.拆分组件、实现静态组件，注意：className、style的写法

​ 2.动态初始化列表，如何确定将数据放在哪个组件的state中？

​ ——某个组件使用：放在其自身的state中

​ ——某些组件使用：放在他们共同的父组件state中（官方称此操作为：状态提升）

​ 3.关于父子之间通信：

​ 1.【父组件】给【子组件】传递数据：通过props传递

​ 2.【子组件】给【父组件】传递数据：通过props传递，要求父提前给子传递一个函数

​ 4.注意defaultChecked 和 checked的区别，类似的还有：defaultValue 和 value

​ 5.状态在哪里，操作状态的方法就在哪里

react ajax

注意：

​ React本身只关注于界面, 并不包含发送ajax请求的代码

​ 前端应用需要通过ajax请求与后台进行交互(json数据)

​ react应用中需要集成第三方ajax库(或自己封装)

常用ajax请求库：

​ 1.jQuery：比较重, 如果需要另外引入不建议使用

​ 2.axios: 轻量级, 建议使用

​ a.封装XmlHttpRequest对象的ajax

​ b.promise风格

​ c.可以用在浏览器端和node服务器端

react代理：

1.package.json中配置proxy，设置代理地址

"proxy" : "http://localhost:5000"

1. 优点：配置简单，前端请求资源时可以不加任何前缀。
2. 缺点：不能配置多个代理。
3. 工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）

注意：自身public文件夹下拥有的文件，直接获取自身文件

注意：更改配置后记得重启脚手架

2.在src下创建setupProxy.js文件，commosjs语法，名字不可改，进行配置

const proxy = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(
    proxy('/api1', {  //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)
      target: 'http://localhost:5000', //配置转发目标地址(能返回数据的服务器地址)
      changeOrigin: true, //控制服务器接收到的请求头中host字段的值
      /*
      	changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
      	changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000
      	changeOrigin默认值为false，但我们一般将changeOrigin值设为true
      */
      pathRewrite: {'^/api1': ''} //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)
    }),
    proxy('/api2', { 
      target: 'http://localhost:5001',
      changeOrigin: true,
      pathRewrite: {'^/api2': ''}
    })
  )
}

1. 优点：可以配置多个代理，可以灵活的控制请求是否走代理。
2. 缺点：配置繁琐，前端请求资源时必须加前缀。

连续解构赋值：

let obj = { a: { b: { c: { d: 3 } } } };
let { a: { b: { c: { d: data } } } } = obj;
console.log(data);

消息订阅-发布机制

常用插件：PubSubJS（publish subscribe JavaScript）发布-订阅-js

使用：

①安装：npm i pubsub-js

②引入：import PubSub from ‘pubsub-js’

③使用举例

var mySubscriber = function (msg, data) {
    //获取消息后在此接收
    console.log( msg, data );
};
//订阅消息，token用于后续取消订阅
var token = PubSub.subscribe('MY TOPIC', mySubscriber);
//发布消息
PubSub.publish('MY TOPIC', 'hello world!');
//取消订阅
PubSub.unsubscribe(token);
//取消函数mySubscriber的所有订阅消息
PubSub.unsubscribe(mySubscriber);

Fetch

设计思想：关注分离

原生函数，不再使用XmlHttpRequest对象提交ajax请求

老版本浏览器可能不支持

https://github.github.io/fetch/

https://segmentfault.com/a/1190000003810652

//get
fetch(url).then(function(response) {
    return response.json()
  }).then(function(data) {
    console.log(data)
  }).catch(function(e) {
    console.log(e)
  });

//post
fetch(url, {
    method: "POST",
    body: JSON.stringify(data),
  }).then(function(data) {
    console.log(data)
  }).catch(function(e) {
    console.log(e)
  })

github搜索案例总结

​ 1.设计状态时要考虑全面，例如带有网络请求的组件，要考虑请求失败怎么办。

​ 2.ES6小知识点：解构赋值+重命名

​ let obj = {a:{b:1}}

​ const {a} = obj; //传统解构赋值

​ const {a:{b}} = obj; //连续解构赋值

​ const {a:{b:value}} = obj; //连续解构赋值+重命名

​ 3.消息订阅与发布机制

​ 1.先订阅，再发布（理解：有一种隔空对话的感觉）

​ 2.适用于任意组件间通信

​ 3.要在组件的componentWillUnmount中取消订阅

​ 4.fetch发送请求

​ try {

​ const response= await fetch(/api1/search/users2?q=${keyWord})

​ const data = await response.json()

​ console.log(data);

​ } catch (error) {

​ console.log(‘请求出错’,error);

​ }

react 路由

SPA

单页Web应用（single page web application，SPA）。

整个应用只有一个完整的页面。

点击页面中的链接不会刷新页面，只会做页面的局部更新。

数据都需要通过ajax请求获取, 并在前端异步展现。

路由

什么是路由?

一个路由就是一个映射关系(key:value)

key为路径, value可能是function或component

路由分类

后端路由：

​ 理解： value是function, 用来处理客户端提交的请求。

​ 注册路由： router.get(path, function(req, res))

​ 工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据

前端路由：

​ 浏览器端路由，value是component，用于展示页面内容。

​ 注册路由:

​ 工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件

history

window.history指向History对象，它表示当前窗口的浏览历史。

History对象保存了当前窗口访问过的所有页面网址。

history.back()//后退到前一个网址
history.go(-1)//后退
history.go(0)//刷新当前页面
window.history.pushState(state,title,url)//历史中添加一条记录
history.length;//当前窗口包含的历史记录条数

前端路由是一个栈结构，工作基于BOM的history对象

react-router-dom

​ react的一个插件库。

​ 专门用来实现一个SPA应用。

​ 基于react的项目基本都会用到此库。