成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

從項(xiàng)目中由淺入深的學(xué)習(xí)react (2)

leap_frog / 3307人閱讀

摘要：序列文章從項(xiàng)目中由淺入深的學(xué)習(xí)微信小程序和快應(yīng)用前言從和原生兩個(gè)項(xiàng)目來(lái)介紹的使用搞懂這兩個(gè)項(xiàng)目上手?jǐn)]代碼篇效果圖項(xiàng)目歡迎技術(shù)棧路由版本狀態(tài)管理組件字體適配方案適配技能點(diǎn)分析技能點(diǎn)對(duì)應(yīng)的種定義組件方法函數(shù)式定義的無(wú)狀態(tài)組

序列文章

從項(xiàng)目中由淺入深的學(xué)習(xí)vue,微信小程序和快應(yīng)用(1)

前言 
從pc(dva+umi)和mobile(原生react)兩個(gè)項(xiàng)目來(lái)介紹react的使用 
搞懂這兩個(gè)項(xiàng)目,上手?jǐn)]react代碼so-easy
1.react-mobile篇 1.1 效果圖


react-mobile項(xiàng)目,歡迎star

1.2 技術(shù)棧

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

1.3 適配方案

rem適配

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


react-pc-template項(xiàng)目, 歡迎star

2.3技術(shù)棧

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

2.4適配方案

左側(cè)固定寬度，右側(cè)自適應(yīng)
右側(cè)導(dǎo)航分別配置滾動(dòng)條.控制整個(gè)page

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/103168.html

相關(guān)文章

  • 從項(xiàng)目中由淺入深的學(xué)習(xí)koa 、mongodb(4)

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

    null1145 評(píng)論0 收藏0

  • 從項(xiàng)目中由淺入深的學(xué)習(xí)typescript (3)

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

    ninefive 評(píng)論0 收藏0

  • 深入理解js

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

    caikeal 評(píng)論0 收藏0

  • JavaScript - 收藏集 - 掘金

    摘要：插件開發(fā)前端掘金作者原文地址譯者插件是為應(yīng)用添加全局功能的一種強(qiáng)大而且簡(jiǎn)單的方式。提供了與使用掌控異步前端掘金教你使用在行代碼內(nèi)優(yōu)雅的實(shí)現(xiàn)文件分片斷點(diǎn)續(xù)傳。 Vue.js 插件開發(fā) - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins譯者：jeneser Vue.js插件是為應(yīng)用添加全局功能的一種強(qiáng)大而且簡(jiǎn)單的方式。插....

    izhuhaodev 評(píng)論0 收藏0

  • 2017年2月份前端資源分享

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

    lily_wang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<