React知識圖譜模板課件

202XReact知識圖譜演講人202X-06-08202XReact知識圖譜演講人202X-06-08101組件化02Hook：React16.8的新增特性。它可以讓你在不編寫class的03狀態(tài)管理庫04路由管理庫05腳手架06組件庫目錄01組件化02Hook：React16.8的新增特性。它201組件化01組件化3組件化狀態(tài)值：組件內(nèi)用到，并且會發(fā)生更新，一旦狀態(tài)值更新，會引起組件重新渲染。數(shù)據(jù)跨層級傳遞：ContextHOC：高階組件是參數(shù)為組件，返回值為新組件的函數(shù)。傳送門createPortal組件化狀態(tài)值：組件內(nèi)用到，并且會發(fā)生更新，一旦狀態(tài)值更新，會42組件化狀態(tài)值：組件內(nèi)用到，并且會發(fā)生更新，一旦狀態(tài)值更新，會引起組件重新渲染。函數(shù)組件useState、useReducer類組件this.state2組件化狀態(tài)值：組件內(nèi)用到，并且會發(fā)生更新，一旦狀態(tài)值更新，5狀態(tài)值：組件內(nèi)用到，并且會發(fā)生更新，一旦狀態(tài)值更新，會引起組件重新渲染。類組件this.state函數(shù)組件useState、useReducer狀態(tài)值：組件內(nèi)用到，并且會發(fā)生更新，一旦狀態(tài)值更新，會引起組6數(shù)據(jù)跨層級傳遞：Context使用方式三步走組件化數(shù)據(jù)跨層級傳遞：Context使用方式三步走組件化7使用方式三步走1.創(chuàng)建Context對象2.使用Context.Provider傳遞value3.Provider的子組件消費value

contextType：只能用在類組件，只能訂閱單一的context來源useContext：只能用在函數(shù)組件或者自定義hook中Context.Consumer使用方式三步走1.創(chuàng)建Context對象2.使用Cont8HOC：高階組件是參數(shù)為組件，返回值為新組件的函數(shù)。組件化Antd3Form、react-reduxconnect、react-routerwithRouter等HOC：高階組件是參數(shù)為組件，返回值為新組件的函數(shù)。組件化A9Antd3Form、react-reduxconnect、react-routerwithRouter等HOC：高階組件是參數(shù)為組件，返回值為新組件的函數(shù)。Antd3Form、react-reduxconnect10傳送門createPortalReactDOM.createPortal(child,container);一種將子節(jié)點渲染到DOM節(jié)點中的方式組件化傳送門createPortalReactDOM.create11傳送門createPortalReactDOM.createPortal(child,container);一種將子節(jié)點渲染到DOM節(jié)點中的方式傳送門createPortalReactDOM.create1202Hook：React16.8的新增特性。它可以讓你在不編寫class的02Hook：React16.8的新增特性。它可以讓你在13Hook：React16.8的新增特性。它可以讓你在不編寫class的情況下使用state以及其他的React特性。useStateconst[state,setState]=useState(initialState);返回一個state，以及更新state的函數(shù)。Hook：React16.8的新增特性。它可以讓你在不編14Hook：React16.8的新增特性。它可以讓你在不編寫class的情況下使用state以及其他的React特性。useReducerconst[state,dispatch]=useReducer(reducer,initialArg,init);類似useState。試想這樣一個場景，state更新條件復雜，這個時候如果使用useState，那么執(zhí)行setState的函數(shù)時候就會比較臃腫，這個臃腫的函數(shù)也很難實現(xiàn)復用。這個時候，可以考慮使用useReducer了，把state更新規(guī)則寫在一個reducer函數(shù)中，這樣不僅reducer可以復用，并且組件中也沒有復雜的state修改規(guī)則。Hook：React16.8的新增特性。它可以讓你在不編15Hook：React16.8的新增特性。它可以讓你在不編寫class的情況下使用state以及其他的React特性。useEffect接收一個包含命令式、且可能有副作用代碼的函數(shù)。默認情況下，effect將在每輪渲染結(jié)束后執(zhí)行，但我們可以通過控制依懶值選擇讓它只有某些值改變的時候才執(zhí)行?？梢灶惐阮惤M件的componentDidMount、componentDidUpdate和componentWillUnmount。Hook：React16.8的新增特性。它可以讓你在不編16Hook：React16.8的新增特性。它可以讓你在不編寫class的情況下使用state以及其他的React特性。useLayoutEffect其函數(shù)簽名與useEffect相同，但它會在所有的DOM變更之后同步調(diào)用effect。使用場景如react-redux的connect。Hook：React16.8的新增特性。它可以讓你在不編17Hook：React16.8的新增特性。它可以讓你在不編寫class的情況下使用state以及其他的React特性。useContext接收一個context對象（React.createContext的返回值）并返回該context的當前值。Hook：React16.8的新增特性。它可以讓你在不編18Hook：React16.8的新增特性。它可以讓你在不編寫class的情況下使用state以及其他的React特性。useCallback緩存函數(shù)Hook：React16.8的新增特性。它可以讓你在不編19Hook：React16.8的新增特性。它可以讓你在不編寫class的情況下使用state以及其他的React特性。useMemo緩存參數(shù)Hook：React16.8的新增特性。它可以讓你在不編20返回的ref對象在組件的整個生命周期內(nèi)保持不變。使用場景如Antd4Form實現(xiàn)useForm的時候。useRef返回的ref對象在組件的整個生命周期內(nèi)保持不變。使用場景21Hook：React16.8的新增特性。它可以讓你在不編寫class的情況下使用state以及其他的React特性。useImperativeHandleuseImperativeHandle可以讓你在使用ref時自定義暴露給父組件的實例值。使用場景如Antd4Form實現(xiàn)Form的時候。Hook：React16.8的新增特性。它可以讓你在不編2203狀態(tài)管理庫03狀態(tài)管理庫23狀態(tài)管理庫redux：函數(shù)式編程mobx：響應(yīng)式編程recoil：融合React自身（目前還處于實驗階段）以上三者對比狀態(tài)管理庫redux：函數(shù)式編程24redux：函數(shù)式編程分支主題狀態(tài)管理庫redux：函數(shù)式編程分支主題狀態(tài)管理庫25redux是JavaScript應(yīng)用的狀態(tài)容器。它保證程序行為一致性且易于測試。createStore創(chuàng)建store

reducer初始化、修改狀態(tài)函數(shù)

getState獲取狀態(tài)值

dispatch提交更新

subscribe變更訂閱

常見中間件異步狀態(tài)更新日志處理promiseredux是JavaScript應(yīng)用的狀態(tài)容器。它保證程序行26mobx：響應(yīng)式編程狀態(tài)管理庫mobx通過透明的函數(shù)響應(yīng)式編程使得狀態(tài)管理變得簡單和可擴展。mobx：響應(yīng)式編程狀態(tài)管理庫mobx通過透明的函數(shù)響應(yīng)式編271.定義狀態(tài)并使其可觀察mobx通過透明的函數(shù)響應(yīng)式編程使得狀態(tài)管理變得簡單和可擴展。observable1.定義狀態(tài)并使其可觀察mobx通過透明的函數(shù)響應(yīng)式編程使282.創(chuàng)建視圖以響應(yīng)狀態(tài)的變化01返回響應(yīng)式組件，它可以自動追蹤哪個可觀察量被使用了以及當值改變的時候自動重新渲染這個組件。observerHOC02只能使得它自己的返回組件是響應(yīng)式的，如果你里面還嵌套了別的組件，那這個里面的組件得靠自己變成響應(yīng)式~Observercomponent03優(yōu)點：任何的hook改變observable，組件都不會重復渲染。缺點：就算是在組件的某一部分使用，但是卻能引起組件的全部更新~，所以慎用，如果想要精細控制的話，還是要選擇<Observer/>或者useForceUpdate。缺點：就算是在組件的某一部分使用，但是卻能引起組件的全部更新~，所以慎用，如果想要精細控制的話，還是要選擇<Observer/>或者useForceUpdate。useObserverhook2.創(chuàng)建視圖以響應(yīng)狀態(tài)的變化01返回響應(yīng)式組件，它可以自動29action建議對任何修改observables或具有副作用的函數(shù)使用action。結(jié)合開發(fā)者工具的話，動作還能提供非常有用的調(diào)試信息。3.更改狀態(tài)action建議對任何修改observables或具有副30recoil：融合React自身（目前還處于實驗階段）recoil是Facebook開發(fā)的狀態(tài)管理庫，目標是做一個高性能的狀態(tài)管理庫，并且可以使用React內(nèi)部的調(diào)度機制，包括會支持并發(fā)模式。狀態(tài)管理庫recoil：融合React自身（目前還處于實驗階段）rec31狀態(tài)管理庫以上三者對比1redux是集中式管理state，而recoil和mobx都是分散式。2recoil中狀態(tài)的讀寫都是Hooks函數(shù)，目前沒有提供類組件的使用方式。3recoil是Facebook開發(fā)的，可以使用React內(nèi)部的調(diào)度機制，這是redux和mobx不支持的。4recoil目前還是實驗階段，想要應(yīng)用到的自己的項目中，等待正式版發(fā)了再說吧。5共同點狀態(tài)管理庫以上三者對比1redux是集中式管理state，而32共同點愛用不用。目前任何一個狀態(tài)管理庫都不是強制使用的，也有很多精小的項目不使用第三方狀態(tài)管理庫，而只是使用React自身的state、useContext等API就可以達到目的。當然，對于大型項目，個人還是建議使用一個狀態(tài)管理庫，畢竟項目越大，需要管理、共享的狀態(tài)越多，這個時候為了避免data層與view層變成一鍋粥，還是使用個狀態(tài)管理庫吧。共同點愛用不用。目前任何一個狀態(tài)管理庫都不是強制使用的，也有3304路由管理庫04路由管理庫34react-router目前最新版本是5.2.0：根據(jù)url與組件的映射關(guān)系切換組件的顯示路由管理庫react-router目前最新版本是5.2.0：根據(jù)u35路由管理庫react-router目前最新版本是5.2.0：根據(jù)url與組件的映射關(guān)系切換組件的顯示RouterRouteSwitchRedirectLinkNavLink路由管理庫36路由管理庫react-router目前最新版本是5.2.0：根據(jù)url與組件的映射關(guān)系切換組件的顯示RedirectwithRouter自定義hook方法路由管理庫37RouterBrowserRouter：使用HTML5提供的historyAPI(pushState,replaceState和popstate事件)來保持UI和URL的同步。HashRouter：使用URL的hash部分（即window.location.hash）來保持UI和URL的同步。MemoryRouter：把URL的歷史記錄保存在內(nèi)存中的<Router>（不讀取、不寫入地址欄）。在測試和非瀏覽器環(huán)境中很有用，如ReactNative。HashRouter：使用URL的hash部分（即window.location.hash）來保持UI和URL的同步。MemoryRouter：把URL的歷史記錄保存在內(nèi)存中的<Router>（不讀取、不寫入地址欄）。在測試和非瀏覽器環(huán)境中很有用，如ReactNative。RouterBrowserRouter：使用HTML5提383render:func匹配才會渲染1children:func不管與path匹配與否都渲染2component:component匹配才會渲染渲染組件3render:func匹配才會渲染1children:fu39渲染與該地址匹配的第一個子節(jié)點<Route>或者<Redirect>。Switch渲染與該地址匹配的第一個子節(jié)點<Route>或者<Re40渲染<Redirect>將使導航到一個新的地址。Redirect渲染<Redirect>將使導航到一個新的地址。Redi41Link跳轉(zhuǎn)組件Link跳轉(zhuǎn)組件42一個特殊版本的Link，當它與當前URL匹配時，為其渲染元素添加樣式屬性。NavLink一個特殊版本的Link，當它與當前URL匹配時，為其渲43Redirect重定向。路由守衛(wèi)時，會有到這個組件。Redirect重定向。路由守衛(wèi)時，會有到這個組件。44withRouterHOC?？梢酝ㄟ^它訪問routeprops。withRouterHOC?？梢酝ㄟ^它訪問routepro45useHistory、useLocation、useRouteMatch、useParams自定義hook方法useHistory、useLocation、useRout4605腳手架05腳手架47FaceBook支持，它提供了一個零配置的現(xiàn)代構(gòu)建設(shè)置。建議初學者自己學習的