技術標籤：React框架入門reactjs

寫在前面，大家好！我是【跨考菌】，一枚跨界的程式猿，專注於後臺技術的輸出，目標成為全棧攻城獅！這部落格是對我跨界過程的總結和思考。如果你也對Java、後端技術感興趣，抑或是正在糾結於跨界，都可以關注我的動態，讓我們一起學習，一起進步~
我的部落格地址為：【跨考菌】的部落格

目錄

• 1 元件通訊
• • 1.1 方式一: 通過props傳遞
  • 1.2 方式二: 使用訊息訂閱(subscribe)-釋出(publish)機制
  • 1.3 方式三: redux
• 2 事件監聽理解
• • 2.1 原生DOM事件
  • 2.2 自定義事件(訊息機制)
  • 2.3 ES6常用新語法

上篇

1 元件通訊

1.1 方式一: 通過props傳遞

1. 共同的資料放在父元件上, 特有的資料放在自己元件內部(state)

2. 通過props可以傳遞一般資料和函式資料, 只能一層一層傳遞

3. 一般資料–>父元件傳遞資料給子元件–>子元件讀取資料
   <TodoList todos={todos} />

4. 函式資料–>子元件傳遞資料給父元件–>子元件呼叫函式
   <TodoAdd add={this.add} count={todos.length} />

1.2 方式二: 使用訊息訂閱(subscribe)-釋出(publish)機制

1. 工具庫: PubSubJS
2. 下載: npm install pubsub-js --save
3. 使用:

    import PubSub from 'pubsub-js' //引入
     PubSub.subscribe('delete', function(data){ }); //訂閱
     PubSub.publish('delete', data) //釋出訊息
   

案例詳見【React框架入門】React腳手架案例二

1.3 方式三: redux

下一篇講。

2 事件監聽理解

2.1 原生DOM事件

1) 繫結事件監聽
a. 事件名(型別): 只有有限的幾個, 不能隨便寫

2) 觸發事件
a. 使用者操作介面
b. 事件名(型別)
c. 資料()

2.2 自定義事件(訊息機制)

1. 繫結事件監聽
   a. 事件名(型別): 任意
   b. 回撥函式: 通過形參接收資料, 在函式體處理事件
2. 觸發事件(編碼)
   a. 事件名(型別): 與繫結的事件監聽的事件名一致
   b. 資料: 會自動傳遞給回撥函式

2.3 ES6常用新語法

1. 定義常量/變數: const/let
2. 解構賦值: let {a, b} = this.props import {aa} from ‘xxx’
3. 物件的簡潔表達: {a, b}
4. 箭頭函式:
   a. 常用場景
   * 元件的自定義方法: xxx = () => {}
   * 引數匿名函式
   b. 優點:
   * 簡潔
   * 沒有自己的this,使用引用this查詢的是外部this
5. 擴充套件(三點)運算子: 拆解物件(const MyProps = {}, <Xxx {…MyProps}>)
6. 類: class/extends/constructor/super
7. ES6模組化: export default | import