React學習(一)：React基礎概念 —— 官方文檔

近期在學習React，發現React的很多寫法都更加接近原生JS，不得不說看起來有些吃力，GitHub上有近期學習的一些demo和資料，感覺要學習的東西還很多呀！
GitHub地址：
https://github.com/K-Stella/Learn-React

React基礎概念 —— 官方文檔

React的基本組成：元素和組件

元素是組成React應用的最小磚塊

JSX

JSX是JavaScript和XML結合的一種格式。

React DOM —— 保持DOM與React元素的一致

組件 —— 將UI拆分爲獨立可複用的代碼片段

分爲函數組件與class組件

React會將小寫字母開頭的組件視爲原生DOM標籤，自定義的組件名稱必須以大寫字母開頭

所有的React組件都必須像純函數一樣保護它們的props不被更改。

純函數既傳入的props不能發生改變。

State & 生命週期

props是組件對外的接口，state是組件對內的接口。

正確地使用State

1. 不能直接修改State

   當每次需要改變State的值時，需要通過setState()進行修改；

   構造函數是唯一可以給this.state賦值的地方

2. State的更新可能是異步的

   注意：不能依賴this.props 和 this.state更新下一個狀態。

   如何解決：讓setState()接收一個函數而不是一個對象。

3. State是“單向”的數據流

事件處理

• 事件的命名採用小駝峯
• 使用JSX語法時需要傳入一個函數作爲事件處理函數，而不是一個字符串

官方教程

環境準備

• 方式一：在瀏覽器中編寫代碼

  https://codepen.io/gaearon/pen/oWWQNa?editors=0010

• 方式二：搭建本地開發環境

  1. 首先，電腦需安裝nodejs環境

  2. 創建新項目腳手架語句

     npx create-react-app my-app
     

概述

React是什麼？

React是一個聲明式，高效且靈活的用於構建用戶界面的JavaScript庫。

通過props傳遞數據

在React應用中，數據通過props的傳遞，從父組件流向子組件。

注意：

在JavaScript class中，每次你定義其子類的構造函數時，都需要調用super方法。因此，在所有含有構造函數的React組件中，構造函數必須以super(props)開頭。

在React中，有一個命名規範，通常會將代表事件的監聽prop命名爲on[Event]，將處理事件的監聽方法命名爲handle[Event]。