這篇主要是在講繼上一章節後,如何在reactjs中抽離出todos動態產生items

以下是線上reactjs讀書會志芳攻略jason大大的github第八章與第九章節影片

https://www.youtube.com/watch?v=6LbyW6xC8gM&feature=youtu.be

這邊有幾個心得重點

1.使用陣列的 map 方法去產生迴圈元件時要記得添加唯一的 key值

2.影片中有使用到[ES5] 陣列的 filter 方法,[ES5] 陣列的 map 方法建議可以改成Es6 語法格式如下,應為都會透過babel在轉es5,所以滿建議可以慢慢切到es6嚕

  var arr=[1,2,3];
  arr.map((data)=>{...});
  arr.filter((data)=>{...});
  
  也可以這樣用 傳兩個變數
  [[1, 2], [3, 4]].map(([a, b]) => a + b);
  預設值用法
  [1, undefined, 3].map((x = '預設值我是polo') => x);
 

關於更多 map 用法 可以參考 阮一峰老師的這一篇 http://es6.ruanyifeng.com/#docs/destructuring

關於pure function 之後會在 redux 設計模式中會用到這邊先有個概念
像這個map filter,給定相同的輸入(傳入值)，一定會回傳相同輸出值結果(回傳值)
不會有產生副作用,不用依賴任何外部的狀態參數這種就叫做pure function,這個部分之後會有章節在提到先有個概念就好了

3.[ES6] 箭頭函數 (arrow function)這個必學歐,下列程式片段(取自jason大github片段code)與Es5/Es6比較

// ES5 中，定義匿名函數，及將函數賦值給變數的方法
var plus = function(x) {
  return x + 1;
};

// ES6 中，箭頭函數讓匿名函數宣告語法更簡潔
const plus = (x) => x + 1;  //<--跟上方es5少了function 並且把 {} 與 return 省略

// ES6 中，箭頭函數會自動綁定 this
function Person() {
  this.text = 'hello';

  // Error: ES6 的匿名函數不會自動綁定 this，因此取不到 this.text
  setInterval(function() {
    console.log(this.text);
  }, 1000);

  // Correct
  setInterval(() => console.log(this.text), 1000);
}

new Person();

4. 初始 state 的方法,這邊因為有extends React.Component 所以可以使用constructor來設定
   this.state 的資料,等於說每個Component中都有自己的state

class TodoApp extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      firstName: 'Jason',
      lastName: 'Chung'
    };
  }

5. 取得 state 的方法

  在jsx中直接使用{this.state.firstName} 就可以取出來了 很方便

6. 更新 state 的方法
   可以使用 this.setState 去改變狀態 千萬不要用this.setState.firstName='polo'歐

  this.setState({
      firstName: 'polo',
      lastName: 'chi'
    });

7.state就像他名稱定義是一個狀態,子母元件要溝通時可以使用,至於props就是容器元件中一層層傳下去
8.stateless,繼上第七項來說如果不需要設定state 就可以不需要 extends React.Component,可以單純寫一個接受 props的元件即可,如果只是畫面呈現建議都是使用stateless
9.元件的state跟之後redux的state (說到reudx嚕),基本上如果程式比較複雜會有多個container(容器)管理state就會變得非常不容易,所以就會有flux與redux的design pattern

讀書會的性質是大家知識交流不一定是最正確的,但是我們藉由討論交換意見,縮短學習時間,所以如果有誤刊,請在留言通知我,polo也還在學習中