React.js小書總結

(遷移自舊博客2017 08 27)javascript

<h1>第一階段</h1>前端

react的組件至關於MVC裏面的View。

react.js 將幫助咱們將界面分紅了各個獨立的小塊，每個塊就是組件，這些組件之間能夠組合、嵌套，就成了咱們的頁面。

react.js 不是一個框架，它只是一個庫。它只提供 UI （view）層面的解決方案。在實際的項目當中，它並不能解決咱們全部的問題，須要結合其它的庫，例如 Redux、React-router 等來協助提供完整的解決方法。

java

組件化能夠幫助咱們解決前端結構的複用性問題，整個頁面能夠由這樣的不一樣的組件組合、嵌套構成。

react-dom 負責把這個用來描述 UI 信息的 JavaScript 對象變成 DOM 元素，而且渲染到頁面上。

在 JavaScript 寫的標籤的」語法叫 JSX。JSX 是 JavaScript 語言的一種語法擴展，長得像 HTML，但並非 HTML。

JSX 其實就是 JavaScript 對象。JSX 在編譯的時候會變成相應的 JavaScript 對象描述。

ReactDOM.render(
  <Header />,
  document.getElementById('root')
)

ReactDOM.render 功能就是把組件渲染而且構造 DOM 樹，而後插入到頁面上某個特定的元素上（在這裏是 id 爲 root 的 div 元素）。react

render 方法必需要返回一個 JSX 元素，必需要用一個外層的 JSX 元素把全部內容包裹起來。返回並列多個 JSX 元素是不合法的。

直接在JSX中加入if語句會渲染出無效的javascript。

能夠這麼寫，當即執行函數： { ( ()=>{ if ( i = 0){ ... } } ) ( ) }

<div>
  <Title /> //Title組件
  <Title />
  <Title />
</div>

自定義的組件都必需要用大寫字母開頭，普通的 HTML 標籤都用小寫字母開頭。redux

on* 的事件監聽只能用在普通的 HTML 的標籤上，而不能用在組件標籤上。

通常在某個類的實例方法裏面的 this 指的是這個實例自己。

下面這兩種方法均可以綁定事件監聽：設計模式

class Dog extends Component {
  bark () {
    console.log('bark')
  }
  
  run () {
    console.log('run')
  }
  
  handleClick(){
    this.bark();
    this.run();
  }
  
  render () {
    return (<div onClick = {this.handleClick.bind(this)}>DOG</div>)
  }
}

注意return以後的代碼。架構

class Dog extends Component {
  bark () {
    console.log('bark')
  }
  
  run () {
    console.log('run')
  }
  
  handleClick(){
    this.bark();
    this.run();
  }
  
  render () {
    return (<div onClick = {()=>{this.handleClick()}}>DOG</div>)
  }
}

咱們要改變組件的狀態的時候，不能直接用 this.state = xxx 這種方式來修改，若是這樣作 React.js 就沒辦法知道你修改了組件的狀態，它也就沒有辦法更新頁面。因此，必定要使用 React.js 提供的 setState 方法，它接受一個對象或者函數做爲參數。app

...
  constructor (props) {
    super(props)
    this.state = {
      name: 'Tomy',
      isLiked: false
    }
  }

  handleClickOnLikeButton () {
    this.setState({
      isLiked: !this.state.isLiked
    })
  }
...

注：上述方法不會當即更新，不能夠作後續運算。 setState的第二種使用方式：框架

...
  handleClickOnLikeButton () {
    this.setState((prevState) => {
      return { count: 0 }
    })
    this.setState((prevState) => {
      return { count: prevState.count + 1 } // 上一個 setState 的返回是 count 爲 0，當前返回 1
    })
    this.setState((prevState) => {
      return { count: prevState.count + 2 } // 上一個 setState 的返回是 count 爲 1，當前返回 3
    })
    // 最後的結果是 this.state.count 爲 3
  }
...

在使用 React.js 的時候，並不須要擔憂屢次進行 setState 會帶來性能問題。dom

List item每一個組件均可以接受一個 props 參數，它是一個對象，包含了全部你對這個組件的配置。

默認配置 defaultProps。

props 一旦傳入進來就不能改變。

state 是讓組件控制本身的狀態，props 是讓外部對組件本身進行配置。

在 React.js 處理列表就是用 map 來處理、渲染的。

若是一個文件導出的是一個類，那麼這個文件名就用大寫開頭。四個組件類文件導出都是類，因此都是大寫字母開頭。

當某個狀態被多個組件依賴或者影響的時候，就把該狀態提高到這些組件的最近公共父組件中去管理，用 props 傳遞數據或者函數來管理這種依賴或着影響的行爲。

React.js 控制組件在頁面上掛載和刪除過程裏面幾個方法：

componentWillMount：組件掛載開始以前，也就是在組件調用 render 方法以前調用。

componentDidMount：組件掛載完成之後，也就是 DOM 元素已經插入頁面後調用。

componentWillUnmount：組件對應的 DOM 元素從頁面中刪除以前調用。

咱們能夠給任意表明 HTML 元素標籤加上 ref 從而獲取到它 DOM 元素而後調用 DOM API。可是記住一個原則：能不用 ref 就不用。

使用自定義組件的時候，能夠在其中嵌套 JSX 結構。嵌套的結構在組件內部均可以經過 props.children 獲取到，這種組件編寫方式在編寫容器類型的組件當中很是有用。而在實際的 React.js 項目當中，咱們幾乎天天都須要用這種方式來編寫組件。

在 React.js 中你須要把 CSS 屬性變成一個對象再傳給元素：

<h1 style={{fontSize: '12px', color: 'red'}}>React.js 小書</h1>

組件的私有方法都用 _ 開頭，全部事件監聽的方法都用 handle 開頭。把事件監聽方法傳給組件的時候，屬性名用 on 開頭。

組件的內容編寫順序以下：(對本身要求嚴格遵照)

static 開頭的類屬性，如 defaultProps、propTypes。
構造函數，constructor。
getter/setter（還不瞭解的同窗能夠暫時忽略）。
組件生命週期。
_ 開頭的私有方法。
事件監聽方法，handle*。
render開頭的方法，有時候 render() 方法裏面的內容會分開到不一樣函數裏面進行，這些函數都以 render 開頭。 render() 方法。

<h1>第三階段</h1> **高階組件**就是一個函數(而不是組件)，傳給它一個組件，它返回一個新的組件。新的組件使用傳入的組件做爲子組件。

const NewComponent = higherOrderComponent(OldComponent)

高階組件的做用是用於代碼複用，能夠把組件之間可複用的代碼、邏輯抽離到高階組件當中。新的組件和傳入的組件經過 props 傳遞信息。

一個組件能夠經過 getChildContext 方法返回一個對象，這個對象就是子樹的 context，提供 context 的組件必須提供 childContextTypes 做爲 context 的聲明和驗證。

若是一個組件設置了 context，那麼它的子組件均可以直接訪問到裏面的內容，它就像這個組件爲根的子樹的全局變量。任意深度的子組件均可以經過 contextTypes 來聲明你想要的 context 裏面的哪些狀態，而後能夠經過 this.context 訪問到那些狀態。

context 打破了組件和組件之間經過 props 傳遞數據的規範，極大地加強了組件之間的耦合性。並且，就如全局變量同樣，context 裏面的數據能被隨意接觸就能被隨意修改，每一個組件都可以改 context 裏面的內容會致使程序的運行不可預料。

可是這種機制對於前端應用狀態管理來講是頗有幫助的，由於畢竟不少狀態都會在組件之間進行共享，context 會給咱們帶來很大的方便。一些第三方的前端應用狀態管理的庫（例如 Redux）就是充分地利用了這種機制給咱們提供便利的狀態管理服務。但咱們通常不須要手動寫 context，也不要用它，只須要用好這些第三方的應用狀態管理庫就好了。

Redux是一種新型的前端「架構模式」。常常和 React.js 一併提出，你要用 React.js 基本都要伴隨着 Redux 和 React.js 結合的庫 React-redux。

Redux 和 React-redux 並非同一個東西。Redux 是一種架構模式（Flux 架構的一種變種），它不關注你到底用什麼庫，你能夠把它應用到 React 和 Vue，甚至跟 jQuery 結合都沒有問題。而 React-redux 就是把 Redux 這種架構模式和 React.js 結合起來的一個庫，就是 Redux 架構在 React.js 中的體現。

矛盾：react中不一樣模塊（組件）之間須要共享數據，可能有的模塊（組件）還須要修改這些數據。因此就有了「模塊（組件）之間須要共享數據」和「數據可能被任意修改致使不可意料的結果」之間的矛盾。因而咱們必須解決這個問題，react.js團隊的作法是提升數據修改的門檻：模塊（組件）之間的共享數據不能隨意修改，只能執行容許的某些修改，並且必須通知我。

function dispatch (action) {
 switch (action.type) {
  case 'UPDATE_TITLE_TEXT':
  appState.title.text = action.text
  break
  case 'UPDATE_TITLE_COLOR':
  appState.title.color = action.color
  break
  default:
  break
     }
  }

全部對數據的操做必須經過dispatch函數。

設計模式之觀察者模式：也被稱做發佈/訂閱模式，觀察者模式定義了一種一對多的依賴關係，讓多個觀察者對象同時監聽同一個主題對象。這個主題對象在狀態發生變化時，會通知全部的觀察者對象，使他們可以自動更新本身。