react開發簡書-筆記

1.全局樣式引入方式有變化

import { createGlobalStyle } from 'styled-components';

export const Globalstyle = createGlobalStyle` 。。。。。。

`

2.引入圖片方式 在style.js文件中引入圖片路徑後用background:url(${ logoPic })進行引用

import logoPic from '../../statics/logo.png';

export const Logo = styled.aposition: absolute; top:0px; left:0px; display:block; width: 100px; height: 56px; background:url(${logoPic}); background-size: contain;

註解跳轉的時候使用

或者在

export const Logo = styled.a.attrs({ href:'/' } )position: absolute; top:0px; left:0px; display:block; width: 100px; height: 56px; background:url(${logoPic}); background-size: contain;

3.設置placeholder中的css

&::placeholder { color: #999; }

4.在dom中須要傳參數的時候

onFocus={() => handleInputFocus(list)}

5.全部的在jsx中的方法屬性定義的時候能夠在render方法中進行結構賦值

render() { const { focused, handleInputFocus, handleInputBlur, list, login, logout } = this.props; }

6.對於使用immutable的數據的時候注意 若是須要轉換的時候使用 list.toJS(),使用的時候能夠以屬性的方式調用數據a.b 若是直接使用immutable的數據，則使用a.get('b')

7.對於ref的使用，能夠拿到相應的dom元素進行操做

<i ref={(icon) => {this.spinIcon = icon}} className="iconfont spin">

8.一些項目的思想 []在左右float的組件上，父組件添加overflow：hidden，觸發子組件的BFC，可以觸發感知子組件的寬高 []在進行store的引入中，一般創建index.js文件，其中引入reducer，再暴露給外層使用 []在actionCreators中進行後端數據的ajax請求，如若後端未準備好，可以使用本項目中的public路徑下的api目錄下本身建立json文件來模擬數據 []在state中須要更新多個set數據的話，能夠使用state.merge，提升性能，在取state數據的時候使用state.getIn( [ 'header', 'list' ]),取到多層數據 []img標籤中須要添加alt屬性，避免console中出錯

9.在首頁的推薦設置變量到樣式js中 style.js

export const RecommendItem = styled.divwidth: 280px; height: 50px; background: url(${(props) => props.imgUrl}); background-size: contain;; recommend.js

class Recommend extends PureComponent { render() { return ( { this.props.list.map((item) => { return <RecommendItem imgUrl={item.get('imgUrl')} key={item.get('id')}/> }) } ) } }

10.在store中儘可能只有一個出口

index.js中把其餘文件都引用進來

import reducer from './reducer'; import * as actionCreators from './actionCreators'; import * as constants from './constants';

export { reducer, actionCreators, constants };

11.回到頂部的功能實現 render.js定義變量showScroll，並綁定事件handleScrollTop

render() { return ( { this.props.showScroll ? 頂部 : null} ) }

handleScrollTop() { window.scrollTo(0, 0); // 跳轉到left 0 top 0的位置 } 對showScroll數據的store保存 頁面端發起action請求，生命週期中綁定事件

componentDidMount() { this.bindEvents(); } componentWillUnmount() { window.removeEventListener('scroll', this.props.changeScrollTopShow); } bindEvents() { window.addEventListener('scroll', this.props.changeScrollTopShow); } 而後在matDispatch中寫

const mapDispatch = (dispatch) => ({ changeScrollTopShow() { if (document.documentElement.scrollTop > 100) { dispatch(actionCreators.toggleTopShow(true)) }else { dispatch(actionCreators.toggleTopShow(false)) } } }); actionCreators.js

export const toggleTopShow = (show) => ({ type: constants.TOGGLE_SCROLL_TOP, show }) reducer.js中

const defaultState = fromJS({ topicList: [], articleList: [], recommendList: [], writerList: [], articlePage: 1, showScroll: false });

export default (state = defaultState, action) => { switch(action.type) { case constants.CHANGE_HOME_DATA: return changeHomeData(state, action); case constants.ADD_ARTICLE_LIST: return addArticleList(state, action); case constants.TOGGLE_SCROLL_TOP: return state.set('showScroll', action.show); default: return state; } }

從而store中的數據改變了，頁面也就渲染了。

12.使用PureComponent,自動檢測本身組件數據是否有變化，有變化才更新本身（shouldComponentUpdate）