---
# System prepended metadata

title: 0.官方
tags: [React, Javascript]

---

# 0.官方
###### tags: `React` `Javascript`
* 所有的 React component 都必須像 Pure function 一般保護他的 props
Pure function : 方法內不會改變其參數

* State 的更新可能是非同步的
  React 可以將多個 setState() 呼叫批次處理為單一的更新，以提高效能。
  
  使用this.props 和 this.state可能出錯(更新的順序不一定如預期) 
  ```
  // 錯誤
  this.setState({
    counter: this.state.counter + this.props.increment,
  });
  ```
  
  應使用 setState(()=>{})：
  
  ```
  // 正確
  this.setState((state, props) => ({
    counter: state.counter + props.increment
  }));
  ```

* Event Handler中的this
  箭頭函式綁定死事件宣告位置的物件。
  若為一般function宣告方式，需要以bind()綁定物件，否則this=undefined
  ```
  <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
  <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
  ```
  
*   Key
	Key 幫助 React 分辨哪些項目被改變、增加或刪除。在 array 裡面的每個 element 都應該要有一個 key，如此才能給予每個 element 一個固定的身份
    > 	 避免用索引作為key : 詳見哲右的筆記

    ```
    const todoItems = todos.map((todo, index) =>
      <li key={index}>
        {todo.text}
      </li>
    );
	```
    
* 提升 state :上至下的資料流
	在 React 應用程式中，對於資料的變化只能有一個唯一的「真相來源」。
	
	通常來說，state 會優先被加入到需要 render 的 component。
	接著，如果發現其他的 component 也需要render的話，便應該要提升 state 到共同最靠近的 ancestor。
	因此，如果某樣東西可以從 prop 或 state 被取得，它可能不應該在 state。而應該將此處的statee向上提升。
	
	> 依賴上至下的資料流，而不是嘗試在不同 component 之間同步 state。

* 用Composition (不要繼承) 
1. 不確定自己將有哪些children component的父層，
    可用{props.children}接收其他component傳入
2.  特別化 (似繼承extends)
    更「特別」的 component render 更多「通用」的 component，
    並使用 prop 對其進行設定
```
function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
      {props.children}
    </FancyBorder>
  );
}

class SignUpDialog extends React.Component {
    ......
  render() {
    return (
      <Dialog title="Mars Exploration Program"
              message="How should we refer to you?">
        <input value={this.state.login}
               onChange={this.handleChange} />
        <button onClick={this.handleSignUp}>
          Sign Me Up!
        </button>
      </Dialog>
    );
  }
    ......
}
```
-----------------
> 總結 用react的方式思考
1. 將頁面拆解成 component
2. 建立一個靜態版本(只有render 沒有state)
3. 找出State (只有變動的資料需要設成state)
4. 找出 State 應該在哪個component
    a. 找出所有有依據state資料行為的component。
    b. 找出共同擁有者
    c. 若無component有用到state，便建立一個新的用以保存state。
        並把它加到層級中共同擁有者之上的某處。
