生产环境打包并运行

yarn run build

会src代码进行打包处理,在内存中生成打包文件

将打包文件保存至内存

yarn global add serve

serve -s build

将 build 文件夹下所有资源加载到内存中

启动服务器,运行内存中的打包文件,通过浏览器访问 url

react 的 webpack 配置

  • 查看 package.json 可以看到

npm run start 命令实际上是调用了 react-scripts start 命令

react-scripts 是 create-react-app 添加的一个 npm 包

所有的配置文件都藏在 node_modules/react-scripts 目录下,我们当然可以钻进这个目录去一探究竟

  • 可以使用 npm run eject 来看清楚背后的原理,源码不可逆

当前目录下会增加两个目录

一个是 scripts ,另一个是 config

同时, package.json文件中的 scripts 部分也发生了变化:

组件间的数据传递

祖先组件 传递给 后代组件  : props 传递

后代组件 给 祖先组件 传递  : 后代组件调用 props 接收到的函数

async/await

  • 作用:

简化 promise 的使用: 不用通过 then() 来指定异步的回调函数

以同步编码方式实现异步流程

  • 哪里写 await?

在返回 promise 对象的表达式左侧指定 await, 这样就可以直接 promise 异步返回的结果

  • 哪里写async?

await所在函数定义的左侧

事件处理机制

  • DOM 事件

绑定事件

目标元素

事件名

回调函数: 接收数据并处理

触发事件

某动作目标元素的事件

事件名

数据都封装在 event 对象中

  • 自定义事件 (如 消息发布/订阅机制)
  • emit 触发
  • dispatch 分发

绑定事件监听

自定义事件名

回调函数: 接收数据并处理

触发事件

手动触发

自定义的 事件名

自定义数据

componentWillReceiveProps (newProps){...}

// 初始时是不会调用的, 后面再接收到新的标签属性就会自动调用

使用消息订阅 (subscribe) - 发布 (publish) 机制

特点: 不强调组件关系

工具库: PubSubJS

下载: npm install pubsub-js --save        // 加载到生产依赖

使用:

1. 引入 const PubSub = require("pubsub-js");

2. 提供的对象 PubSub

PubSub.subcribe(msgName, function(msgName, data){...})        // 订阅消息

PubSub.publish(msgName, data)        // 发布消息

  • 源码:
  • import React, { Component } from 'react';
    
    import ROW from '../components/ROW/ROW'
    import axios from "axios";
    import PubSub from "pubsub-js"; class App extends Component {
    constructor(props){
    super(props);
    this.state = {
    isFirst: true,
    fond: false,
    errInfo:"",
    responseData: []
    };
    this.userSearch = this.userSearch.bind(this);
    } componentDidMount(){
    PubSub.subscribe("keywords", async (msgName, searchName)=>{
    this.setState({
    isFirst: false,
    fond: false,
    errInfo:"",
    responseData: []
    });
    try{
    const result = await axios.get(`https://api.github.com/search/users?q=${searchName}`); // [{},{}...] 数组 被 map 处理返回每一项,[{},{}...]
    let responseData = result.data.items.map((each, index)=>({
    usarName:each.login,
    picUrl:each.avatar_url,
    gitUrl:each.html_url
    })); this.setState({
    responseData,
    fond: true
    });
    }catch (e) {
    this.setState({
    errInfo:"请求出错,请稍后重试...",
    fond: true
    });
    }
    })
    } async userSearch(){
    const searchName = this.refs.nameInput.value;
    if(searchName){
    PubSub.publish("keywords", searchName);
    this.refs.nameInput.value = ""
    }
    } render() {
    const {responseData, isFirst, fond, errInfo} = this.state;
    let tips = "";
    if(isFirst){
    tips = '请输入想要所搜的"用户名"';
    }else if(!fond){
    if(errInfo){
    tips = errInfo;
    }else{
    tips = "Searching...";
    }
    }
    return (
    <div className="app">
    <section className="jumbotron">
    <h3 className="jumbotron-heading">Git 用户搜索:</h3>
    <div>
    <input ref="nameInput" type="text" placeholder="请输入想要搜索的 '用户名'"/>
    <button onClick={this.userSearch}>Search</button>
    </div>
    </section>
    <h3>{tips}</h3>
    {
    responseData.map((each, index)=>{
    return <ROW key={index} info={each}/>;
    })
    }
    </div>
    );
    }
    } export default App;

react_app 项目开发 (2)_axios_pubsub-js的更多相关文章

  1. react_app 项目开发

    react_app 项目开发 npm install -g create-react-app npm root -g        // 查看安装包位置 创建项目 create-react-app m ...

  2. react_app 项目开发 (5)_前后端分离_后台管理系统_开始

    项目描述 技术选型 react API 接口 接口文档,url,请求方式,参数类型, 根据文档描述的方法,进行 postman 测试,看是否能够得到理想的结果 collections - 创建文件取项 ...

  3. 项目开发---使用node.js中sass语法

    前言:本文中所有sass文件都指后缀名为scss的文件.在此也建议使用后缀名为scss的文件,以避免sass后缀名的严格格式要求报错. 一.sass插件的安装: gulp-sass-china //  ...

  4. react_app 项目开发 (3)_单页面设计_react-router4

    (web) 利用 react-router4 实现 单页面 开发 SPA 应用 ---- (Single Page Web Application) 整个应用只有 一个完整的页面 单击链接不会刷新页面 ...

  5. react_app 项目开发 (4)_ React UI 组件库 ant-design 的基本使用

    最流行的开源 React UI 组件库 material-ui 国外流行(安卓手机的界面效果)文档 ant-design 国内流行 (蚂蚁金服 设计,一套 PC.一套移动端的____下拉菜单.分页.. ...

  6. react_app 项目开发 (6)_后台服务器端-node

    后台服务器端 负责处理前台应用提交的请求,并向前台返回 json 数据 前台应用 负责 展现数据与用户交互 发 ajax 请求与后台应用交互 yarn add axios /src/api/ajax. ...

  7. react_app 项目开发_遇到的坑

    1. favicon.ico <link rel="shortcut icon" type="image/x-icon" href="./fav ...

  8. react_app 项目开发 (7)_难点集合

    /src/App/Admin/Header 布局 import {Row, Col} from "antd" <div className="header_box& ...

  9. react_app 项目开发 (8)_角色管理_用户管理----权限管理 ---- shouldComponentUpdate

    角色管理 性能优化(前端面试) 需求:只要执行 setState(), 就会调用 render  重新渲染.由于有时调用了 setState,但是并没有发生状态的改变,以致于不必要的刷新 解决: 重写 ...

随机推荐

  1. 第二节:如何正确使用WebApi和使用过程中的一些坑

    一. 基本调用规则 1. 前提 WebApi的默认路由规则为:routeTemplate: "api/{controller}/{id}", 下面为我们统一将它改为 routeTe ...

  2. oldboy s21day09

    #!/usr/bin/env python# -*- coding:utf-8 -*- # 1.将函数部分知识点,整理到自己笔记中.(搞明白课上讲的案例.) # 2.写函数,检查获取传入列表或元组对象 ...

  3. C# GetHashCode在x64与x86版本下不一样

    最好指定一下目标平台

  4. [家里蹲大学数学杂志]第057期图像复原中的改进 TV 模型

    $\bf 摘要$: 本文给出了王大凯等编的<图像处理中的偏微分方程方法>第 6.2 节的详细论述. $\bf 关键词$: 图像复原; TV 模型; matlab 编程 1. 前言 图像在形 ...

  5. $A,B$ 实对称 $\ra\tr((AB)^2)\leq \tr(A^2B^2)$

    设 $A,B$ 是 $n$ 阶实对称矩阵. 试证: $\tr((AB)^2)\leq \tr(A^2B^2)$. 又问: 等号何时成立? 证明:  由  $$\bex  \sum_i \sez{\su ...

  6. 高并发秒杀系统--Service事务管理与继承测试

    [Spring IoC的类型及应用场景]  [Spring事务使用方式] [Spring事务的特性] [Spring事务回滚的理解] [Service声明式事务的配置] 1.配置事务管理器 2.配置基 ...

  7. IDEA15 下运行Scala遇到问题以及解决办法

    为了让Scala运行起来还是很麻烦,为了大家方便,还是记录下来: 1.首先我下载的是IDEA的社区版本,版本号为15. 2.下载安装scala插件: 2.1 进入设置菜单. 2.2 点击安装JetBr ...

  8. spring的纯注解的IOC配置

    package config; import com.mchange.v2.c3p0.ComboPooledDataSource;import org.apache.commons.dbutils.Q ...

  9. Vue技术内幕 出去看看吧 实例化+挂载

    实例化时挂载DOM 从 Vue.prototype.$mount 挂载函数开始 有 template配置项时生成 render函数

  10. springMVC入门思路整理