react_app 項目開發 (2)_axios_pubsub-js

生產環境打包並運行

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;