原创 React---新擴展RenderProps和ErrorBoundary

 一、render props 1.如何向組件內部動態傳入帶內容的結構(標籤)?       Vue中:          使用slot技術, 也就是通過組件標籤體傳入結構  <AA><BB/></AA>     React中:      

原创 React---新擴展Context和組件優化

一、Context 1. 理解    一種組件間通信方式, 常用於【祖組件】與【後代組件】間通信 2. 使用   1) 創建Context容器對象:       const XxxContext = React.createContext

原创 React---新擴展Hooks和Fragment

一、Hooks 1. React Hook/Hooks是什麼?   (1). Hook是React 16.8.0版本增加的新特性/新語法   (2). 可以讓你在函數組件中使用 state 以及其他的 React 特性 2. 三個常用的

原创 React---新擴展setState和lazyLoad

一、setState 1. setState更新狀態的2種寫法     (1). setState(stateChange, [callback])------對象式的setState             1.stateChange爲

原创 React---react-redux的使用

一、基本使用     (1).明確兩個概念:                         1).UI組件:不能使用任何redux的api,只負責頁面的呈現、交互等。                         2).容器組件:負責

原创 React---Redux異步action

一、分析     (1).明確:延遲的動作不想交給組件自身,想交給action          (2).何時需要異步action:想要對狀態進行操作,但是具體的數據靠異步任務返回。          (3).具體編碼:         

原创 React---Redux的基礎使用

一、Redux理解 1. 學習文檔 英文文檔: https://redux.js.org/ 中文文檔: http://www.redux.org.cn/ Github: https://github.com/reactjs/redux 安

原创 React---antd的按需引入和自定義主題

一、antd的按需引入+自定義主題             1.安裝依賴:npm install react-app-rewired customize-cra babel-plugin-import less less-loader an

原创 React---路由組件傳參

一、向路由組件傳遞參數                 1.params參數                             路由鏈接(攜帶參數):<Link to='/demo/test/tom/18'}>詳情</Link>   

原创 React---路由的使用(二)

一、NavLink   NavLink可以實現路由鏈接的高亮,通過activeClassName指定樣式名 <NavLink activeClassName="demo" className="list-group-item" to="

原创 React---路由的使用(一)

一、SPA的理解 單頁Web應用(single page web application,SPA)。 整個應用只有一個完整的頁面。 點擊頁面中的鏈接不會刷新頁面,只會做頁面的局部更新。 數據都需要通過ajax請求獲取, 並在前端異步展現。

原创 React---消息訂閱發佈機制

一、PubSubJS的使用 工具庫: PubSubJS 下載: npm install pubsub-js --save 使用: 1) import PubSub from 'pubsub-js' //引入 2) PubSub.subs

原创 React---發送Ajax請求

1. 理解 1.1. 前置說明 React本身只關注於界面, 並不包含發送ajax請求的代碼 前端應用需要通過ajax請求與後臺進行交互(json數據) react應用中需要集成第三方ajax庫(或自己封裝) jQuery: 比較重, 如

原创 React---虛擬DOM與DOM Diffing算法

一、key的作用 1. 虛擬DOM中key的作用:            1). 簡單的說: key是虛擬DOM對象的標識, 在更新顯示時key起着極其重要的作用。            2). 詳細的說: 當狀態中的數據發生變化時,re

原创 React---組件的生命週期

一、理解 組件從創建到死亡它會經歷一些特定的階段。 React組件中包含一系列勾子函數(生命週期回調函數), 會在特定的時刻調用。 我們在定義組件時,會在特定的生命週期回調函數中,做特定的工作。 二、 生命週期流程圖(舊)   生命週