react學習

時間 2019-11-24

標籤 react 學習欄目 React 简体版

原文原文鏈接

1.react是Facebook公司開發的最初用於ins的網站搭建css

2.庫和框架的概念html

庫：小而巧只提供了特定API 能夠很方便的從一個庫換到另外一個庫代碼幾乎不會改變前端

框架：大而全框架提供了一整套的解決方案，因此切換到其餘的框架比較困難vue

3.模塊化和組件化及其優勢node

模塊化：從代碼出發分析把一些可複用的代碼抽離爲單個的模塊，便於項目的維護和開發react

組件化：從ui出發分析把一些可複用的ui界面抽離爲單獨的組件（隨着項目的開發，組件積累的愈來愈多，很方便就能把現有的組件拼接成完整的頁面）ios

vue如何實現組件化經過.vue文件建立對應的組件分紅三部分 template （結構） script（行爲） style（樣式）缺一不可程序員

react如何實現組件化 react中有組件化的概念可是沒有像vue同樣這樣的組件模版文件一切都已js來表現web

移動開發方向ajax

vue結合weex技術能夠遷移到移動端 weex技術阿里本身系列軟件在用

react 結合react native 能夠無縫遷移到移動端大公司用的多

4.react的核心概念

(1).虛擬dom

dom的本質瀏覽器的概念用js對象表示頁面上的元素，瀏覽器提供了操做dom對象的API

react中的虛擬dom 框架中的概念是程序員用js對象來模擬頁面上的dom和dom嵌套

爲何要實現虛擬dom 爲了實現頁面中dom元素的高效更新

dom樹的概念（一個頁面呈現的過程）瀏覽器請求服務器獲取頁面html代碼 -> 瀏覽器要先在內存中，解析dom結構，並在瀏覽器內存中渲染出一棵dom樹 ->瀏覽器把dom樹渲染在頁面上

如何把性能最優 ->按需更新如何按需更新 ->獲取內存中的新舊兩棵dom樹進行對比，獲得須要修改的dom元素如何獲取dom樹 -> 瀏覽器並未提供獲取dom樹的api ->程序員手動模擬dom 樹如何模擬dom樹 ->對象與數組結合 var tree = {

tagName:'div',

childrens:[{tagName:'p'},'lalala']

}

程序員用js對象的方式手動模擬dom樹和嵌套關係就是虛擬dom 目的：使頁面高效更新

(2).diff算法（different）

tree diff 新舊兩顆dom樹逐層對比的過程，當整棵樹逐層對比結束，則全部須要按需更新的元素都能被找到

component diff 在進行tree diff的時候，每一層中組件級別的對比

若對比先後，組件類型相同，則暫時認爲此組件不須要被更新

若對比先後，組件的類型不一樣，則須要移除舊組件，建立新組件，並追加到頁面上

element diff 在進行組件對比的時候若出現組件相同，則須要進行元素級別的對比。

5.問題記錄

在使用react時初始建立react項目用npm install -g create-react-app 報錯錯誤信息爲 Error: EACCES 即沒有權限此時在指令前加sudo便可執行

6.前端思想pwa progressive web application

之前端的方式寫手機app react中的體現在index.js中有 import registerServerWorker from './ registerServerWorker' 引入以後用戶第一次打開頁面需聯網以後若在無網絡環境下打開也會顯示聯網時的頁面

manifest.json是在使用pwa時對首次頁面的緩存能夠在該頁面設置快捷方式的圖標和網址顏色等

7.使用react的步驟

sudo npm install -g create-react-app -> cd Desktop -> create-react-app +文件名 -> cd 文件名 -> npm start 就會打開新建的頁面每次調試 npm run start

8.在app.js中 import React, { Component } from 'react'; 去掉,{}中的東西等同於class App extends React.Component這種寫法

render函數返回什麼頁面顯示什麼在用export default +類名返回出去

9.ES6 解構賦值？？？

10.jsx語法須要引入react

11.jsx語法

（1）.直接在js文件中寫入標籤無需引號

（2）.能夠將自定義的組件以標籤形式引入注意首字母必須大寫

（3）.jsx語法規定函數返回的標籤羣必須被包裹在一個標籤中

（4）.react16提供了Fragment標籤解決既知足（3）又不想在頁面中顯示最外層標籤的方法

（5）.jsx中的變量要用{}包裹

（6）.jsx如何寫註釋 {//或者／**／} 是開發時註釋

12.constructor(props）爲類的構造函數默認有個props參數在其中執行super（props）即執行父類的構造函數構造函數中this.state能夠存放數據

13.事件綁定時須要經過bind(this)改變this指向 state中提供setxxx用來改變state中的值以傳入對象的形式

14.map???

15.ES6展開運算符

[...this.state.list,xxx] 意味將以前的數組內容拿過來

16.react作循環時，須要在每一個循環中加入key值不加不報錯但警告

17.immutable ->即state不容許咱們作任何修改若想修改就拷貝個副本否則以後的性能優化會出現問題

18.jsx 中寫class名時推薦寫成className 由於在該語法下默認class爲類

19.若想達成在input輸入框中加入標籤在頁面中顯示的話，在你想出現的標籤上寫屬性dangerouslySetInnerHTML = {{__html:item}} 可是可能會被注入攻擊

20.父組件以屬性的方式傳給子組件數據子組件以this.props.xxx的形式接收

子組件以父組件傳遞過來的方法傳遞數據給父組件

21.react代碼優化

先引入組件在引入樣式

bind（this）的時候能夠拿到頂端寫提升性能

新版react對setState 進行修改以前是對象的形式新版是函數形式返回對象即this.setState(()=>{

return {inputValue:e.target.value}}) 但會報錯報錯緣由是寫成了函數就會出現異步操做因此要在函數上面用常量保存時間的相關參數

22.ES6return的簡寫是括號

23.setState()能夠接收個參數是prevState 表示上一個state 等同於this.state

24.react的特色

聲名式開發（只操做數據）

能夠與其餘框架共存

組件化開發（組件開頭字母要大寫）

單向數據流（只能父組件向子組件傳值，子組件不能改變父組件傳過來的值）

視圖層框架（只處理數據和頁面渲染，其餘複雜組件間的傳值要藉助其餘框架）

函數式編程（對前端自動化測試帶來方便）

25.切換node版本

npm install -g n

n 版本號

26.action

是行爲的抽象

是普通js對象

通常由方法是生成

必須有一個type （惟一的）

27.store = reducer + state

reducer裏有createstore 會生成store

28.

29.總結一下：redux的設計思想簡單的說；
第一步：action :無論三七二之一；模擬出事件；

第二步：reducer: 開發中天然有多個reducer;
新建一個reducer文件只作一件事；吧多個reducer合併成一個reducer.
使用combineReducers方法來將多個reducer合併成一個；每一個reducer會生成一個新的state;將多個reducer合併成一個reducer;那也就等同於將多個小的state合併成一個大的state對象；

第三步： const store = createStore(reducers); 將state交給store管理；

第四步：action返回一個對象；這個對象交給store管理；其中reducer也是store來管理的；每次觸發一個action;就會執行全部的reducer;

能夠認爲以上種種都是爲了容器組件服務的；在containers裏面計算獲得state和返回的action純對象；這樣將action對象和state合併爲容器組件的props;繼而將props合併到UI組件中去！！

第五步：容器組件中connect方法的參數mapStateToProps方法能夠獲得全部的reducer對應的state從中獲取指定值而後合併爲組件的props;

mapDispatchToProps方法能夠返回須要用的純對象(action);方法會自動將這個對象合併到組件的props中。

30.propTypes 子組件對父組件傳遞過來的數據類型進行強校驗

先引入prop-types包 import PropTypes from "prop-types"

再在子組件寫入 TodoItem.propTypes = {

content: PropTypes.string ，注意大小寫

deleteItem: PropTypes.func,

index:propTypes.number.isRequired 他的斷定還有許多好比既能夠是數字也能夠是字符串就寫成:PropTypes.oneOfType([PropTypes.number,PropTypes.string]) 能夠看一下官方文檔不寫require的時候若是父組件沒傳遞index的值的話程序也不會報錯可是加了以後若是不傳index的值的話就會報錯這時就能夠給index一個默認值 TodoItem.defauliProps = {

index:3

}

31.Props,State,Render函數

當組件的state或props發生改變，render函數就會從新執行

當父組件的render 函數被從新執行時子組件也會被從新執行

32.dom即documentfragment文檔碎片

<div class="abc"><span>hello world</span></div>

虛擬dom就是js對象用來模擬真是dom["div",{id:"abc"},["span",{},"hello worid"]]

js建立一個真實dom對象代價極高要調用webapplication級別的API 很消耗性能

33.在react底層中，先生成虛擬dom,而後再根據虛擬dom生成真實dom

jsx -> createElement -> 虛擬dom (js對象) ->真實dom

因此運用jsx只是讓咱們在開發的時候方便一點運用偏向底層的React.createElement({})也能夠達成目的