一段人人都应该知道的从Vue到React的过渡史
寫在前面
以前寫Vue寫慣了，心血來潮，寫起了react。并根據Vue官網文檔的語法順序，寫了對應的React的語法，并附一個教程demo。
教程的github地址：Close2React
項目使用框架版本主要有 react(15.4.1) + react-dom(15.4.1) + webpack(1.13.3) + axios(0.15.3) + node(6.2.2), 詳情具體可見下文的【環境配置】
目前該項目有兩個分支, half-es6 + master
half-es6和master實現的功能一樣, 實現了CURD + Axios + Others
half-es6的寫法并沒有完全使用es6的class的概念, master是完善了它
環境配置
寫react就需要先配置webpack還有jsx
首先，新建一個項目，npm init
然后在package中加入下面這些依賴
"dependencies": {"react": "^15.4.1","react-dom": "^15.4.1",},"devDependencies": {"axios": "^0.15.3","babel-core": "^6.18.2","babel-loader": "^6.2.8","babel-preset-es2015": "^6.18.0","babel-preset-react": "^6.16.0","babel-preset-react-hmre": "^1.1.1","bootstrap": "^4.0.0-alpha.2","css-loader": "^0.26.1","file-loader": "^0.9.0","html-webpack-plugin": "^2.24.1","node-sass": "^3.13.0","open-browser-webpack-plugin": "0.0.3","sass-loader": "^4.0.2","style-loader": "^0.13.1","url-loader": "^0.5.7","webpack": "^1.13.3","webpack-dev-server": "^1.16.2"}有兩個比較重要的指令
"scripts": {"dev": "webpack-dev-server --progress --profile --hot","build": "webpack --progress --profile --colors"},webpack.config
在webpack的配置中，我想要的目錄結構是橫向目錄(自創詞 ???，即所有index頁面要用到的東西，包括sass和js都寫在index目錄下,底下會有目錄示意圖)，目的是達到，我在src下編輯我想要的文件，打包后生成到public下去。
寫在配置最前面的是路徑的配置
配合著入口文件和輸出文件的配置
entry: {index: path.resolve(SRC_PATH, 'index/index.js'), }, output: {path: PUBLIC_PATH,filename: '[name].bundle.js', },主要的插件就是這個html生成的插件和自動打開瀏覽器的插件，還有babel的配置，不管三七二十一都把他們的等級開到最大
plugins: [new HtmlwebpackPlugin({title: 'My first react-webpack'}),new OpenBrowserPlugin({url: 'http://localhost:8200'}) ], babel: { //配置babel"presets": ["es2015",'stage-0', 'react'], },npm run dev，會自動打開localhost:8200,就可以在瀏覽器上看到初始化的頁面
jsx
當你開始要寫js的時候發現，怎么這么多警告，
不用擔心 google 一下都能解決。
在這里下載react 和 react-native：
并勾選對應項，保存：
警告會少很多，但是還是有一些警告，怎么辦呢
點擊這個小燈泡，然后選擇configure
把這兩項勾選掉，保存，就一片清凈了。
項目描述
Public是打包后生成的目錄，src是寫目錄
src采用橫向目錄結構(自創詞 ???)，即所有index頁面要用到的東西，包括sass和js都寫在index目錄下。
指令運行項目
npm i
npm run build 生成打包后的文件
npm run dev
數據綁定
1 文本插值
<span>{text}\</span>2 html 插值
<div dangerouslySetInnerHTML={{__html: "\<p>balabalabalabala.......\</p>"}} />3 屬性賦值
<span id = {this.props.idName}>\</span><span className = "nav-box">\</span>4 帶js表達式的插值 xxx = {三元表達式}
<span className={this.props.idx == this.props.choice? "tab on" : "tab"} >\</span>5 事件綁定
事件綁定和屬性綁定一樣
// 如果沒有使用class繼承的寫法的話 getInitialState() {return {tabTxt: ['CURD', 'Axios', 'Others'],choice: 0,} },switchChoice(idx){this.setState({choice: idx})},renderTabInit(text, idx) {return (<Tab key={idx} idx={idx}choose={this.switchChoice} // 綁定了switchChoice方法choice={this.state.choice} // 數據data的綁定，this.state可以獲取到整個state >{text}</Tab>) },有可能會遇到一些BOOM爆炸的bug，請看react父子組件間的事件綁定
css和style的綁定
1 className
className={this.props.idx == this.props.choice? "tab on" : "tab"}2 style
第一個括號是插值，第二個括號表示style對象style={{color: '#FEC264', fontSize: '40px'}}列表渲染 & 條件渲染
在getInitalState中定義了一個數組tabTxt
getInitialState() {return {tabTxt: ['CURD', 'Axios', 'Others'],choice: 0,}},循環渲染這個子組件，每個子組件有自己的唯一的key，作用和track-by（或v-bind:key）的作用類似
renderTabInit(text, idx) {return (<Tab key={idx} idx={idx}choose={this.switchChoice}choice={this.state.choice}>{text}</Tab>)},列表渲染的v-for 在react中使用map
v-if 的條件渲染可用三元，如復雜判斷則需要在return前寫邏輯代碼
render() {let currentPage = null;if(this.state.choice == 0) {currentPage = <PageA />} else if (this.state.choice == 1){currentPage = <PageB />} else {currentPage = <PageC />}return (<div id="content"><div id="navBox">{this.state.tabTxt.map(this.renderTabInit)}</div><div id="pageBox">{currentPage}</div></div>) }表單控件
表單組件有幾個受用戶影響的屬性：
value，用于input、textarea組件
checked， 用于類型為 checkbox 或者 radio 的 input 組件
selected，用于option組件
每個表單控件都有一個onChange事件用來監聽組件的變化:
當 input 或 textarea 的value 發生變化時
input 的 checked 狀態改變時
option 的 selected 狀態改變時
受限組件
//es5render: function() {return <input type="text" value="Hello!" />;}// 在渲染出來的元素里輸入任何值都不起作用，因為 React 已經賦值為 Hello!如果要讓用戶修改的值有用，則需要：
getInitialState() {return {value: 'Hello!'};},handleChange(event) {this.setState({value: event.target.value});},render() {let value = this.state.value;return <input type="text" value={value} onChange={this.handleChange} />;}不受限組件
//es5render: function() {return (<div><input type="radio" name="opt" defaultChecked /> Option 1<input type="radio" name="opt" /> Option 2<select defaultValue="C"><option value="A">Apple</option><option value="B">Banana</option><option value="C">Cranberry</option></select></div>);} // 用戶輸入將立即反應到元素上。// 和受限元素一樣，使用 onChange 事件可以監聽值的變化。// default 有一個初始值，但這個值用戶可以改變并會反應到界面上。父子組件通信
// 父組件，相當于最大的組件 // 子組件是一個tab，和三個page，切換tab 就能切換 page const Content = React.createClass({getInitialState() {return {tabTxt: ['CURD', 'Axios', 'Others'],choice: 0, // 當前選中的tab下標}},switchChoice(idx){this.setState({ // 修改state choice: idx})},renderTabInit(text, idx) {return (<Tab key={idx} idx={idx}choice={this.state.choice} // key\idx\choice 分別都是作為props傳入tab子組件的參數名choose={this.switchChoice} // choose 作為props作為傳入tab子組件的方法名>{text}</Tab>)},render() {let currentPage = null;if(this.state.choice == 0) { // 條件判斷currentPage = <PageA />} else if (this.state.choice == 1){currentPage = <PageB />} else {currentPage = <PageC />}return (<div id="content"><div id="navBox">{this.state.tabTxt.map(this.renderTabInit)} //循環輸出</div><div id="pageBox">{currentPage}</div></div>)} });在使用事件綁定choose={this.switchChoice} 的時候，因為沒有采用class的學法所以不用bind
class的寫法的時候需要bind: choose={this.switchChoice.bind(this)}
不用class的寫法的時候不綁定不會導致子組件的this指向錯誤，如果綁定了還會報錯（如綁定this會有警告）
使用了class的寫法的時候則需要手動bind, 這個在文章最后會詳細解說
// tab 子組件 const Tab = React.createClass({chooseTab() {this.props.choose(this.props.idx); //一定要將父組件的方法在子組件中做一個中轉},render(){return (<span className={this.props.idx == this.props.choice? "tab on" : "tab"}style={{color: '#FEC264', fontSize: '40px'}}data-idx={this.props.idx}onClick={this.chooseTab} // 調用子組件的方法>{this.props.children}</span>)} });獲取dom元素
當你的組件還沒有掛載在容器上，可以用this.refs訪問
已經掛載完畢，通過react-dom提供findDOMNode方法拿到組件對應的dom
另外：
如果ref是設置在原生HTML元素上，它拿到的就是DOM元素;
如果設置在自定義組件上，它拿到的就是組件實例，這時候就需要通過 findDOMNode來拿到組件的DOM元素。
//es5 var MyComponent = React.createClass({handleClick: function() {this.refs.myTextInput.getDOMNode().focus(); // 通過this.refs.xxxxx拿到元素},render: function() {return (<div><input type="text" ref="myTextInput" /> // 給輸入框命名ref <inputtype="button"value="Focus the text input"onClick={this.handleClick}/></div>);} });幾個常用api
componentDidMount
componentWillReceiveProps(nextProps)
花一分鐘，改成正統的class寫法
第一步，把所有createClass 換成 class xxx extends Component。
我們用一半的es6的姿勢寫出來的代碼如下：
// half-es6 import React from 'react'; const List = React.createClass({ // 用createdClass創建一個組件getInitialState() { // 初始化數據state return { // 在函數的return里定義statestatus: false, }}, // 這里一定寫逗號saveLiValue() { // 組件內要調用的functionthis.setState({status: false})},.... })我們用完整的es6的姿勢寫出來的代碼如下：
// master // 利用class姿勢的es6 import React, {Component} from 'react'; class List extends Component{constructor(props){super(props);this.state = { status: false, }} // 沒有逗號saveLiValue() {this.setState({status: false})}.... }第二步，在父組件中，給所有需要傳遞給子組件的方法加bind(this)。
這句話有點繞口，但一定要理解。
1、第一層意思是在父組件上加bind(this)
2、加的目的是防止子組件在調用方法的時候this指向錯誤
例如下面這個初始化列表的函數
// half-es6 // 如果在這種寫法下bind(this)，編譯后的頁面會報警告 // 大概是說react已經提供了豐富的方法可以避免指向錯誤，不需要手動bind initListLi(val, idx) {return (<List {...val} key={idx} index={idx}handleTxtChange={this.handleTxtChange}handleCheckChange={this.handleCheckChange}deleteItem={this.deleteItem}/>) },render() {return (<article className="page"><h3 className="h3">List總條數: {this.state.list.length}</h3><h3 className="h3">目前完成條數: {this.state.didCount}</h3><ul className="ul">{this.state.list.map(this.initListLi)}</ul><Add addLiItem={this.addLiItem}/></article>) }但是使用了class的寫法之后，就可能會出現警告說 props 是null
這個時候就需要手動bind(this)
// master // es6的class寫法下的函數的事件綁定， // 如果子組件會需要調用函數，則在父組件中手動向子組件中bind(this) initListLi(val, idx) {return (<List {...val} key={idx} index={idx}// 以下三個方法都是在向List組件中綁定thishandleTxtChange={this.handleTxtChange.bind(this)} handleCheckChange={this.handleCheckChange.bind(this)}deleteItem={this.deleteItem.bind(this)}/>) }render() {return (<article className="page"><h3 className="h3">List總條數: {this.state.list.length}</h3><h3 className="h3">目前完成條數: {this.state.didCount}</h3><ul className="ul">{this.state.list.map(this.initListLi.bind(this)) //子組件中會需要調用函數}</ul><Add addLiItem={this.addLiItem.bind(this)}/></article>) }寫在后面
github地址：Close2React
我是嘉寶Appian，一個賣萌出家的算法妹紙。
總結
以上是生活随笔為你收集整理的一段人人都应该知道的从Vue到React的过渡史的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： EF错误记录
- 下一篇： vue2.0 组件通信