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(屬性) 。
- 組件的生命周期:
- 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'
React之ref
圖片放的太多了，在這里貼一下代碼..請忽視開頭說的話..
在這里需要強調的是，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吧(上)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： git 忽略文件失效
- 下一篇： 使用centos7构建本地git服务器