前言

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(屬性) 。
• 組件的生命周期:
  
• componentDidMount – 裝載組件后觸發
• componentWillUnmount – 在組件卸載之前觸發
• getDerivedStateFromProps – 當組件裝載時以及每當props 更改時觸發。 用于在其 props(屬性) 更改時更新組件的狀態
• 事件:
  
• onClick
• onSubmit
• 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

同vue的ref作用一樣，組件并不是真實的DOM節點，而是存在于內存之中的一種數據結構，叫做虛擬 DOM。

只有當它插入文檔以后，才會變成真實的 DOM 。根據 React 的設計，所有的 DOM 變動，都先在虛擬 DOM上發生，然后再將實際發生變動的部分，反映在真實 DOM上，這種算法叫做 DOM diff ，它可以極大提高網頁的性能表現。

但是，有時需要從組件獲取真實 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.valuereturn (<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!

總結

以上是生活随笔為你收集整理的Vue会了吗？来认识一下React吧(上)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。