1.拆分组件
2数据结构的设计
3组件的通讯方式一(适合三代以内的组件关系):props设计
4state设计
5组件的通讯方式二(解决关系比较远的组件传数据)
-----自定义事件处理(消息订阅/发布):pubsub.js
npm install pubsub-js--save
import PubSub from 'pubsub-js'
PubSub.subscribe('事件名',function(data){})//订阅
PubSub.publish("事件名",data) 发布事件
6组件通讯的方式三 redux(全局数据管理)
组件的组成
html
css
js
为什么要组件化开发
应用开发越来越复杂(结构/行为)-->简化开发--.>拆分界面-->多个组件
多个界面有相同的功能(可能有一些变化部分)-->提高复用-->抽取成一个组件(使用Props技术解决变化部分)-->各个界面只要使用组件标签就可以轻松体现效果
fetch--替代ajax
https://segmentfault.com/a/1190000011433064
传统的ajax
使用 XHR 发送一个 json 请求一般是这样:
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json';
xhr.onload = function() {
console.log(xhr.response);
};
xhr.onerror = function() {
console.log("Oops, error");
};
xhr.send();
使用 Fetch 后,顿时看起来好一点
fetch(url).then(function(response) {
return response.json();
}).then(function(data) {
console.log(data);
}).catch(function(e) {
console.log("Oops, error");
});
使用 ES6 的 箭头函数 后:
fetch(url).then(response => response.json())
.then(data => console.log(data))
.catch(e => console.log("Oops, error", e))
现在看起来好很多了,但这种 Promise 的写法还是有 Callback 的影子,而且 promise 使用 catch 方法来进行错误处理的方式有点奇怪。不用急,下面使用 async/await 来做最终优化:
注:async/await 是非常新的 API,属于 ES7,目前尚在 Stage 1(提议) 阶段,这是它的完整规范。使用 Babel 开启 runtime 模式后可以把 async/await 无痛编译成 ES5 代码。也可以直接使用 regenerator 来编译到 ES5。
try {
let response = await fetch(url);
let data = response.json();
console.log(data);
} catch(e) {
console.log("Oops, error", e);
}
// 注:这段代码如果想运行,外面需要包一个 async function
duang~~ 的一声,使用 await
后,写异步代码就像写同步代码一样爽。await
后面可以跟 Promise 对象,表示等待 Promise resolve()
才会继续向下执行,如果 Promise 被 reject()
或抛出异常则会被外面的 try...catch
捕获。
Promise,generator/yield,await/async 都是现在和未来 JS 解决异步的标准做法,可以完美搭配使用。这也是使用标准 Promise 一大好处。最近也把项目中使用第三方 Promise 库的代码全部转成标准 Promise,为以后全面使用 async/await 做准备。
另外,Fetch 也很适合做现在流行的同构应用,有人基于 Fetch 的语法,在 Node 端基于 http 库实现了 node-fetch,又有人封装了用于同构应用的 isomorphic-fetch。