react 、redux学习总结

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 = () => {}
   * 参数匿名函数
   

   // ES5
   input.map(item => item + 1);
   
   // ES6
   input.map(function (item) {
     return item + 1;
   });
   

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

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

6. 类: class/extends/constructor/super

7. ES6模块化: export default | import