從項目中由淺入深的學習react (2)

leap_frog 發布于2019-08-23 16:42 / 3231人閱讀

摘要：序列文章從項目中由淺入深的學習微信小程序和快應用前言從和原生兩個項目來介紹的使用搞懂這兩個項目上手擼代碼篇效果圖項目歡迎技術棧路由版本狀態管理組件字體適配方案適配技能點分析技能點對應的種定義組件方法函數式定義的無狀態組

序列文章

從項目中由淺入深的學習vue,微信小程序和快應用(1)

前言

從pc(dva+umi)和mobile(原生react)兩個項目來介紹react的使用 
搞懂這兩個項目,上手擼react代碼so-easy

1.react-mobile篇 1.1 效果圖

react-mobile項目,歡迎star

1.2 技術棧

react + react-router-v4 + redux +ant-design-mobile+iconfont
react-router-v4:路由4.x版本
redux:狀態管理
ant-design-mobile:UI組件
iconfont:字體icon

1.3 適配方案

rem適配

1.4技能點分析

技能點	對應的api
3種定義react組件方法	1.函數式定義的無狀態組件; 2.es5原生方式React.createClass定義的組件; 3.es6形式的extends React.Component定義的組件
JSX	react是基于jSX語法
react16之前生命周期	實例化(6個):constructor，getDefaultProps,getInitialState,componentWillMount,render,componentDidMount
react16生命周期	實例化(4個):constructor，getDerivedStateFromProps,componentWillMount,render,componentDidMount,componentWillUpdata,render,componentDidUpdate, componentWillUnmount
生命周期	更新(5個) componentWillReceivePorps,shouldComponentUpdate,
生命周期	銷毀:componentWillUnmout
react-dom	提供render方法
react-router 4.x組成	react-router(核心路由和函數) , react-router-dom(API) , react-router-native( React Native 應用使用的API)
react-router 4.x的API	router(只能有一個) , route(匹配路由渲染UI) , history, link(跳轉) , navlink(特定的link,會帶樣式) , switch(匹配第一個路由) , redirect(重定向) , withRouter(組件,可傳入history,location,match 三個對象)
react-router 3.x組成	就是react-router
react-router 3.x的API	router , route , history(push和replace方法) , indexRedirect(默認加載) , indexRedirect(默認重定向) , link(跳轉) , 路由鉤子(onEnter進入,onLeave離開)4.x已經去掉
history	react-router有三種模式: 1.browserHistory(需要后臺支持); 2.hashHistory(有"#"); 3.createMemoryHistory
redux	單向數據流 , action(通過dispatch改變state值) , reducer(根據 action 更新 state) , store(聯系action和reducer)
react-redux	1.連接react-router和redux,將組件分為兩類:UI組件和容器組件(管理數據和邏輯) , 2.connect由UI組件生成容器組件 , 3.provider讓容器組件拿到state , 4.mapStateToProps:外部state對象和UI組件的props映射關系, 5.mapDispatchToProps:是connect第二個參數， UI 組件的參數到store.dispatch方法的映射
react-loadable	代碼分割,相當于vue-router中的路由懶加載
classNames	動態css的類

2.react-pc-template篇 2.1效果圖

react-pc-template項目, 歡迎star

2.3技術棧

dva+umi+ant-design-pro
dva:可拔插的react應用框架,基于react和redux
mui:集成react的router和redux
ant-design-pro:基于react和ant-pc的中后臺解決方案

2.4適配方案

左側固定寬度，右側自適應
右側導航分別配置滾動條.控制整個page

2.5技能點分析

技能點	對應api
路由	基于umi,里面有push,replace,go等方法
狀態管理	dva里面的redux的封裝,屬性有state,effects,reducers
組件傳值	父子:props,平級redux或umi的router
model	項目的model和dom是通過@connect()連接并將部分屬性添加到props里
登陸	登陸是通過在入口js里面做路由判斷

云服務器 GPU云服務器怎么部署react項目從云服務器中獲益的企業深度學習的項目 java項目中的調度

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103168.html

從項目中由淺入深的學習koa 、mongodb(4)

摘要：序列文章從項目中由淺入深的學習微信小程序和快應用從項目中由淺入深的學習從項目中由淺入深的學習前言的出現前端已經可以用一把梭從前端寫到后臺。 showImg(https://segmentfault.com/img/bVbrRI5?w=1920&h=1080); 序列文章從項目中由淺入深的學習vue,微信小程序和快應用 (1)從項目中由淺入深的學習react (2)從項目中由淺入深的學...

null1145 2019-06-26 18:01 評論0 收藏0
從項目中由淺入深的學習typescript (3)

摘要：序列文章從項目中由淺入深的學習微信小程序和快應用從項目中由淺入深的學習前言為什么會有大家有沒想過這個問題原因是是弱類型編程語言也就是申明變量類型可以任意變換。是的超集，也相當于預處理器本文通過一個項目來讓你快速上手。 showImg(https://segmentfault.com/img/bVbruJw?w=1024&h=768); 序列文章從項目中由淺入深的學習vue,微信小程序...

ninefive 2019-08-23 16:59 評論0 收藏0
深入理解js

摘要：詳解十大常用設計模式力薦深度好文深入理解大設計模式收集各種疑難雜癥的問題集錦關于，工作和學習過程中遇到過許多問題，也解答過許多別人的問題。介紹了的內存管理。延遲加載 (Lazyload) 三種實現方式延遲加載也稱為惰性加載，即在長網頁中延遲加載圖像。用戶滾動到它們之前，視口外的圖像不會加載。本文詳細介紹了三種延遲加載的實現方式。詳解 Javascript十大常用設計模式力薦~ ...

caikeal 2019-08-26 11:39 評論0 收藏0
JavaScript - 收藏集 - 掘金

摘要：插件開發前端掘金作者原文地址譯者插件是為應用添加全局功能的一種強大而且簡單的方式。提供了與使用掌控異步前端掘金教你使用在行代碼內優雅的實現文件分片斷點續傳。 Vue.js 插件開發 - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins譯者：jeneser Vue.js插件是為應用添加全局功能的一種強大而且簡單的方式。插....

izhuhaodev 2019-08-21 11:44 評論0 收藏0
2017年2月份前端資源分享

平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼十大經典排序算法(帶動圖演示) 為什么知乎前端圈普遍認為H5游戲和H5展示的JSer 個人整理和封裝的YU.js庫|中文詳細注釋|供新手學習使用擴展JavaScript語法記錄 - 掉坑初期工具漢字拼音轉換...

lily_wang 2019-06-27 16:28 評論0 收藏0