7.25日學習記錄

1.html+css+js (基本) js(沒掌握好)
2.簡單的框架：bootstarp jq 插件 （百度） 一些效果插件（跟着文檔教程很容易上手的） 好比移動端有一個(swiper) 輪播插件
3.原來的MVC架構( 把咱們前端分爲3層 M 是數據層 V 視圖層 C 控制層 中間層 )
4. 先後端分離以後， 前端在不會有任何後端代碼的參與(MVVM VUE react augular avloan )
5.開發的思想 模塊化，工程化，（前端應該頁面複雜後，多人協做開發會很困難，因此就出來了模塊化, 就是說每個人負責一個模塊，sea.js require.js 好比這些工具都是基於幾個標準進行開發，(AMD common,js)
）

6.工程化，咱們的工程化理解就是說把咱們開發應用當成一個工程去作，那麼一個工程（把每一部分的應用單獨抽離出來，可是最後又是須要咱們進行整合的） (webpack，grunt,glup)
7.優化(如何去減小用戶的帶寬量，減少咱們頁面的開發體積，以及咱們須要加載業務的大小)(最重要的，也是最難的) (css+js+img+http+cdn+dns)
8.如何提升咱們代碼質量的一些工具(開發的思想，函數式編程，一些優化算法，一些架構)
9.總結來講（前端都是在基於咱們的頁面開發 圍繞的就是咱們頁面以及用戶體驗（流暢度）)
10。爲了去解決問題

 

7.25 22-23:30: 跟着一塊兒看下react 一塊兒的技術棧是什麼樣子的； （react-router,redux,react-redux）

一：讀react-router文檔的記錄以及理解:

1.基本用法：    

<Router> <Route path="/" component={App}> <Route path="about" component={About} /> <Route path="inbox" component={Inbox}> <Route path="messages/:id" component={Message} /> </Route> </Route> </Router>

2.如何配置路由：、
組件式的配置：

const routes = (

<Route>

<Route path="/" component={App}>

<Route path="/houseCheck" getComponent={houseCheck1} />

<Route path="/houseManage" getComponent={houseManage1} />

<Route path="/houseDetail/:houseId" getComponent={houseDetail1} />

<Route path="/roomDetail/:houseId/:roomId" getComponent={roomDetail1} />

<Route path="/popCheck" getComponent={popCheck1} />

<Route path="/map" getComponent={map} />

<Route path="/test" getComponent={test} query={{'name': 'dupi'}} />

</Route>

<Route path="/login" getComponent={Login1}></Route>

</Route>

);

 

字面量的配置：

const routeConfig = [ { path: '/', component: App, indexRoute: { component: Dashboard }, childRoutes: [ { path: 'about', component: About }, { path: 'inbox', component: Inbox, childRoutes: [ { path: '/messages/:id', component: Message }, { path: 'messages/:id', onEnter: function (nextState, replaceState) { replaceState(null, '/messages/' + nextState.params.id) } } ] } ] } ] 

 

配置完成如何利用路由進行跳轉：

React.render(<Router routes={routeConfig} />, document.body)


默認會有一個路由匹配機制：
 history：具體看文檔