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

前言

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語法

HTML 語言直接寫在 JavaScript 語言之中，不加任何引號，這就是 JSX 的語法，它容許 HTML 與 JavaScript 的混寫

由於React沒有vue那樣的v-for一鍵循環，因此要本身手動用map來實現 效果圖:

---

React組件嵌套組件以及數據傳遞子組件

vue經過子組件中的props來傳遞數據,而React則是用this.props.attr來傳遞， 注意，沒有$符號! 組件類的第一個字母必須大寫，不然會報錯，好比HelloMessage不能寫成helloMessage。另外，組件類只能包含一個頂層標籤，不然也會報錯。

JSX 容許直接在模板插入 JavaScript 變量。若是這個變量是一個數組，則會展開這個數組的全部成員.咱們定義了一個arr,裏面是2個標題標籤,經過在ul模板中添加{arr}來實現效果**(注意不是vue的""，二者不要搞混了)**

---

this.props.children

this.props.attr是取到組件傳遞過來的數據或屬性，而this.props.children則表示組件的全部子節點,能夠經過this.props.children.map來遍歷出來驗證。

---

React之PropTypes

組件的屬性能夠接受任意值，字符串、對象、函數等等均可以。有時，咱們須要一種機制，驗證別人使用組件時，提供的參數是否符合要求。

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

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

MyTitle中有一個title屬性，他的值爲一個字符串，咱們能夠經過MyTitle.propTypes來定義該組件中屬性的類型.若是將title: PropTypes.string改成其餘類型，就會報如下的錯誤。

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!