React & JavaScript 语法简介

2017-12-18 Monday     misc

这里简单介绍一下 React 的语法。

react logo

调试

使用 FireFox Redux DevTools 或者 Chrome Redux DevTools,安装完后,如果打开的是 Redux 应用则会在地址栏中显示插件。

简介

State Props

React 基于状态实现对 DOM 控制和渲染,组件状态分为两种:一种是组件间的状态传递;另一种是组件的内部状态,这两种状态使用 props 和 state 表示。

props 用于从父组件到子组件的数据传递;组件内部通过 state 表示自己的状态,这些状态只能在组件内部修改。

数据流与 Props

React 中的数据流是单向的,只会从父组件传递到子组件,属性 Props(properties) 是父子组件间进行状态传递的接口,React 会向下遍历整个组件树,并重新渲染使用这个属性的组件。

组件内部状态与 State

State 是 React 中组件的一个对象,React 把用户界面当做是状态机,然后根据不同的状态进行渲染,从而简化处理,使用户界面与数据保持一致。

更新组件的 state 会导致重新渲染用户界面(不要操作DOM)。

常用通知 React 数据变化的方法是 setState(data, callback),该方法会合并 data 到 this.state 并重新渲染组件;当渲染完成后,调用可选的 callback 回调。

Promise

如果需要向后端发送一个请求,并对返回的数据进行操作,可能首先想到的是回调函数,但如果在这个函数中又需要执行第二个、第三个…第 N 个异步操作,那么回调函数就会一层层的嵌套,严重影响了代码可读性和可维护性。

Promise 就是解决这个问题的方案。

状态

Promise 有三种状态:pending、resolved、rejected,状态之间的转换只能从 pending 到 resolved 或 rejected,并且状态一旦转换就再也无法改变;

基本用法

Promise 是一个 JavaScript 对象,用来执行异步操作,并返回得到的值或者失败的信息。

// Promise is something like this.
var promise = new Promise(function(resolved, rejected) {
    //doSomethingAsync();

    if (success) {
        resolved();
    } else {
        rejected();
    }
})

// How to use a promise. First arg is resolved, second is rejected
promise.then(function(res) {
    console.log(res);
}, function(err) {
    alert(err);
})

链式调用

如果仅有一个 Promise 对象的话,情况较为简单,但当多个 Promise 要按照一定的顺序执行时,事情就变得复杂起来了。

function fetchSomething() {
    return new Promise(function(resolved) {
        if (success) {
            resolved(res);
        }
    });
}
fetchSomething().then(function(res) {
    console.log(res);
    return fetchSomething();
}).then(function(res) {
    console.log('duplicate res');
    return 'done';
}).then(function(tip) {
    console.log(tip);
})

import

1. 在B.js中引用A.js

也就是导入默认的变量。

import A from './A';

此时 A.js 中必须有默认导出 export default,则 import 后面的命名可以随意取,因为总会解析到 A.js 中的 export default,例如:

// A.js
export default 42

// B.js
import A from './A'
import MyA from './A'
import Something from './A'

2. 使用花括号

也就是导入特定的变量。

import {A} from './A';

其中花括号中的名字必须是 A.js 中通过 export 导出的名字,例如:

export const A = 42

此时如果导入的是不同的名字,那么就会报错。

// B.js
import { A } from './A'
import { myA } from './A'       // Doesn't work!
import { Something } from './A' // Doesn't work!

3. 导入多个变量

一个模块的默认导出只能有一个,但是可以指定多个导出名,例如

// B.js
import A, { myA, Something } from './A'

这里导入了默认的 A 以及 myA、Something 。

4. 导入重命名

假设有如下的 A.js 文件。

// A.js
export default 42
export const myA = 43
export const Something = 44

那么在导入时可以通过如下方式进行重命名。

// B.js
import X, { myA as myX, Something as XSomething } from './A'

JavaScript 语法

This

在 Javascript 中 this 总是指向调用它所在方法的对象,this 是在函数运行时,自动生成的一个内部对象,只能在函数内部使用。

1. 全局函数调用

var name = "global this";
function globalTest() {
	this.name = "global this";
	console.log(this.name);
}
globalTest(); //global this

其中 globalTest() 是全局性的方法,属于全局性调用,因此 this 就代表全局对象 window。

2. 对象方法调用

如果函数作为对象的方法调用,this 指向的是这个上级对象,即调用方法的对象。

function showName() {
	console.log(this.name);
}
var obj = {};
obj.name = "object name";
obj.show = showName;
obj.show(); // object name

3. 构造函数调用

构造函数中的 this 指向新创建的对象本身。

function showName() {
	this.name = "showName function";
}
var obj = new showName();
console.log(obj.name); //showName function

通过 new 关键字创建一个对象的实例,将 this 指向对象 obj 。

4. Call Apply Bind

三者在功能上没有区别,都是改变 this 的指向,其区别主要在于方法的实现形式和参数传递:

function.call(object, arg1, arg2, ....)
function.apply(object,[arg1, arg2, ...])
var ss=function.bind(object, arg1, arg2, ....)

使用方式如下:

function show(sex){
	console.log("function" + sex);
}
var person = {
	name: "your name",
	age: 14
};
show.call(person, "mail");
show.apply(person, ["femail"]);
var func = show.bind(person,"unknown");
func();

参考



如果喜欢这里的文章,而且又不差钱的话,欢迎打赏个早餐 ^_^


About This Blog

Recent Posts

Categories

Related Links

  • RTEMS
    RTEMS
  • GNU
  • Linux Kernel
  • Arduino

Search


This Site was built by Jin Yang, generated with Jekyll, and hosted on GitHub Pages
©2013-2018 – Jin Yang