react-项目编码流程（props pubsub redux fetch）

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（全局数据管理）

扫描二维码关注公众号，回复： 2731891 查看本文章

组件的组成

html

css

为什么要组件化开发

应用开发越来越复杂（结构/行为）-->简化开发--.>拆分界面-->多个组件

多个界面有相同的功能（可能有一些变化部分）-->提高复用-->抽取成一个组件（使用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。

react-项目编码流程（props pubsub redux fetch）

猜你喜欢