想變大佬的小孟砸

 

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

2.庫和框架的概念

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

框架：大而全  框架提供了一整套的解決方案，所以切換到其他的框架比較困難

3.模塊化和組件化及其優點

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

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

vue如何實現組件化  通過.vue文件創建對應的組件    分成三部分 template （結構）  script（行為） style（樣式） 缺一不可

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

移動開發方向

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文檔碎片

    虛擬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({})也可以達成目的

34.虛擬dom的優點

提升性能

可以跨域

35.setState是異步函數 為了提升性能

36.react的虛擬dom是同層比對  若該層不一樣就舍棄下面的層重新渲染

37.key值最好不是k的原因是k不穩定 所以對于比對的話不好  提高性能

38.react中的ref的使用

dom元素的引用  之前的e.target能拿到dom元素  現在