原创 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組件中包含一系列勾子函數(生命週期回調函數), 會在特定的時刻調用。 我們在定義組件時,會在特定的生命週期回調函數中,做特定的工作。 二、 生命週期流程圖(舊) 生命週