入門react

前言：今天翻到了很久以前學習react時的筆記，拿出來記錄一下以避免忘掉，裏面主要是記錄了安裝環境，建立項目，啓動項目，jsx，組件介紹，組件通訊，多層嵌套，路由搭建，路由傳參，redux。記錄的比較淺薄，可是仍是有一點點的幫助，由於本身最近一直在使用vue，因此拿來回憶一下仍是不錯的，都是比較基礎的。

安裝

準備 node 版本 8.10 以上 node -v查看node 版本

1 $ cnpm install -g create-react-app 安裝環境
2 $ create-react-app my-app 建立一個項目，並命名
3 $ cd my-app/ 進入項目
4 $ npm start 啓動項目

 

1 jsx js+xml(標籤語法，相似於html)
2 jsx javascript的拓展語言，徹底是javascrip內部實現的
3 jsx 只能又一個父標籤
4 jsx 可使用{表達式}
5 JSX 代碼的外面擴上一個小括號
6 jsx 添加樣式 使用className

 

組件

一、函數組件（無狀態組件） 二、類組件（有狀態組件）
注意：

組件名稱必須以大寫字母開頭。

組件通訊

子傳父

1 子組件 使用this.props.事件名（參數）
2 父組件 <子組件 事件名＝｛處理函數｝>
3 父組件的處理函數中的參數 就是子組件傳遞過來的數據

 

vue

在使用 子組件上自定義一個事件 <ComA :on-show={xxx}/> 
子組件中 使用 $emit('on-show',值)

 

多層嵌套

1 引入 prop-types
2 父組件 3 聲明 childContextTypes 進行數據驗證
4 聲明 getChildContext 提供數據和方法 供下級組件使用
5 子組件 6 聲明contextTypes 進行數據驗證
7 在事件中 使用this.context.方法名（上級組件 childContextTypes中聲明的方法 ）

 

兄弟

cnpm install events
引入events 1、建立 event.js文件
import { EventEmitter } from 'events';
export default new EventEmitter(); 
導出 emitter對象
A 組件接受數據 使用emitter.addListener（‘changeMessage’） 註冊一個事件 
B 組件發送數據 使用emitter.emit('changeMessage', '數據');

2、發送數據的組件 
引入emitter對象
使用 emitter.emit('changeMessage', 'message'); 經過changeMessage 發送一個數據message

3、在接收數據的組件中
引入emitter對象
註冊接受函數 使用 emitter.addListener('changeMessage',function(message){ message參數就是傳遞過來的數據})

 

children

在組件中得到 使用組件時候在組件中以任何形式(標籤元素)傳遞過來的數據 和slot 很類似

 

受控組件和非受控組件

1 受控組件 input中的value值經過state值獲取，onChange事件改變state中的value值，input中的value值又從state中獲取
2 非受控 非受控也就意味着我能夠不須要設置它的state屬性，而經過ref來操做真實的DOM。

 

路由搭建

1 引入 react-router-dom 路由核心組件
2 引入 react-loadable 路由懶加載方式
3 HashRouter 使用 URL 中的 hash（#）部分去建立形如 example.com/#/some/path 的路由。
4 BrowserRouter 是使用 React Router 的應用推薦的 history。
5 它使用瀏覽器中的 History API 用於處理 URL，建立一個像example.com/some/path這樣真實的 URL 。
6 exact的值爲bool型，爲true時表示嚴格匹配，爲false時爲正常匹配。

 

路由懶加載

1 路由懶加載 可用於項目優化 會把項目分包 非路由懶加載打包後就一個資源包。加載很慢
2 路由懶加載 會按照路由模塊進行分包 因此瀏覽器在加載這些 小資源包的時候會更快。

 

路由傳參數

 1 <Route path='/path/:name' component={Path}/>
 2 <link to="/path/2">xxx</Link>
 3 編程式導航 this.props.history.push({pathname:"/path/" + name});
 4 讀取參數用:this.props.match.params.name
 5 
 6 this.props.history.goBack() 等同於 this.props.history.go(－1)至關於瀏覽器自帶的後退 不寫參數 默認後退1級 
 7 this.props.history.go(0) 前進/後退（負數） 至關於瀏覽器的 前進／後退按鈕 參數表明前進／後退幾級 go(0)刷新
 8 this.props.history.goForward() 等同於 this.props.history.go(1)
 9 this.props.history.location.pathname 表明當前路由地址
10 
11 嵌套（子）路由
12 父路由組件中，在定義一個路由規則

 

redux

cnpm install redux
cnpm install react-redux

什麼是redux 數據狀態管理：
就是說咱們項目中有不少組件須要共享數據，這時候可使用redux

搭建 ：
我通常都會建立3個文件夾。
action 裏面我會定義 方法。這個方法用來觸發reducers裏面的處理邏輯。
由於方法裏面 會返回兩個字段，一個type 用來表示一個字符串， 還有一個data，就是調用actioni 面的方法時傳遞的參數

reducer 定義store裏面的數據和處理邏輯。
處理邏輯一般使用 switch case 來選擇對應的action傳遞過來的type 類型進行處理

store 裏面會導出 reducer 封裝好的數據

使用數據：
在 index.js 裏面使用 provider 這個組件，將根組件和咱們引入的store 聯繫起來。這樣根組件中的全部組件均可以使用redux
在具體的某個組件中，引入 connect 方法，該方法用來將 mapStateToProps mapDispatchToProps 和當前組件關聯起來
mapStateToProps 用來引入數據(store) mapDispatchToProps 用來引入 action裏面的方法
使用this.props.store的名稱 來獲取redux裏面的數據 
使用 this.props.actios的名稱 來獲取action裏面的方法

 

cookie

語法 document.cookie = 'key=value;exprese='過時時間.toGMTString();'
escape(value) js 編碼 unescape() 解碼

什麼是cookie 
它相似於本地存儲。
不過存的值比較小 4kb左右,
並且他能夠設置過時時間。
接口請求是能夠被攜帶到服務器，
使用場景，7天免登陸

 

 就是這麼多了，雖然裏邊不是特別詳細，可是拿來回憶一下仍是挺不錯的，一個最基本的搭建使用流程，不是很完整，可是很簡單，哈哈哈哈，就到這了，歡迎補充哦~