wordpress 国外镜像 PaddleHub 海思 debugging keras constructor swiftui Vanilla JS vue网站模板 河南普通话考试报名官网 oracle修改字段默认值 matlab注释一段 mysql自然连接 python环境 java时间函数 java时间格式 莫愁脚本 路由器有辐射吗 矩阵分析与应用 位置不可用 京东钱包客户端 ip地址转换器 古风头像女动漫 bz2解压 deepcopy 3dmax2014下载 脚本大师 死从天降成就 qq悄悄话怎么知道对方是谁 cad拉伸命令 h5支付接口 mxf是什么格式 重复文件查找 投屏软件电脑版 smartupload 制表符 伏魔战记隐藏英雄 最好大学网 thinkcell
当前位置: 首页 > 学习教程  > 编程语言

react 、redux学习总结

2020/9/19 13:43:09 文章标签:

1、生命周期流程图

在这里插入图片描述

2、关于this

  • 自定义事件需要在constructor里面绑定this,或使用ES6的箭头函数
export default class myComponent extends React.Component {
	constructor(props) {
	      super(props);
	      this.handerClick = this.handerClick.bind(this);
	}
	
	handerClick (){
		//xxx
	}

    hander4Click = () =>{
    	//xxx
    }
}

3、ajax请求的方式

  • axios: 轻量级, 建议使用

a. 封装XmlHttpRequest对象的ajax
b. promise风格
c. 可以用在浏览器端和node服务器端

  • fetch: 原生函数, 但老版本浏览器不支持

a. 不再使用XmlHttpRequest对象提交ajax请求
b. 为了兼容低版本的浏览器, 可以引入兼容库fetch.js

  • axios
// 1)	GET请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });


// 2)	POST请求
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

  • fetch
//1)	GET请求
fetch(url).then(function(response) {
  return response.json()
}).then(function(data) {
  console.log(data)
}).catch(function(e) {
  console.log(e)
});

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

4、ES6常用新语法

  1. 定义常量/变量: const/let

  2. 解构赋值: let {a, b} = this.props import {aa} from ‘xxx’

  3. 对象的简洁表达: {a, b}

  4. 箭头函数:

    a. 常用场景
    * 组件的自定义方法: xxx = () => {}
    * 参数匿名函数

    b. 优点:
    * 简洁
    * 没有自己的this,使用引用this查找的是外部this

  5. 扩展(三点)运算符: 拆解对象(const MyProps = {}, <Xxx {…MyProps}>)

  6. 类: class/extends/constructor/super

  7. ES6模块化: export default | import


本文链接: http://www.dtmao.cc/news_show_200062.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?