React開發搭配antd涉及基礎知識點

哎打代碼總覺得開始的時候是最難的因爲無處下手很崩潰……慢慢來學代碼解釋代碼吧

1. state
   React是一個狀態機，體現在state上，通過與用戶的交互，實現不同的狀態，然後去渲染UI,這樣就讓用戶的數據和界面保持一致了。在React中，更新組件的state，結果就會重新渲染用戶界面(不需要操作DOM),一句話就是說，用戶的界面會隨着狀態的改變而改變。state是組件的私有屬性，state 只能在本組件中去初始化，並且 state 只能被本組件去修改和仿問，不能被外部仿問和修改，所以也可以說，state 是組件私有的。

2. toggle
   toggle() 方法切換元素的可見狀態。如果被選元素可見，則隱藏這些元素，如果被選元素隱藏，則顯示這些元素。

   toggle =（）=>{…}

   ES6標準新增了一種新的函數：Arrow Function（箭頭函數）

   x => x * x

   上面的箭頭函數相當於：

   function (x) {
   	return x * x;
   }
   

   箭頭函數相當於匿名函數，並且簡化了函數定義。箭頭函數有兩種格式，一種像上面的，只包含一個表達式，連{ … }和return都省略掉了。還有一種可以包含多條語句，這時候就不能省略{ … }和return：

   x => {
       if (x > 0) {
           return x * x;
       }
       else {
           return - x * x;
       }
   }
   

   如果參數不是一個，就需要用括號()括起來：

   // 兩個參數:
   (x, y) => x * x + y * y
   
   // 無參數:
   () => 3.14
   
   // 可變參數:
   (x, y, ...rest) => {
       var i, sum = x + y;
       for (i=0; i<rest.length; i++) {
           sum += rest[i];
       }
       return sum;
   }
   

3. super（）

   constructor(props){
   	super(props);
   }
   

   調用super的原因：在ES6中，在子類的constructor中必須先調用super才能引用this
   super(props)的目的：在constructor中可以使用this.props。

   如果你用到了constructor就必須寫super(),是用來初始化this的，可以綁定事件到this上;如果你在constructor中要使用this.props,就必須給super加參數：super(props)；（無論有沒有constructor，在render中this.props都是可以使用的，這是React自動附帶的；）如果沒用到constructor,是可以不寫的。

4. 與React組件的生命週期有關，組件掛載時有關的生命週期

   1、constructor( )
   2、componentWillMount( )
   3、render( )
   4、componentDidMount( )

   上面這些方法的調用是有次序的，由上而下，也就是當說如果你要獲取外部數據並加載到組件上，只能在組件"已經"掛載到真實的網頁上才能作這事情，其它情況你是加載不到組件的。componentDidMount方法中的代碼，是在組件已經完全掛載到網頁上纔會調用被執行，所以可以保證數據的加載。此外，在這方法中調用setState方法，會觸發重渲染。所以，官方設計這個方法就是用來加載外部數據用的，或處理其他的副作用代碼。constructor被調用是在組件準備要掛載的最一開始，所以此時組件尚未掛載到網頁上。

   componentWillMount方法的調用在constructor之後，在render之前，在這方法裏的代碼調用setState方法不會觸發重渲染，所以它一般不會用來作加載數據之用，它也很少被使用到。一般的從後臺(服務器)獲取的數據，都會與組件上要用的數據加載有關，所以都在componentDidMount方法裏面作。雖然與組件上的數據無關的加載，也可以在constructor裏作，但constructor是作組件state初紿化工作，並不是設計來作加載數據這工作的，所以所有有副作用的代碼都會集中在componentDidMount方法裏。

5. 模板字符串
   就傳統的 JavaScript 語言，輸出模板通常是這樣寫的。

   $('#result').append(  
   	'There are <b>' + basket.count + '</b> ' +  
   	'items in your basket, ' + 
    	'<em>' + basket.onSale +  
   	 '</em> are on sale!'
    );
   

   上面這種寫法相當繁瑣不方便，ES6 引入了模板字符串解決這個問題。模板字符串（template string）是增強版的字符串，用反引號（`）標識。它可以當作普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量。

    $('#result').append(`
      	There are <b>${basket.count}</b> 
      	items   in your basket, 
      	<em>${basket.onSale}</em>  
      	are on sale!
      `);
   

   如果使用模板字符串表示多行字符串，所有的空格和縮進都會被保留在輸出之中。

   $('#list').html(`
   <ul>
     <li>first</li>
     <li>second</li>
   </ul>
   `); 
   

   ---

   原文：https://blog.csdn.net/fortunegrant/article/details/79534701

6. 組件&prop
   https://react.docschina.org/

   組件可以將UI切分成一些獨立的、可複用的部件，這樣就只需專注於構建每一個單獨的部件。組件從概念上看就像是函數，它可以接收任意的輸入值（稱之爲“props”），並返回一個需要在頁面上展示的React元素。當React遇到的元素是用戶自定義的組件，它會將JSX屬性作爲單個對象傳遞給該組件，這個對象稱之爲“props”。
   例如,這段代碼會在頁面上渲染出”Hello,Sara”:

   function Welcome(props) {
     return <h1>Hello, {props.name}</h1>;
   }
   
   const element = <Welcome name="Sara" />;
   ReactDOM.render(
     element,
     document.getElementById('root')
   );