React的學習（上）

什麼是元件？答曰：功能獨立，封裝良好的**塊。前端頁面一直提倡元件化，因為元件化可以實現高重用，大大提公升了我們的開發效率，也讓我們的頁面結構變得更加清晰。所以react提倡將頁面解構成元件樹，以元件為最小單元構造頁面。

眾所周知，js的dom操作，是影響網頁效能的重要因素之一，因此react提出了虛擬dom的概念，元件並不是真實的 dom 節點，而是存在於記憶體之中的一種資料結構，叫做虛擬 dom （virtual dom）。只有當它插入文件以後，才會變成真實的 dom 。根據 react 的設計，所有的 dom 變動，都先在虛擬 dom 上發生，然後再將實際發生變動的部分，反映在真實 dom上，這種演算法叫做 dom diff ，它可以極大提高網頁的效能表現。

你需要react、react-dom、babel。

react-dom的作用就是將我們本地的虛擬dom插入文件，使其變成真實的dom。

我們在編寫虛擬dom時，可以使用jsx語法，它將js和xml語法結合在一起，如下

const user = ;
//你可以將你的js表示式放入{}中，如下
const element = (
);

同時react提倡使用es6語法，所以我們需要使用babel編譯我的jsx和es6語法

大家如果懶得搭建環境，可以在這裡練習。

官方提供兩種方法：

1）以js函式方法，這種方法適用於比較簡單的元件，比如根據輸入返回模板後，無state的變化

function welcome(props)

2）以 es6 class 的方式

class welcome extends react.component 
}

注意：元件名建議都以大寫字母開頭，以和html標籤區分

上面構建出來的都是虛擬dom，要使其在頁面顯示，還需要將其插入真實dom，這時就需要，也是必須要以下這步

reactdom.render(
,  document.getelementbyid('root')
);

reactdom.render()接受兩個引數，第乙個是要渲染的元件，第二個使所插入的地方

學習完上面方法，你就可以構建乙個靜態的元件了，但是，這時候就有個問題，我們元件間需要通訊，我們頁面需要互動，那怎麼實現呢?不急，我們接下來一一講解

1）props

元件的屬性值都儲存在props這個物件上，這是個可讀物件，我們可以給元件定義自定義屬性，呼叫元件時設定的屬性值，在元件內部可以通過this.props.yourprop拿到,例子如下

class welcome extends react.component 
}reactdom.render(
,  document.getelementbyid('root')
);//這裡的引號包含的嶸麼麼也可以是變數，這時候就不能用引號包含了，需要用{}包含

2）state

state是元件的私有變數，只有元件自己可以訪問，state的關鍵作用是：react只有當state改變時會重新渲染元件，因此，我們可以把元件看成個狀態機，當state改變時，我們的檢視也會改變。state的初始化，需要在constructor建構函式裡完成。

class welcome extends react.component 
}  //注意，如果用到建構函式，那麼應如此書寫constructor(props)
//props和super(props);是必須的，你的**應該放在super()之後
render() 
}

修改state時，則需要通過

this.setstate();
//setstate會將傳入的物件與原始state合併，而非覆蓋

這裡對state和props只講解了基礎使用，兩者的詳細區別與例項，可檢視我的另外一篇文章《react的元件間通訊》

事件是頁面互動的基礎，react元件中，事件監聽程式名採用駝峰法命名，如下：

class welcome extends react.component 
this.handleclick=this.handleclick.bind(this);
}  handleclick()
render() 
}reactdom.render(
,  document.getelementbyid('root')
);

上面的表示式this.handleclick=this.handleclick.bind(this);是必須的，因為handleclick()函式；裡用用到this指標，所以我們必須繫結this指標，如果你覺得很麻煩，官方還提供了其他兩種方法

//方法一
handleclick=>
//方法二
render() >點我
;  }

上面兩種方法都用到了箭頭函式，因為箭頭函式內部沒有定義自己的this，所以當在箭頭函式內部引用this時，this會繫結為父級的this，並且不能被改變。

阻止事件冒泡

react裡的ev是封裝過的ev物件，並不是原裝的，所以有些原裝的方法不行，比如事件冒泡，需要通過ev.nativeevent.stopimmediatepropagation()實現，分析如下：

1）react為了提高效率，把事件都委託給了document，所以 e.stoppropagation() 並非是不能阻止冒泡，而是等他阻止冒泡的時侯，事件已經傳遞給document了，沒東西可阻止了。

2）e.stoppropagation()不行，瀏覽器支援乙個好東西，e.stopimmediatepropagation() 他不光阻止冒泡，還能阻止在當前事件觸發元素上，觸發其它事件。這樣即使你都繫結到document上也阻止不了我了吧。

3）這樣做還不行，react對原生事件封裝，提供了很多好東西，但也省略了某些特性。e.stopimmediatepropagation() 就是被省略的部分，然而，他給了開口：e.nativeevent ，從原生的事件物件裡找到stopimmediatepropagation()，完活。

下節將講述react的元件生命週期、表單、ajax等

更多前端技術文章，歡迎前往我的個人技術部落格：嶸麼麼的個人部落格

React的學習（上）

指標的學習上）

2021 02 06機器學習（上）

整合學習（上） 3

React的學習（上）

指標的學習 上）

2021 02 06機器學習（上）

整合學習（上） 3

相關推薦

指標的學習上）