React笔记

2018用到的前端内容

es6

nodejs

react

redux

reason

ES 6

 

thunk函数

this

JavaScript 的this 关键字在严格模式和非严格模式之间也会有一些差别

严格模式下

1.在全局执行环境中(在任何函数体外部)this 都指向全局对象。

2. 如果 this 没有被执行环境(execution context)定义,那它将保持为 undefined

function f2(){
  "use strict"; // 这里是严格模式
  return this;
}

f2() === undefined; // true

3. 可以用call或者apply方法传递/更改this的值。

4. ECMAScript 5 引入了 Function.prototype.bind。调用f.bind(someObject)会创建一个与f具有相同函数体和作用域的函数,但是在这个新函数中,this将永久地被绑定到了bind的第一个参数,无论这个函数是如何被调用的。

function f(){
  return this.a;
}

var g = f.bind({a:"azerty"});
console.log(g()); // azerty

var h = g.bind({a:'yoo'}); // bind只生效一次!
console.log(h()); // azerty

var o = {a:37, f:f, g:g, h:h};
console.log(o.f(), o.g(), o.h()); // 37, azerty, azerty

5. 箭头函数中,this的值与封闭词法环境的this保持一致。

6.函数作为对象里的方法被调用时,它们的 this 是调用该函数的对象。

7.如果该方法存在于一个对象的原型链上,那么this指向的是调用这个方法的对象,就像该方法在对象上一样。

8.当一个函数用作构造函数时(使用new关键字),它的this被绑定到正在构造的新对象。

9.当函数被用作事件处理函数时,它的this指向触发事件的元素

10.当代码被on-event 处理函数内联调用时,它的this指向监听器所在的DOM元素

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this

prototype

Promise

Node JS

 

npm 包管理

React

前端代码的组件化,便于复用。组件中可以包含逻辑和UI布局。

React相当于前端MVC中的View层,经常需要和Redux(M)和React-router(C)结合使用。

React中,数据通过状态和props流经进行传递,复杂易出错。可以使用react-redux来全局管理数据。

Redux

一个为JS APP设计的可预测的状态的容器,是一种前端设计模式。用一个单独的状态树(对象)保存整个应用的状态。这个对象不能被直接改变,只能通过action和reducer去改变。从而保证store中数据的可预测性。

核心概念包括: action,reducer,store。

action:某种行为/事件。

reducer:针对特定的行为,如何改变状态

store:存储的状态,单一的数据源

数据流过程(Data flow):

1. 调用action(dispatch(action)) 

2. Redux调用对应的reducer更改store中的数据

3. Store中的数据完成更新。

https://redux.js.org/

http://es6.ruanyifeng.com/

https://reactjs.org/

https://nodejs.org/en/

https://reasonml.github.io/reason-react/

网络上志同道合,我们一起学习网络安全,一起进步,QQ群:694839022
原文地址:https://www.cnblogs.com/cnsec/p/13547583.html