react學習筆記

時間 2019-11-17

標籤 react 學習筆記欄目 React 简体版

原文原文鏈接

1.React 能夠在瀏覽器運行，也能夠在服務器運行javascript

2.React 的語法是一致的，服務器的用法與瀏覽器差異不大。html

3.React 獨有的 JSX 語法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel" java

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      // ** Our code goes here! **
    </script>
  </body>
</html>

4.ReactDOM.render 是 React 的最基本方法，用於將模板轉爲 HTML 語言，並插入指定的 DOM 節點react

5.JSX 的基本語法規則：遇到 HTML 標籤（以 < 開頭），就用 HTML 規則解析；遇到代碼塊（以 { 開頭），就用 JavaScript 規則解析。git

JSX 容許直接在模板插入 JavaScript 變量。若是這個變量是一個數組，則會展開這個數組的全部成員github

6.React 容許將代碼封裝成組件（component），而後像插入普通 HTML 標籤同樣，在網頁中插入這個組件。React.createClass 方法就用於生成一個組件類面試

全部組件類都必須有本身的 render 方法，用於輸出組件。算法

注意，組件類的第一個字母必須大寫，不然會報錯，好比HelloMessage不能寫成helloMessage。另外，組件類只能包含一個頂層標籤，不然也會報錯。api

添加組件屬性，有一個地方須要注意，就是 class 屬性須要寫成 className ，for 屬性須要寫成 htmlFor ，這是由於 class 和 for 是 JavaScript 的保留字。數組

7.this.props.children

這裏須要注意， this.props.children 的值有三種可能：若是當前組件沒有子節點，它就是 undefined ;若是有一個子節點，數據類型是 object ；若是有多個子節點，數據類型就是 array 。因此，處理 this.props.children 的時候要當心。

React 提供一個工具方法 React.Children 來處理 this.props.children 。咱們能夠用 React.Children.map 來遍歷子節點，而不用擔憂 this.props.children 的數據類型是 undefined 仍是 object。

8.PropTypes

組件的屬性能夠接受任意值，字符串、對象、函數等等均可以。有時，咱們須要一種機制，驗證別人使用組件時，提供的參數是否符合要求

getDefaultProps 方法能夠用來設置組件屬性的默認值。

9.獲取真實的DOM節點

組件並非真實的 DOM 節點，而是存在於內存之中的一種數據結構，叫作虛擬 DOM （virtual DOM）。只有當它插入文檔之後，纔會變成真實的 DOM 。根據 React 的設計，全部的 DOM 變更，都先在虛擬 DOM 上發生，而後再將實際發生變更的部分，反映在真實 DOM上，這種算法叫作 DOM diff ，它能夠極大提升網頁的性能表現。

可是，有時須要從組件獲取真實 DOM 的節點，這時就要用到 ref 屬性

須要注意的是，因爲 this.refs.[refName] 屬性獲取的是真實 DOM ，因此必須等到虛擬 DOM 插入文檔之後，才能使用這個屬性，不然會報錯。上面代碼中，經過爲組件指定 Click 事件的回調函數，確保了只有等到真實 DOM 發生 Click 事件以後，纔會讀取 this.refs.[refName] 屬性。

React 組件支持不少事件，除了 Click 事件之外，還有 KeyDown 、Copy、Scroll 等

10.this.state

組件免不了要與用戶互動，React 的一大創新，就是將組件當作是一個狀態機，一開始有一個初始狀態，而後用戶互動，致使狀態變化，從而觸發從新渲染 UI

因爲 this.props 和 this.state 都用於描述組件的特性，可能會產生混淆。一個簡單的區分方法是，this.props 表示那些一旦定義，就再也不改變的特性，而 this.state 是會隨着用戶互動而產生變化的特性。

11.表單

用戶在表單填入的內容，屬於用戶跟組件的互動，因此不能用 this.props 讀取

文本輸入框的值，不能用 this.props.value 讀取，而要定義一個 onChange 事件的回調函數，經過 event.target.value 讀取用戶輸入的值。textarea 元素、select元素、radio元素都屬於這種狀況

12.組件的生命週期

組件的生命週期分紅三個狀態：

Mounting：已插入真實 DOM
Updating：正在被從新渲染
Unmounting：已移出真實 DOM

React 爲每一個狀態都提供了兩種處理函數，will 函數在進入狀態以前調用，did 函數在進入狀態以後調用，三種狀態共計五種處理函數。

componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()

組件的style屬性的設置方式也值得注意：

要寫成：

style={{opacity: this.state.opacity}}
這是由於 React 組件樣式是一個對象，因此第一重大括號表示這是 JavaScript 語法，第二重大括號表示樣式對象。

13.組件的屬性機制

在react中，屬性只能從最外層一級一級得傳到最裏層，這樣的話最外層屬性改變的話會牽連着相應的代碼一塊兒變，擴展性靈活性很差，好比

var Display=React.creatClass({
     render:function(){
     return 
(
<div>
<p>{this.props.color}</p>
<p>{this.props.num}</p>
<p>{this.props.size}</p>
</div>
)
}
})

var Label=React.creatClass({
     render:function(){
     return 
(
<Display color={this.props.color} 
 num={this.props.num} 
size={this.props.size}/>
)
}
})

這時能夠用擴展操做符寫成<Display {...this.props}>

14.shouldComponentUpdate

好比一個計數器組件，判斷count<5的時候渲染組件，大於5的時候就return false,這時首先要用到shouldComponentUpdate這個函數，根據它的返回值true仍是false來進行下一個操做，true的時候進行willupdate、render、didUpdate. false的時候就willUnmount在這個函數下進行收尾工做

componentWillReceiveProps與shouldCompentUpdate同理只不過是判斷屬性變化時調用的函數，並且先判斷componentWillReceiveProps再判斷shouldCompentUpdate

參考資料：http://www.ruanyifeng.com/blog/2015/03/react.html

關於react的面試題：https://zhuanlan.zhihu.com/p/24856035