React-router和React-router-dom的選擇

很多剛使用react的同學在接觸到react-router的時候就會很蛋疼,什麼react-router和react-router-dom?往往開始會比較懵逼。下面我們就來一探究竟。

React-router

React-router提供了一些router的核心api,包括Router, Route, Switch等,但是它沒有提供dom操作進行跳轉的api。

React-router-dom

React-router-dom提供了BrowserRouter, Route, Link等api,我們可以通過dom的事件控制路由。例如點擊一個按鈕進行跳轉,大多數情況下我們是這種情況,所以在開發過程中,我們更多是使用React-router-dom。安裝很簡單npm i react-router-dom --save,安裝了淘寶鏡像的就用cnpm吧。

React-router-dom的核心用法

HashRouter和BrowserRouter

它們兩個是路由的基本,就像蓋房子必須有地基一樣,我們需要將它們包裹在最外層,我們只要選擇其一就可以了。現在講它們的不同:

HashRouter

如果你使用過react-router2或3或者vue-router,你經常會發現一個現象就是url中會有個#,例如localhost:3000/#,HashRouter就會出現這種情況,它是通過hash值來對路由進行控制。如果你使用HashRouter,你的路由就會默認有這個#。

這就是HashRouter的使用情況。下面是對應的代碼。

ReactDOM.render(
    <HashRouter>
        <Router path="/" component={home}></Route>
    </HashRouter>
),document.getElementById('root'));

Comment

終極解決Javascript非同步

異步操作是JavaScript編程的麻煩事,麻煩到一直有人提出各種各樣的方案,試圖解決這個問題。

從最早的回調函數,到Promise對象,再到Generator函數,每次都有所改進,但又讓人覺得不徹底。它們都有額外的複雜性,都需要理解抽象的底層運行機制。

異步I / O不就是讀取一個文件嗎,幹嘛要搞得這麼複雜?異步編程的最高境界,就是根本不用關心它是不是異步。

async函數就是隧道盡頭的亮光,很多人認為它是異步操作的終極解決方案。

異步函數是什麼?

一句話,async函數就是Generator函數的語法糖。

前文有一個Generator函數,依次讀取兩個文件。

var fs = require('fs');

var readFile = function (fileName){
  return new Promise(function (resolve, reject){
    fs.readFile(fileName, function(error, data){
      if (error) reject(error);
      resolve(data);
    });
  });
};

var gen = function* (){
  var f1 = yield readFile('/etc/fstab');
  var f2 = yield readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};

Comment

callback()

回調函數是一個作為參數傳遞給另一個函數的函數,然後在外部函數中調用該函數來完成某種例程或動作。

callback()簡單的例子:

function greeting(name) {
  alert('Hello ' + name);
}

function processUserInput(callback) {
  var name = prompt('Please enter your name.');
  callback(name);
}

processUserInput(greeting);

上面的例子是一個同步回調,因為它立即執行。

Comment

filter函數特性:

遍歷每個元素,回傳 true 時,目前的值會保留在陣列內,這會回傳一個新陣列,而不是修改原本的陣列。

原理

當input輸入文字時觸發onChenge事件,event.target.value值存入this.state.search,再利用this.state.search使用filter()回圈過濾data內的資料。

Comment

使用update()函數經過AJAX方法更新表單。

var ajaxCallLiveSubs = function(){

    // endopoint
    var url = 'https://jsonplaceholder.typicode.com/posts/1';

    var interval = 5000;

    var time = 0;

    // Live Subs Charts
    var ctx_live = document.getElementById("myChart");

    var liveChart = new Chart(ctx_live, {
        type: 'line',
        data: {
            labels: [],
            datasets: [{
                data: [],
                borderWidth: 1,
                borderColor:'#00c0ef',
                label: 'liveCount',
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            legend: {
                display: false
            },
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true,
                    }
                }]
            }
        }
    });

    var doAjax = function() {

        $.ajax({
                    url: url,
                    success: function(){
                        var currentTime = ++time
                        var currentValue = Math.random()*1000;
                        liveChart.data.labels.push(currentTime);
                        liveChart.data.datasets[0].data.push(currentValue);

                        liveChart.update();

                    },
                    complete: function () {
                            // Schedule the next
                            setTimeout(doAjax, interval);
                    }
                });
    };

    doAjax();

};

ajaxCallLiveSubs();

Comment

Copyright © 2018 ucamc