一段人人都應該知道的從Vue到React的過渡史

時間 2019-11-09

標籤一段人人應該知道 vue react 過渡欄目 React 简体版

原文原文鏈接

寫在前面

之前寫Vue寫慣了，心血來潮，寫起了React。並根據Vue官網文檔的語法順序，寫了對應的React的語法，並附一個教程demo。javascript

項目使用框架版本主要有 react(15.4.1) + react-dom(15.4.1) + webpack(1.13.3) + axios(0.15.3) + node(6.2.2), 詳情具體可見下文的【環境配置】html

目前該項目有兩個分支, half-es6 + masterjava

half-es6和master實現的功能同樣, 實現了CURD + Axios + Othersnode

half-es6的寫法並無徹底使用es6的class的概念, master是完善了它react

環境配置

寫react就須要先配置webpack還有jsxwebpack

首先，新建一個項目，npm initios

而後在package中加入下面這些依賴git

"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"
  }複製代碼

有兩個比較重要的指令es6

"scripts": {
    "dev": "webpack-dev-server --progress --profile --hot",
    "build": "webpack --progress --profile --colors"
  },複製代碼

webpack.config

在webpack的配置中，我想要的目錄結構是橫向目錄(自創詞 •༝•，即全部index頁面要用到的東西，包括sass和js都寫在index目錄下,底下會有目錄示意圖)，目的是達到，我在src下編輯我想要的文件，打包後生成到public下去。
寫在配置最前面的是路徑的配置

var ROOT_PATH = path.resolve(__dirname);
var SRC_PATH = path.resolve(ROOT_PATH, 'src');
var PUBLIC_PATH = path.resolve(ROOT_PATH, '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 文本插值

{text}

2 html 插值

<div dangerouslySetInnerHTML={{__html: "balabalabalabala......."}} />

3 屬性賦值





4 帶js表達式的插值 xxx = {三元表達式}

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 狀態改變時

受限組件：

//es5
    render: 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} />; }複製代碼

不受限組件：

//es5
   render: 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 
        <input
          type="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裏定義state
            status: false, 
        }
    }, // 這裏必定寫逗號
    saveLiValue() { // 組件內要調用的function
        this.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)

這句話有點繞口，但必定要理解。

一、第一層意思是在父組件上加bind(this)

二、加的目的是防止子組件在調用方法的時候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組件中綁定this
                handleTxtChange={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>
    )
}複製代碼