Vue會了嗎？來認識一下React吧(上)

llzzzz發表於2018-07-19
VueReact

前言

React作為Facebook 內部開發 Instagram 的專案中，是一個用來構建使用者介面的優秀 JS 庫，於 2013 年 5 月開源。作為前端的三大框架之一，React的應用可以說是非常的廣泛，包括BAT在內的許多大公司很多專案都是基於其開發的。

Vue：除了VDom之外，Vue的響應效能和React相比還是有很大的區別，無論是本身的語法層面還是外圍的第三方支援軟體，總之，遷移起來不會是那麼容易的事情。

但是作為一名熱愛前端的技術人員,學習優秀的技術棧彷彿已經成了一種習慣,在這裡結合阮一峰React以及對阮一峰老師15年的教程進行版本更新,簡單介紹一下React的入門,本文中所有demo程式碼都以圖片形式展示,目的是建議手打嘗試，而不是直接複製，如需程式碼可以點選這裡。

使用 create-react-app 快速構建 React 開發環境

create-react-app 是來自於 Facebook，通過該命令我們無需配置就能快速構建 React 開發環境。

create-react-app 自動建立的專案是基於 Webpack + ES6 。

  • yarn add create-react-app -g
  • create-react-app projectName
  • cd projectName
  • yarn start

然後開啟瀏覽器輸入http://localhost:3000/,就可以看到React的六芒星LOGO了。
以下是React重要的部分

  • JSX – 允許我們編寫類似HTML的語法 轉換為lightweightJavaScript物件。
  • 虛擬DOM – 實際DOM的JavaScript表示。
  • React.Component – 您建立新元件的方式
  • render（方法） – 描述特定元件的 UI 外觀 。
  • ReactDOM.render – 將React元件渲染到DOM節點。
  • state – 元件的內部資料儲存（物件）。
  • constructor（this.state） – 建立元件初始 state(狀態) 的方式。
  • setState – 一種輔助方法，用於更新元件的 state(狀態) 並重新渲染 UI。
  • props – 從父元件傳遞給子元件的資料。
  • propTypes – 允許您控制傳遞給子元件的某些 props(屬性) 的存在或型別。
  • defaultProps – 允許您為元件設定預設 props(屬性) 。
  • 元件的生命週期:
    1. componentDidMount – 裝載元件後觸發
    2. componentWillUnmount – 在元件解除安裝之前觸發
    3. getDerivedStateFromProps – 當元件裝載時以及每當props 更改時觸發。 用於在其 props(屬性) 更改時更新元件的狀態
  • 事件:
    1. onClick
    2. onSubmit
    3. onChange

React的JSX語法

Vue會了嗎？來認識一下React吧(上)
HTML 語言直接寫在 JavaScript 語言之中，不加任何引號，這就是 JSX 的語法，它允許 HTML 與 JavaScript 的混寫

因為React沒有vue那樣的v-for一鍵迴圈，所以要自己手動用map來實現 效果圖:

Vue會了嗎？來認識一下React吧(上)

React元件巢狀元件以及資料傳遞子元件

Vue會了嗎？來認識一下React吧(上)
vue通過子元件中的props來傳遞資料,而React則是用this.props.attr來傳遞，注意，沒有$符號! 元件類的第一個字母必須大寫，否則會報錯，比如HelloMessage不能寫成helloMessage。另外，元件類只能包含一個頂層標籤，否則也會報錯。

JSX 允許直接在模板插入 JavaScript 變數。如果這個變數是一個陣列，則會展開這個陣列的所有成員.我們定義了一個arr,裡面是2個標題標籤,通過在ul模板中新增{arr}來實現效果**(注意不是vue的""，兩者不要搞混了)**

Vue會了嗎？來認識一下React吧(上)

this.props.children

this.props.attr是取到元件傳遞過來的資料或屬性，而this.props.children則表示元件的所有子節點,可以通過this.props.children.map來遍歷出來驗證。

Vue會了嗎？來認識一下React吧(上)
Vue會了嗎？來認識一下React吧(上)

React之PropTypes

元件的屬性可以接受任意值，字串、物件、函式等等都可以。有時，我們需要一種機制，驗證別人使用元件時，提供的引數是否符合要求。

元件類的PropTypes屬性，就是用來驗證元件例項的屬性是否符合要求

yarn add prop-types
import PropTypes from 'prop-types'

Vue會了嗎？來認識一下React吧(上)
MyTitle中有一個title屬性，他的值為一個字串，我們可以通過MyTitle.propTypes來定義該元件中屬性的型別.如果將title: PropTypes.string改為其他型別，就會報以下的錯誤。
Vue會了嗎？來認識一下React吧(上)

React之ref

  1. 同vue的ref作用一樣，元件並不是真實的DOM節點，而是存在於記憶體之中的一種資料結構，叫做虛擬 DOM。
  2. 只有當它插入文件以後，才會變成真實的 DOM 。根據 React 的設計，所有的 DOM 變動，都先在虛擬 DOM上發生，然後再將實際發生變動的部分，反映在真實 DOM上，這種演算法叫做 DOM diff ，它可以極大提高網頁的效能表現。
  3. 但是，有時需要從元件獲取真實 DOM 的節點，這時就要用到 ref 屬性。
    圖片放的太多了，在這裡貼一下程式碼..請忽視開頭說的話..
class App extends Component {
      handleClick () {
        this.refs.myTextInput.focus()
      }
      render() {
        return (
          <div className="App">
            <LikeButton/>
            <input type="text" ref="myTextInput"/>
            <input type="button" value="Focus the text input" onClick={ this.handleClick.bind(this) }/>
          </div>
        );
      }
    }
複製程式碼

在這裡需要強調的是，React的事件中如果不用剪頭函式，那就要用bind來繫結this。

React之this.state以及點選事件

React中的state就相當於vue裡的data資料儲存,而小程式的this.setData,大家懂的..

class LikeButton extends Component {
  state = {
    liked: false
  }
  handleClick () {
    // console.log(this)
    this.setState({
      liked: !this.state.liked
    })
  }
  render() {
    const text = this.state.liked?'liked':'don\'t like'
    return (
      <p onClick={ () => this.handleClick() }>
        You { text } this.click to toggle
      </p>
    )
  }
}
複製程式碼

在這裡定義一個text變數，通過state中的liked來判斷text的值，然後再通過onClick點選事件來反覆改變liked的值，效果可以自己通過程式碼實現看看，就是普通的MVVM模型。

React之實現雙向資料繫結

vue裡面v-model一鍵實現的事情React又沒有-0-，不過我們可以通過onChange事件來簡單實現它，直接上程式碼.

class App extends Component {
  state= {
    value: 'Hello!'
  }
  handleChange (event) {
    this.setState({
      value: event.target.value
    })  }
  render() {
    const val = this.state.value
    return (
      <div className="App">
        <div>
          <input type="text" value={val} onChange={this.handleChange.bind(this)}/>
          <p>{ val }</p>
        </div>
      </div>
    );
  }
}
複製程式碼

React之元件生命週期

元件的生命週期分成三個狀態：

  • Mounting：已插入真實 DOM
  • Updating：正在被重新渲染
  • Unmounting：已移出真實 DOM

React 為每個狀態都提供了兩種處理函式，will 函式在進入狀態之前呼叫，did 函式在進入狀態之後呼叫，三種狀態共計五種處理函式。

  • componentWillMount(): 在插入真實DOM之前呼叫
  • componentDidMount(): 在插入真實DOM之後呼叫
  • componentWillUpdate(object nextProps,object nextState): 在被重新渲染之前呼叫
  • componentDidUpdate(object prevProps, object prevState): 在被重新渲染之後呼叫
  • componentWillUnmount(): 在移除真實DOM之前呼叫

此外，React 還提供兩種特殊狀態的處理函式。

  • componentWillReceiveProps(object nextProps)：已載入元件收到新的引數時呼叫
  • shouldComponentUpdate(object nextProps, object nextState)：元件判斷是否重新渲染時呼叫

另外，元件的style屬性的設定方式也值得注意，不能寫成style="opacity:{this.state.opacity};"而要寫成style={{opacity: this.state.opacity}}

結語

作為一個前端程式猿很不容易，前端的技術更新太快，也出現了“別更新了，老子學不動了”這類前端的梗。不過前端層出不窮的技術讓我們看到了前端的未來，我們都是熱於分享的人，希望正在學習的我也能夠幫助到正在學習的你。 這些demo都在我的github，感興趣的朋友可以clone下來看下，最近搭了一個個人blog，歡迎來踩，PC端主題一股科幻風有沒有！！主題來自於hexo主題 最後說一句！很重要！如果我的這篇文章幫助到了你，那你可以點個star再走嘛~一起upupup!

相關文章