學習過程中記錄的筆記,比較簡略
yarn add react-router-dom
import
from
'react-router-dom'
;
function()
>
>
'/' exact render =
>
<
/route>
'/detail' exact render =
>
<
/route>
<
/div>
<
/browserrouter>
<
/div>
<
/provider>);
}render寫要渲染的元素
加了exact是按準確路徑跳轉
import styled from
'styled-components'
;export
overflow: hidden;
width: 960px;
margin: 0 auto;`;
export
const homeleft = styled.div`
float: left;
margin-left: 15px;
padding-top: 30px;
width: 625px;`;
export
const homeright = styled.div`
width: 240px;
float: right;
`;
'banner-img' src=
" "/
>
export
const homeleft = styled.div`
float: left;
margin-left: 15px;
padding-top: 30px;
width: 625px;
.banner-img
`
前端元件化
粒度掌握好
建立元件套路
import react,
from
'react'
;class
topic
extends
component
}export
default topic;
reducer的模版
import
from
'immutable'
;const defaultstate =
fromjs()
;export
default
(state = defaultstate, action)
=>
}
topic元件使用store 裡的資料
import
from
'react-redux'
;
取資料 mapstatetoprops
map
(mapstatetoprops, mapdispatchtoprops)
主要是**
/api/home/json
外鏈失效了,找了bilibilib幾個圖
實現載入更多功能
加了乙個homelist.json
分頁的做法
返回頂部功能實現
小組件,不值得單獨寫
寫在home下的index.js
componentwillunmount()
bindevents()
元件銷毀的時候記得解除window的繫結
首頁效能優化及路由跳轉
用connect 每個元件的render()都重新執行
react fiber提供的新的元件型別
purecomponent
資料用了immutable 所以purecomponent用起來沒問題
單頁應用的跳轉,無論有多少個頁面,只載入乙個頁面的html
用標籤的話,詳情頁會再載入一遍html
to='/detail'
>
alt=
'' classname=
'list-pic'
src =
/>
'title'
>
<
/h3>
'desc'
>
<
/p>
<
/listinfo>
<
/listitem>
<
/link>
第九章
使用redux管理詳情頁面資料
}>
<
/content>
防轉義!!!
動態路由
引數傳遞
'/detail' exact component =
>
<
/route>
能匹配
在search裡取
動態路由最簡單
z-index;
登陸功能實現
stylecomponent 的 innerref 拿到真實dom 錯了
ref才能拿到dom
import
from
'react-router-dom'
;logout()
難點
登入鑑權及**優化
actioncreator的非同步補catch
**風格統一
再補充補充功能,可做面試專案
我們現在會一次載入全部**,都在bundle.js裡
需要非同步元件,底層比較複雜,此處不講
react-loadable
loadble.js:
import react from
'react'
;import loadable from
'react-loadable'
;const loadablecomponent =
loadable(}
);export
default()
=>
>
;import detail from
'./pages/detail/loadable.js'
;detail的index.js
import
from
'react-router-dom'
;export
default
connect
(mapstate, mapdispatch)
(withrouter
(detail)
;
定製BIEE登入首頁
我安裝biee時預設的語言是中文 1.如果想修改以上,只需使用相同的名字bglogon.jpg即可。2.修改上的文字oracle business intelligence 需要在productmessages.xml 檔案中 修改kmsgproductgeneral的值,該檔案存在於 web ms...
ecshop首頁呼叫商品詳情或者其他商品內容
1.查詢資料庫確定商品詳情欄位goods desc 2.找到lib goods.php 在第290行sql查詢新增查詢欄位g.goods desc 如下 取出所有符合條件的商品資料,並將結果存入對應的推薦型別陣列中 sql select g.goods id,g.goods name,g.goods...
部落格 3 首頁 個人部落格詳情頁
自定義 tag,傳入引數,渲染left menu.html檔案,返回html檔案 匯入page main塊 from django import template from blog import models from django.db.models import count register ...