摘要：的作用是獲取用戶輸入的數(shù)據(jù)，當(dāng)輸入框的值發(fā)生改變時(shí)，對應(yīng)的事件響應(yīng)會被調(diào)用也就是函數(shù)，其對進(jìn)行了設(shè)置，并內(nèi)部有回調(diào)函數(shù)告訴父級組件有屬性發(fā)生變化。于是我們就在這個(gè)函數(shù)中調(diào)用進(jìn)制轉(zhuǎn)換的函數(shù)并把結(jié)果呈現(xiàn)出來，這樣就實(shí)現(xiàn)了數(shù)據(jù)的傳遞功能了。

WebPack是模塊打包機(jī)：分析項(xiàng)目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語言（Scss，TypeScript等），并將其打包為合適的格式以供瀏覽器使用。

1.安裝:

(1)全局安裝:

    
    npm install -g webpack

(2)安裝到項(xiàng)目中:

    
    npm install --save-dev webpack

2.配置使用:

(1)項(xiàng)目的目錄結(jié)構(gòu):

(2)目錄解析:

在項(xiàng)目目錄中創(chuàng)建兩個(gè)文件夾，一個(gè)是app,另一個(gè)是public.接著再創(chuàng)建一個(gè)文件index.html放置在public中。public用于放置頁面的入口文件，app用來放置js文件。

(3)WebPack的配置文件(webpack.config.js):

    module.exports = {
        entry:  __dirname + "/app/main.js",//唯一入口文件
        output: {
            path: __dirname + "/public",//打包后文件bundle.js存放的地方
            filename: "bundle.js"http://打包后輸出文件的文件名
        }
    }

3.生成Source Maps（使調(diào)試更容易）

(1)Source Maps是Webpack在打包時(shí)可以為我們生成的source maps，為我們提供了一種對應(yīng)編譯 文件和源文件的方法，使得編譯后的代碼可讀性更高，也更容易調(diào)試。在webpack的配置文件中配置 source maps，需要配置devtool

(2)devetool配置選項(xiàng)優(yōu)缺點(diǎn)

*上述選項(xiàng)由上到下打包速度越來越快，不過同時(shí)也具有越來越多的負(fù)面作用，較快的構(gòu)建速度的后果        就是對打包后的文件的的執(zhí)行有一定影響。*

(3)WebPack的配置文件(webpack.config.js):

    module.exports = {
        devetool:"eval-source-map",//配置Source Maps選項(xiàng),選擇合適的選項(xiàng)
        entry:  __dirname + "/app/main.js",//唯一入口文件
        output: {
            path: __dirname + "/public",//打包后文件bundle.js存放的地方
            filename: "bundle.js"http://打包后輸出文件的文件名
        }
    }

1.安裝:

    
    npm install --save-dev webpack-dev-server

2.WebPack的配置文件(webpack.config.js)

    module.exports = {
        devetool:"eval-source-map",//配置Source Maps選項(xiàng),選擇合適的選項(xiàng)
        entry:  __dirname + "/app/main.js",//唯一入口文件
        output: {
            path: __dirname + "/public",//打包后文件bundle.js存放的地方
            filename: "bundle.js"http://打包后輸出文件的文件名
        }

        devServer: {
            port: 8080,//設(shè)置服務(wù)器監(jiān)聽的端口，默認(rèn)是8080
        contentBase: "./public",//本地服務(wù)器所加載的頁面所在的目錄
        colors: true,//終端中輸出結(jié)果是否為彩色
        historyApiFallback: true,//是否使用不跳轉(zhuǎn)，一般是在開發(fā)單頁面應(yīng)用比較有優(yōu)勢
        inline: true//是否開啟實(shí)時(shí)刷新
      }
    }

1.安裝:

    npm install --save-dev json-loader

2.配置文件(webpack.config.js):

    module.exports = {
        devtool: "eval-source-map",
        entry:  __dirname + "/app/main.js",
            path: __dirname + "/public",
        filename: "bundle.js"
        },

        module: {//在配置文件里添加JSON loader
        loaders: [
                {
            test: /.json$/,//匹配.json類型的文件
            loader: "json"
                }
        ]
        },
      
        devServer: {
        contentBase: "./public",
        colors: true,
        historyApiFallback: true,
        inline: true
        }
    }

*這樣一來，就可以通過在js文件代碼中引入json格式的文件。*

    import config from "./config.json"
    console.log(config.text);

1.安裝:

    //一次性安裝多個(gè)模塊
    npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
    npm install --save react react-dom 

2.簡介Babel:

*個(gè)人用途是用來解析Es6的語法格式還有JSX的語法，轉(zhuǎn)換后使得瀏覽器能夠使用*

3.配置文件(webpack.config.js):

test: 一個(gè)匹配loaders所處理的文件的拓展名的正則表達(dá)式(required)
loader: loader的名稱(required)
include/exclude: 手動(dòng)添加必須處理的文件(文件夾)或屏蔽不需要處理的文件(文件夾)(optional)
query: 為loaders提供額外的設(shè)置選項(xiàng)(optional)

    module.exports = {
        devtool: "eval-source-map",
        entry:  __dirname + "/app/main.js",
            path: __dirname + "/public",
        filename: "bundle.js"
        },

        module: {//在配置文件里添加JSON loader
        loaders: [
                {
            test: /.json$/,//匹配.json類型的文件
            loader: "json"
                },
                {
            test: /.js$/,//匹配.js文件
            exclude: /node_modules/,//排除哪個(gè)文件不加載
            loader: "babel",//在webpack的module部分的loaders里進(jìn)行配置即可
            query: {
              presets: ["es2015","react"]
            }
                }
        ]
        },
      
        devServer: {
        contentBase: "./public",
        colors: true,
        historyApiFallback: true,
        inline: true
        }
    }

搭建好React的工具平臺之后我們就可以實(shí)現(xiàn)工具的制作了^_^

HTML節(jié)目十分簡單，里面就只有一個(gè)div容器，還有一個(gè)使用bootstrap用來裝飾的導(dǎo)航欄，如此而已。讓我們看一下代碼吧！

index.html:

1.定義兩個(gè)React子組件(InputNumber.js,OutputNumber.js)，用來后面的視圖調(diào)用

先給出代碼吧！

(1) InputNumber.js:

import React, { Component } from "react"
import {
  Grid,
  Row,
  Col,
  FormControl,
  ControlLabel,
  FormGroup,
  Radio,
  InputGroup,
} from "react-bootstrap"

class InputNumber extends React.Component {
  constructor(props) {
    super(props);
    var checkedList = [false, false, false];
    checkedList[this.props.checked] = true;
    this.state = {
      checkedList: checkedList,
      number: this.props.number
    }
  }
  selectHandleChange(event) {
    var checkedList = [false, false, false];
    checkedList[event.target.value] = true;
    this.setState({
      checkedList: checkedList
    });
    this.props.callbackCheckedChange(event.target.value);
  }
  textHandleChange(event) {
    this.setState({
      number: event.target.value
    });
    this.props.callbackNumberChange(event.target.value);
  }
  render() {
    return (
      
        
          二進(jìn)制
          十進(jìn)制
          十六進(jìn)制
        
        
          
            請輸入：
            
          
        
      
    );
  }
}

export default InputNumber;

在上面的代碼中需要關(guān)注的地方有:

該組件是用于用戶輸入數(shù)值后傳遞數(shù)值的類型和大小到父級組件中，所以其內(nèi)部需要有兩個(gè)屬性，checkedList和number。checkedList用來標(biāo)識當(dāng)前哪個(gè)radio選項(xiàng)框被選中，并當(dāng)點(diǎn)擊事件發(fā)生時(shí)，把value的值進(jìn)行動(dòng)態(tài)設(shè)置，主要是用到了React的組件狀態(tài)機(jī)，通過setState函數(shù)對checkedList進(jìn)行修改。number的作用是獲取用戶輸入的數(shù)據(jù)，當(dāng)輸入框的值發(fā)生改變時(shí)，對應(yīng)的事件響應(yīng)會被調(diào)用也就是textHandleChange函數(shù)，其對number進(jìn)行了設(shè)置，并內(nèi)部有回調(diào)函數(shù):this.props.callbackCheckedChange(event.target.value)告訴父級組件有屬性發(fā)生變化。這樣就使得當(dāng)前組件的狀態(tài)改變時(shí)，父級的組件也會對應(yīng)調(diào)用方法進(jìn)行事件處理。

(2) OutputNumber.js:

import React, { Component } from "react"
import {
  Grid,
  Row,
  Col,
  FormControl,
  ControlLabel,
  FormGroup,
  InputGroup,
} from "react-bootstrap"

class OutputNumber extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      binaryRes: "",
      decimal: "",
      hexadecimal: "",
      mapBase:[2,10,16]
    }
  }
  changeToDec(numbers, base) {
    var sum = 0;
    var length = numbers.length
    for (let i = 0; i < length; i++) {
      let number = parseInt(numbers[i]);
      sum += Math.pow(base, length - i - 1) * number;
    }
    return sum.toString();
  }
  //十進(jìn)制轉(zhuǎn)換其他進(jìn)制
  decChange(numbers, base) {
    var num = parseInt(numbers);
    var str = "";
    var k = parseInt(num);
    var m = num % base;
    while (k >= base) {
      if(m > 9)
        str = String.fromCharCode(0x40 + (m - 9)) + str;
      else
        str = m.toString() + str;
      k = parseInt(k / base);
      m = k % base;
    }
    if(m > 9)
      str = String.fromCharCode(0x40 + (m - 9)) + str;
    else
      str = m.toString() + str;
    return str;
  }
  componentWillReceiveProps(nextProps) {
    var base = this.state.mapBase[nextProps.checked];
    var numberDec = this.changeToDec(nextProps.number,base);
    this.setState({
      binaryRes:this.decChange(numberDec,2),
      decimal:this.decChange(numberDec,10),
      hexadecimal:this.decChange(numberDec,16)
    });
  }
  render() {
    return (
      
        
          
            二進(jìn)制：
            
          
          
            十進(jìn)制：
            
          
          
            十六制：
            
          
        
      
    )
  }
}


export default OutputNumber;

這個(gè)組件是用來對用戶輸入的類型數(shù)據(jù)進(jìn)行進(jìn)制轉(zhuǎn)換并呈現(xiàn)結(jié)果，所以需要binaryRes,decimal,hexadecimal這三個(gè)屬性來呈現(xiàn)不同類型進(jìn)制的結(jié)果，通過changeToDec和decChange這兩個(gè)函數(shù)對數(shù)值進(jìn)行轉(zhuǎn)換得到結(jié)果?？墒?，我們要在什么時(shí)候調(diào)用這兩個(gè)函數(shù)進(jìn)行進(jìn)制轉(zhuǎn)換呢?這時(shí)就需要使用componentWillReceiveProps(nextProps)函數(shù)，當(dāng)父級組件傳遞進(jìn)來的元素發(fā)生改變時(shí)，這個(gè)方法會被調(diào)用。于是我們就在這個(gè)函數(shù)中調(diào)用進(jìn)制轉(zhuǎn)換的函數(shù)并把結(jié)果呈現(xiàn)出來，這樣就實(shí)現(xiàn)了數(shù)據(jù)的傳遞功能了。

2.定義一個(gè)React父級組件用來封裝兩個(gè)子組件(MainView.js)，用來給入口文件調(diào)用

代碼實(shí)現(xiàn)

MainView.js:

import React from "react";
import InputNumber from "./InputNumber"
import OutputNumber from "./OutputNumber"


class MainView extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: 0,
      number: ""
    }
  }
  onCheckedChange(newChecked) {
    this.setState({
      checked: newChecked,
    });
  }
  onNumberChange(newNumber) {
    this.setState({
      number: newNumber
    });
  }
  render() {
    return (
      

        
        
      
    );
  }
}

export default MainView;

這個(gè)組件是父級組件，封裝了前面的兩個(gè)組件，并把其內(nèi)部的屬性統(tǒng)一傳遞給兩個(gè)子組件，使得數(shù)據(jù)進(jìn)行了單向的綁定。

3.定義一個(gè)入口文件main.js用來向頁面渲染React組件

代碼實(shí)現(xiàn)

main.js:

import React from "react";
import {render} from "react-dom";

import MainView from "./MainView"

var checked = 0;

render(,document.getElementById("root"));    

這代碼不同多說，就是渲染主視圖到虛擬DOM的樹結(jié)構(gòu)中。

一開始看來React的基本用法但是沒有經(jīng)過實(shí)際的操作會以為React很簡單，但是當(dāng)你動(dòng)手打出代碼的時(shí)候，你會發(fā)現(xiàn)很多的問題。這時(shí)候就需要我們一步一步地去查資料探索，找到解決的方案并實(shí)現(xiàn)。所以我寫這篇文章的目的是為了讓更多React初學(xué)者能夠參考并把React學(xué)得透徹，我對React也是剛開始入門，還不是很熟練，希望做出更多的東西，寫出更多的總結(jié)不斷提升自己的編程能力，哈哈哈，感謝閱讀此文。
最后附上程序github的倉庫鏈接程序github的倉庫鏈接