React的一些理解(部分)

React

• 在組件的return()中，所有H5元素集合中要用一個標籤把所有的標籤都包裹起來(通常用< div >…< /div >)。
• 如果要給一個標籤元素添加一個自定義屬性的話用data-(XX)前綴,前綴可以自己起，data-是一定要的。
• jsx中可以使用js，因爲JSX本身就是JS編寫的。
• 在React中使用css樣式的話不要寫class，用className，因爲在es6中class是一個保留字，還有一個就是for要寫成mtmlFor。同時要注意的是命名一般都是用單駝峯命名法。
• 標籤與組件的渲染
  • 類似於 var myDiv = < div className=“divNmae”/>這樣的都是創建了一個標籤變量，用來放入頁面中進行渲染。要注意的是變量名和標籤名如果是原生的標籤名要用到小寫
  • 同理的還有組件的創建，如果組件的變量名是自己設的要用到大寫。

   <script type="text/babel">
   function HelloMessage(props) {
       return <h1>Hello World!</h1>;
   }
   const element = <HelloMessage/>;
   ReactDOM.render(
       element,
       document.getElementById('example')
   );
</script>

像以上這行代碼串中，element就是用標籤來表示了一個函數，並給他一個變量名來放到頁面中。

function HelloMessage(props) {
    return <h1>Hello World!{props.name}</h1>;//獲取參數
}
const element = <HelloMessage name="123"/>;//設置參數

像在以上代碼彙總，函數在< h1>標籤的元素裏放了一個參數，獲取的時候通過props這個屬性來獲取。

• React中的函數能寫成類標籤的形式。
• var 變量 = <標籤>xxx</標籤>
  • 這樣的形式是JSX語法。優點是語義化等…

• 爲什麼要用JSX？
  • React 認爲渲染邏輯本質上與其他 UI 邏輯內在耦合，所以將標記和邏輯共同存放在稱之爲“組件”的鬆散耦合單元之中。即在React中，認爲H5、CSS與JS是有相同點的，所以索性直接把這三兄弟融爲一體，即產生了JSX這種語法。
• 在 JSX 語法中，你可以在大括號內放置任何有效的 JavaScript 表達式，大括號放在標籤之間。
• 在屬性中嵌入 JavaScript 表達式時，不要在大括號外面加上引號。你應該僅使用引號（對於字符串值）或大括號（對於表達式）中的一個，對於同一屬性不能同時使用這兩種符號。
• 屬性的名稱命名使用小駝峯命名法。
• 如果只有單個標籤，那麼這個標籤可以直接閉合，如果有多個的話要分開
  • 閉合

  		const element = < img src={user.avatarUrl} />;
  

  • 分開

  const element = (
  <div>
  <h1>Hello!</h1>
  <h2>Good to see you here.</h2>
  </div>
  );
  

• JSX 由於會有轉化的這一個步驟，所以能防止注入攻擊。
• 元素是react的最小單位，多個元素組成了組件
• 想要將一個 React 元素渲染到根 DOM 節點中，只需把它們一起傳入 ReactDOM.render()
• React是一個不可更新對象，即生成好後無法變化，想要變化只能重新生成一個。即React的渲染每次只會渲染一遍，渲染完成後不可改變，想要改變只能重新渲染。
• React在渲染dom的時候會預先渲染一遍，然後再渲染有改變的部分。這個渲染所採用的算法叫做diff算法。
• 函數也可以是組件，一般也只會在簡單的組件上用函數來寫組件。
• 在元素爲自定義組件的時候，JSX的屬性(參數)會轉化爲一個對象給組件，這個對象就叫做props。(個人理解props就是父組件的屬性或者說是值，因爲子組件有時候需要用到父組件的值，所以通過props這個對象來傳遞到子組件給子組件使用，也正是因爲props是父組件的值，所以子組件是不能改變props的值的，子組件自身的值放在state中，想要改變可以通過setState這個方法來改變自身的值。)
  組件不能更改自身的props。
  props是一個不可改變的對象，所以React提供了一個可以改變的，即state。
  每個組件都是隻管按代碼邏輯處理傳進來的參數並傳給給指定的下一個組件，其他的都不管，所以數據就像是瀑布裏的水一樣不斷的流動而不會停止或者返回，即數據是向下流動的。所以一個組件的數據只能影響其子組件的數據，即數據是單向的。
• bind()方法創建一個新的函數，在bind()被調用時，這個新函數的this被bind的第一個參數指定，其餘的參數將作爲新函數的參數供調用時使用。
• 在javasrcipt中，A&&B如果爲真，結果會返回B，否則是返回A。利用這個特點可以把不成立後的邏輯放左邊，成立的邏輯放右邊。
• 在創建多個重複的元素的時候(例如多個li元素)，最好是給一個key，也就是一個標誌。以id爲最優，沒有id就index，但是用index來區別li的時候最好能保證li的順序不會頻繁的改變，以免React因爲index的改變而頻繁的重複渲染，降低效率。同時index在一些情況下會不如人意。
• key屬性的設置時機:在map() 方法中的元素需要設置 key 屬性。
• key值的設置只需要在兄弟節點間是獨一無二的就可以了。例如有ul1與ui2，ul1裏有li的key值爲1與ul2裏的li也有一個key值爲1，那麼是沒關係的，因爲他們不是兄弟節點，而ul1裏有兩個li，這兩個li的key都爲1，那麼就有關係了。
• key值只會給React讀取，組件裏的函數是無法讀取的，如果想讓組件也能讀取就需要重新設置一個屬性也指向這個key。例如:

	 const content = posts.map((post) =>
 	<Post
    	key={post.id}
    	id={post.id}
    	title={post.title} />
	);

在post中，key值是無法被獲取的，因而重新設置了id值也是指向post.id，讓函數獲取id。

• React是什麼？
• 目前我個人感覺是如果把前端比作是一個人，那麼Html就相當於是一個人的骨頭，有了Html這個人的大小，體型纔有了一個基本的框架。JS就好比是人身上血與肉，有了血和肉人才能動起來。Jquery相對於原生的JS就好像是人身上的肌肉，能幫人運動的強度更大，做事做的更快更強。而CSS就好比是人身上的衣服，有了CSS，這個人才不至於赤身裸體。
  那麼React這個框架如果用以上的概念相當於是什麼呢？React裏的一個很重要的思想就是組件化。什麼是組件化？就好比說人身上有手腳身體頭四個部位，每個部位放到React裏都是一個組件，四個組件一拼到一起，一個人就成了。React就是一個寫組件的JS框架。比如說我寫一個手這個部位的組件，這個組件寫好後有手的骨頭，手的肌肉，還有手這個部位的衣服。可以說組件就是把CSS，Html,JS拼到了一塊。以前是三個元素單方面作戰，到JS時期的JS指揮Html和CSS，到現在框架的三個元素共同協作。

• 比如說官網裏跳跳棋的demo，由三個組件組成，一個Game.js，一個是Board.js,一個是Square.js。Square.js負責控制每個棋格的顯示，Board.js負責組成所有的棋格，Game.js負責回溯之前的棋路。三個組件拼在一起就形成了一個完整的跳跳棋。

• Props
  • 這個玩意是父組件的參數。並且由於這個參數是從父組件拿來的，所以子組件是隻能拿來用，無法拿來修改的。爲了彌補這個缺點所以後面還引出來了State這個玩意，這個玩意是子組件自身的參數，所以是可以修改的。
• State
  • 這玩意就用來設置組件自身的屬性的地方。Props是用來存父組件的，這個就是自身的。
• Super
  • Super就是一個調用父組件參數的方法。例如現在父組件有很多參數，都在Props中，但是怎樣才能把Props調用到子組件中呢？就是用Super這個方法。
• constructor
  • 用來指向實例化對象的構造函數。意思就是說在這個函數裏創建的變量都會通過這個函數把其中設置的變量放到實例的構造函數裏(以便之後這個組件的子組件調用？？？ 好像還有一個功能是用來對參數進行集中的管理。)
• componentWillMount
  • 這個是在將要渲染之前會進行調用，即render()之前。同時能在服務器端和瀏覽器端調用。
• componentDidMount
  • 這個是在渲染後進行調用，只能在瀏覽器端進行調用，服務器端不行。
• stopPropagation
  • 可以阻止documt事件的傳播。例如一個ul裏三個li都綁定了click，其中一個觸發後stopPropagation可以避免cilck事件傳播到其他兩個li。