2017-1-5 天氣雨 React 學習筆記

官方example 中basic-click-counter

 1 <script type="text/babel">
 2       var Counter = React.createClass({
 3         getInitialState: function () {
 4           return { count: 0 };
 5         },
 6         handleClick1: function () {
 7           this.setState({
 8             count: this.state.count + 1,
 9           });
10         },
11         handleClick2: function () {
12           hand();
13         },
14         render: function () {
15           return (
16             <div>
17               <button onClick={this.handleClick1}>
18               {this.state.count}
19               </button>
20               <button onClick={this.handleClick2}>
21               {this.state.count}
22               </button>
23             </div>
24           );
25         }
26       });
27       var hand = function(){
28         alert("sd");
29       }
30       ReactDOM.render(
31         <Counter />,
32         document.getElementById('container')
33       );
34     </script>

View Code

 

其中：

getInitialState 設置初始狀態

設置點擊事件並不是必定用handleClick這個函數名，一樣的你能夠在建立組件時添加多個點擊執行函數，例如handleClick1，handleClick2

利用不一樣的方式綁定並觸發，指的一提的是在這個組件裏全部的數據都是雙向綁定的，若是你在響應事件中利用setState去改變組件中值，那麼

真個組件都會觸發相應值的刷新

這裏就體現了數據和頁面刷新的綁定效果，跟傳統須要手動刷新造成對比。

 

發現問題：且看Counter組件的render函數，咱們發現這裏使用的是JSX語法，那麼對於render函數而言，咱們不能動態的建立dom節點，打個比方

假若一個data數組中存在數據，咱們須要根據數組的長度建立一個列表，每一行顯示data[i]中的數據。若是在js中很容易利用字符串拼接而後添加到innerHtml

中便可，可是在JSX中目前來看，我是沒有看到(可是不排除存在)。

這裏須要說起下這種狀況的必要性，基本上利用ajax和後臺交互，而後將結果顯示在前端，這種狀況是必然出現的，因此若是你認爲不必瞭解這種狀況，要麼就是你尚未工做，

要麼就是，你是前端還停留在靜態網頁的層次

 

提出猜測方案：

這裏的動態建立在實際狀況下無非就是實際操做DOM，然而React設計初衷之一就是下降DOM操做帶來的性能損耗，因此若是須要動態建立，那麼很明顯須要的是動態建立虛擬節點，

而後再讓react框架自己去實際進行渲染。問題就到如何動態建立虛擬節點上來了，這一樣是個很是有意思的思考題，假若react能夠提供一個函數動態建立虛擬節點的函數，那麼你動

態建立虛擬節點後，這個虛擬節點一樣須要註冊到組件中，等到組件狀態刷新的時候，也要刷新你新增的這個節點，也就意味着建立虛擬節點的同時還須要綁定。在我看來這條路走下去

確實有些困難。

那麼若是咱們換個方向思考呢？

對於不少狀況下來講，假若咱們把全部的狀態都寫出來呢？仍是上面的問題把數組數據寫成表格，首先咱們是須要分頁的，那麼咱們不妨寫出一頁所有行，若是有數據相應的數據填充，

沒有就爲空，這樣子咱們很容易實現某一頁上的數據顯示，而後咱們只須要控制不一樣頁面上的數據載入便可，react並無新增任何dom節點(特指元素節點)，只須要切換不一樣的狀態便可

可是，

實際上上面所說的問題仍是沒有解決，那麼問題究竟是什麼限制了沒法動態建立dom節點呢？是react嗎，貌似這裏是jsx阻止了咱們，由於jsx自己是在編譯成js以後再去使用，

那麼意味着咱們很難在編譯以前的代碼中嵌入相應的部分從而在實際運行中動態編譯以後的render函數達到符合預期的結果。js自己是能夠達到這個效果的，可是jsx沒法達到。

那麼問題暫時掛起，待找到答案繼續，若是有朋友能夠解答這個問題，感激涕零