react简书项目开发笔记

发表于 | 分类于 | 本文总阅读数 次
字数统计: 7,883 | 阅读时长 ≈ 44

项目目录搭建

1
2
3
4
npx create-react-app react-jianshu
cd react-jianshu
# 下载 styled-components 管理样式引用
npm install styled-components --save
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//	style.js
//	将 index.css 中的样式写在 style.js 中，在 index.js 文件中引入
//	styled-components 4.x版本将原来的 injectGlobal 方法用 createGlobalStyle 替换了。用法上也有一些不同
//	使用 createGlobalStyle 生成全局样式
import { createGlobalStyle } from 'styled-components';
createGlobalStyle`
	这里写的是 reset.css 代码，百度搜索复制代码
`

//	index.js
import React from 'react';
import './style';
import './statics/iconfont/iconfont.css'

ReactDOM.render(<App />, document.getElementById('root'));

##

头部 Header 组件布局

src/common/header/style.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
import styled from 'styled-components'
import logoPic from '../../statics/logo.png'
export const HeaderWrapper = styled.div`
	position: relative;
	height: 58px;
	border-bottom: 1px solid #f0f0f0;
	background: red;
`
export const Logo = style.a`
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100px;
	height: 56px;
	background: url(${logoPic}) no-repeat;
	background-size: contain;
`
export const Nav = style.div`
	width: 960px;
	height: 100%;
	padding-right: 70px;
	box-sizing: border-box;
	margin: 0 auto;
`
export const NavItem = style.div`
	line-height: 56px;
	padding: 0 15px;
	font-size: 17px;
	color: #333;
	&.left {
		float: left;
	}
	&.right {
		float: right;
		color: #969696;
	}
	&.active {
		color: #ea6f5a;
	}
`
export const SearchWrapper = styled.div`
	position: relative;
	float: left;

	.iconfont {
		position: absolute;
		right: 5px;
		bottom: 5px;
		width: 30px;
		line-heihgt: 30px;
		border-radius: 15px;
		text-align: center;

		&.focused {
			background: #777;			
			color: #fff;
		}
	}
`
export const NavSearch = styled.input.attrs({
    placeholder: '搜索'
})`
	width: 160px;
	height: 38px;
	padding: 0 30px 0 20px;
	margin-top: 9px;
	margin-left: 20px;
	box-sizing: border-box;
	border: none;
	outline: none;
	border-radius: 19px;
	background: #eee;
	font-size: 14px;
	color: #666;
	&::placeholder {
		color: #999;
	}
	&.focused {
		width: 240px;
	}
	
	&.slide-enter {
		transition: all .2s ease-out;
	}
	&.slide-enter-active {
		width: 240px;
	}
	&.slide-exit {
		transition: all .2s ease-out;
	}
	&.slide-exit-active {
		width: 160px;
	}
`
export const Addition = styled.div`
	position: absolute;
	right: 0;
	top: 0;
	height: 56px;
`
export const Button = styled.div`
	float: right;
	margin-top: 9px;
	margin-right: 20px;
	padding: 0 20px;
	line-height: 38px;
	border-radius: 19px;
	border: 1px solid #ec6149;
	font-size: 14px;
	&.reg {
		color: #ec6149;
	}
	&.writting {
		color: #fff;
		background: #ec6149;
	}
`

src/common/header/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
import React, { Component } from 'react'
import { HeaderWrapper, Logo, Nav, NavItem, NavSearch, Addition, Button } from './style'

class Header extends Component {
    constructor(props) {
        super(props)
        this.state = {
            focused: false
        }
    }
    
    render() {
        return (
        	<HeaderWrapper>
            	<Logo href="/" />
                <Nav>
                	<NavItem className="left active">首页</NavItem>
                    <NavItem className="left">下载App</NavItem>
                    <NavItem className="right">登录</NavItem>
                    <NavItem className="right">
                    	<i className="iconfont">&#xe636;</i>
                    </NavItem>
                    <SearchWrapper>
                        <CSSTransition
                            in={this.state.focused}
                            timeout={200}
                            classNames="slide">
                        	<NavSearch
                            className={this.state.focused ? 'focused' : ''}
                            onFocus={this.handleInputFocus}
                            onBlur={this.handleInputBlur}></NavSearch>
                        </CSSTransition>
                        <i className={this.state.focused ? 'focused iconfont' : 'iconfont'}>&#xe614;</i>
                    </SearchWrapper>
                </Nav>
                <Addition>
         			<Button className="writting">
                        <i className="iconfont">&#xe615;</i>
                        写文章
                    </Button>
                	<Button className="reg">注册</Button>
                </Addition>
            </HeaderWrapper>
        )
    }
    
    handleInputFocus = () => {
        this.setState({
            focused: true
        })
    }
    handleInputBlur = () => {
        this.setState({
            focused: false
        })
    }
}
export default Header

App.js

1
2
3
4
5
6
7
8
import Header from './common/header'
class App extends Component {
    render() {
        return (
        	<Header />
        )
    }
}

使用 iconfont 嵌入头部图标

在 iconfont.cn 查找下载需要的 字体图标；并在 index.js 文件中引入iconfont.css 文件

代码实现参考 Header 组件布局

搜索框动画效果实现

首先设置 onFoucs 和 onBlur 的样式，具体代码参考 Header 组件布局

安装第三方动画模块 npm install react-transition-group --save
在 header/index.js 文件中引入： import { CSSTransition } from 'react-transition-group'
使用 <CSSTransition> 标签包裹 <NavSearch> 组件
设置 .slide-enter、.slide-enter-active、.slide-exit、.slide-exit-active样式

1
2
3
4
5
6
7
8
9
<CSSTransition
    in={this.state.focused}
    timeout={200}
    className="slide">
    <NavSearch
    className={this.state.focused ? 'focused' : ''}
    onFocus={this.handleInputFocus}
    onBlur={this.handleInputBlur}></NavSearch>
</CSSTransition>

使用 React-Redux 进行数据管理

下载 npm install redux react-redux --save

src/store/index.js

1
2
3
4
5
6
import { createStore } from 'redux'
import reducer from './reducer'

const store = createStore(reducer);

export default store;

src/store/reducer.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* 默认数据 */
const defaultState = {
    focused: false
}

export default (state = defaultState, action) => {
    if (action.type === 'search_focus') {
        return {
            focused: true
        }
    }
    if (action.type === 'search_blur') {
        return {
            focused: false
        }
    }
    return state;
}

在 App.js 文件中引入 store：

1
2
3
4
5
6
7
8
9
10
11
import store from './store'
import { Provider } from 'react-redux'

return (
    /* 引入并使用 Provider，在 Provider 包裹起来的区域中可以使用 store 中的数据 */
	<div className="App">
      <Provider store={store}>
        <Header />
      </Provider>
    </div>
)

在 header 组件中使用 store 中的数据

引入 connect： import { connect } from 'react-redux'
修改 header 组件中所有的数据引用：将 this.state.focused 修改为 this.props.focused
修改 handleInputFoucs 和 handleInputBlur 方法以及调用 this.props.handleInputFocus

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import { connect } from 'react-redux'

//	删除 this.store 

/* 组件和 store 做连接时， store 中的数据如何映射到 Props 上 */
const mapStateToProps = (state) => {
    return {
        focused: state.focused
    }
}

/* 组件在和 store 连接时，组件要修改 store 数据，需要调用 dispatch 方法 */
const mapDispathToProps = (dispatch) => {
    return {
        handleInputFoucs() {
            const action = {
                type: 'search_focus'
            };
            dispatch(action);
        },
        handleInputBlur() {
            const action = {
                type: 'search_blur'
            };
            dispatch(action);
        }
    }
}

export default connect(mapStateToProps, mapDispathToProps)(Header)

代码优化：Header 组件为 无状态组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import React from 'react'
import { CSSTransition } from 'react-transition-group'
import { connect } from 'react-redux'
import { HeaderWrapper, Logo, Nav, NavItem, SearchWrapper, NavSearch, Addition, Button } from './style'

const Header = (props) => {
    return (
        <HeaderWrapper>
            <Logo href="/" />
            <Nav>
                <NavItem className="left active">首页</NavItem>
                <NavItem className="left">下载App</NavItem>
                <NavItem className="right">登录</NavItem>
                <NavItem className="right">
                    <i className="iconfont">&#xe601;</i>
                </NavItem>
                <SearchWrapper>
                    {/* 搜索框 添加动画效果 */}
                    <CSSTransition
                        in={props.focused}
                        timeout={500}
                        classNames="slide">
                        <NavSearch
                            className={props.focused ? 'focused' : ''}
                            onFocus={props.handleInputFocus}
                            onBlur={props.handleInputBlur}></NavSearch>
                    </CSSTransition>
                    <i className={props.focused ? 'focused iconfont' : 'iconfont'}>&#xe60b;</i>
                </SearchWrapper>
            </Nav>
            <Addition>
                <Button className="writting">
                    <i className="iconfont">&#xe66f;</i>
                    写文章
                    </Button>
                <Button className="reg">注册</Button>
            </Addition>
        </HeaderWrapper>
    )
}

const mapStateToProps = (state) => {
    return {
        focused: state.focused
    }
}
const mapDispathToProps = (dispatch) => {
    return {
        handleInputFocus () {
            const action = {
                type: 'search_focus'
            }
            dispatch(action)
        },
        handleInputBlur () {
            const action = {
                type: 'search_blur'
            }
            dispatch(action)
        }
    }
}

export default connect(mapStateToProps, mapDispathToProps)(Header);

使用 combineReducers 完成对数据的拆分管理

如果将所有的数据全部存放在 reduce.js 中，如果将来要管理的数据变得非常多的时候，是很不方便维护的，这时可以对 reducer 进行拆分：

修改 store/index.js 文件内容，方便 开发工具 的使用
参考：https://github.com/zalmoxisus/redux-devtools-extension

1
2
3
4
5
6
import { createStore, compose } from 'redux'
import reducer from './reducer'

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, composeEnhancers())
export default store

对数据进行拆分
header/store/reducer.js

1
//	将 store/reducer.js 文件中的代码剪贴到 header/store/reducer.js 文件中

header/store/index.js

1
2
3
//	直接在 reducer.js 中引入 header/store/reducer.js 路径很长，可以这样处理，然后引入这个文件
import reducer from './reducer';
export { reducer }

store/reducer.js

1
2
3
4
5
6
7
8
//	将拆分出去的数据合并
import { combineReducers } from 'redux'
import { reducer as headerReducer } from '../common/header/store'

const reducer = combineReducers({
    header: headerReducer
});
export default reducer;

header/index.js

1
2
3
4
5
6
//	修改 header/index.js 文件中的 mapStateToProps
const mapStateToProps = (state) => {
    return {
        focused: state.header.focused
    }
}

actionCreators 与 constants 的拆分

header/store/actionCreators.js

1
2
3
4
5
6
7
import * as constants from './constants'
export const searchFocus = () => ({
    type: constants.SEARCH_FOCUS
})
export const searchBlur = () => ({
    type: constants.SEARCH_BLUR
})

header/index.js

1
2
3
4
5
6
7
8
9
10
11
12
import { actionCreators } from './store'

const mapDispathToProps = (dispatch) => {
    return {
        handleInputFocus () {
            dispatch(actionCreators.searchFoucs())
        },
        handleInputBlur () {
           	dispatch(actionCreators.searchBlur())
        }
    }
}

header/store/constants.js

1
2
export const SEARCH_FOCUS = 'header/SEARCH_FOCUS';
export const SEARCH_BLUR = 'header/SEARCH_BLUR';

header/store/reducer.js

1
2
3
4
5
6
7
8
9
10
11
import * as constants from './constants'
if (action.type === constants.SEARCH_FOCUS) {
        return {
            focused: true
        }
    }
    if (action.type === constants.SEARCH_BLUR) {
        return {
            focused: false
        }
    }

header/store/index.js

1
2
3
4
5
import reducer from './reducer';
import * as actionCreators from './actionCreators';
import * as constants from './constants'

export { reducer, actionCreators, constants }

使用 lmmutable.js 来管理 store 中的数据

安装： npm install immutable --save

header/store/reducer.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { fromJS } from 'immutable'
const defaultState = fromJS({
    focused: false
})
export default (state = defaultState, action) => {
    if (action.type === constants.SEARCH_FOCUS) {
        //	immutable 对象的 set 方法，会结合之前的 immutable 对象的值
        //	和设置的值，返回一个全新的对象
        return state.set('focused', true)
    }
    if (action.type === constants.SEARCH_BLUR) {
        return state.set('focused', false)
    }
    return state;
}

header/index.js

1
2
3
4
5
const mapStateToProps = (state) => {
    return {
        focused: state.header.get('focused')
    }
}

使用 redux-immutable 统一数据格式

安装 npm install redux-immutable --save

store/reducer.js

1
import { combineReducers } from 'redux-immutable'

header/index.js

1
2
3
4
5
6
const mapStateToProps = (state) => {
    return {
        //	focused: state.get('header').get('focused')
        focused: state.getIn(['header', 'focused'])
    }
}

热门搜索样式布局

header.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import { SearchInfo, SearchInfoTitle, SearchInfoSwitch, SearchInfoList, SearchInfoItem } from './style'

/* 搜索框获取焦点，展示 热门搜索 内容 */
const getListArea = (show) => {
    if (show) {
        return (
        	<SearchInfo>
                <SearchInfoTitle>
                    热门搜索
                    <SearchInfoSwitch>换一批</SearchInfoSwitch>
                </SearchInfoTitle>
                <SearchInfoList>
                    <SearchInfoItem>教育</SearchInfoItem>
                    <SearchInfoItem>教育</SearchInfoItem>
                    <SearchInfoItem>教育</SearchInfoItem>
                    <SearchInfoItem>教育</SearchInfoItem>
                    <SearchInfoItem>教育</SearchInfoItem>
                </SearchInfoList>
            </SearchInfo>
        )
    } else {
        return null;
    }
}


<SearchWrapper>
	{ getListArea(props.focused) }
</SearchWrapper>


//	style.js
export const SearchInfo = styled.div`
	position: absolute;
	left: 0;
	top: 56px;
	width: 240px;
	padding: 0 20px;
	box-shadow: 0 0 8px rgba(0,0,0,.2);
`
export const SearchInfoTitle = styled.div`
	margin-top: 20px;
	margin-bottom: 15px;
	line-height: 20px;
	font-size: 14px;
	color: #969696;
`
export const SearchInfoSwitch = styled.span`
	float: right;
	font-size: 13px;
`
export const SearchInfoList = styled.div`
	overflow: hidden;
`
export const SearchInfoItem = styled.a`
	display: block;
	float: left;
	line-height: 20px;	
	padding: 0 5px;
	margin-right: 10px;
	margin-bottom: 15px;
	font-size: 12px;
	border: 1px solid #ddd;
	color: #787878;
	border-radius: 3px;
`

AJAX 获取推荐数据

安装： npm install axios --save

将 Header 先恢复为普通组件

1
2
3
4
5
class Header extend Component {
    //	...
}

{ this.getListArea(this.props.focused) }

异步请求 ajax 需要放在 redux-thunk
安装：npm install redux-thunk --save
在 store/index.js 文件中引入：import thunk from 'redux-thunk'

1
2
3
4
5
import { createStore, compose, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
const store = createStore(reducer, composeEnhancers(
	applyMiddleware(thunk)
))

有了 redux-thunk 就可以在组件中进行异步操作了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
//	header/index.js
handleInpitFoucs() {
    //	输入框获取焦点，发送请求，获取数据
    dispatch(actionCreators.getList())
}

const mapStateToProps = (state) => {
    return {
        focused: state.getIn(['header', 'focused']),
        list: state.getIn(['header', 'list'])
    }
}
//	将 getListArea 的函数调用参数删除， 直接用 if(this.props.focused) 来判断
getListArea() {
    if(this.props.focused){
        return (
        	<SearchInfoList>
            	{
                    this.props.list.map((item) => {
            			return <SearchInfoItem key={item}>{item}</SearchInfoItem>
        			})
                }
            </SearchInfoList>
        )
    }
}


//	header/store/actionCreators.js
import { fromJS } from 'immutable'
import axios from 'axios'
const changeList = (data) => ({
    type: constants.CHANGE_LIST,
    data: fromJS(data)
})
export const getList = () => {
    return (dispatch) => {
        axios.get('/api/headerList.json').then((res) => {
            const data = res.data
            dispatch(changeList(data.data))
        }).catch(() => {
            
        })
    }
}


//	public/api/headerList.json
{
    "success": true,
    "data": ["gaokao","asfdsa","afda"]
}


//	header/store/constants.js
export const CHANGE_LIST = 'header/CHANGE_LIST'

//	header/store/reducer.js
const defaultState = fromJS({
    focused: false,
    list: []
})
if (action.type === constants.CHANGE_LIST) {
    return state.set('list', action.data)
}

热门搜索换页功能实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
//	header/store/reducer.js
const defaultState = fromJS({
    focused: false,
    list: [],
    mouseIn: false,
    page: 1,
    totalPage: 1
})
export default (state = defaultState, action) => {
    switch (action.type) {
        case constants.SEARCH_FOCUS:
            return state.set('focused', true);
        case constants.SEARCH_BLUR:
            return state.set('focused', false);
        case constants.CHANGE_LIST:
            return state.merge({
                list: action.data,
                totalPage: action.totalPage
            })
        case constants.MOUSE_ENTER:
            return state.set('mouseIn', true);
        case constants.MOUSE_LEAVE:
            return state.set('mouseIn', false);
        case constants.CHANGE_PAGE:
            return state.set('page', action.page);
    
        default:
            return state;
    }
}

//	header/store/actionCreators.js
const changeList = (data) => ({
    //	计算页码
    totalPage: Math.ceil(data.length / 10)
})
export const mouseEnter = () => ({
    type: constants.MOUSE_ENTER
})
export const mouseLeave = () => ({
    type: constants.MOUSE_LEAVE
})
export const changePage = (page) => ({
    type: constants.CHANGE_PAGE,
    page
})

//	constants.js
export const MOUSE_ENTER = 'header/MOUSE_ENTER'
export const MOUSE_LEAVE = 'header/MOUSE_LEAVE'
export const CHANGE_PAGE = 'header/CHANGE_PAGE'

header/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
getListArea () {
    const { focused, list, page, totalPage, mouseIn, handleMouseEnter, handleMouseLeave, handleChangePage } = this.props
    const newList = list.toJS()
    const pageList = []

    if (newList.length) {
        for (let i = (page - 1) * 10; i < page * 10; i++) {
            pageList.push(
                <SearchInfoItem key={newList[i]}>{newList[i]}</SearchInfoItem>
            )
        }
    }

    if (focused || mouseIn) {
        return (
            <SearchInfo onMouseEnter={handleMouseEnter}
                onMouseLeave={handleMouseLeave}>
                <SearchInfoTitle>
                    热门搜索
                                <SearchInfoSwitch onClick={() => handleChangePage(page, totalPage)}>换一批</SearchInfoSwitch>
                </SearchInfoTitle>
                <SearchInfoList>
                    {pageList}
                </SearchInfoList>
            </SearchInfo>
        )
    } else {
        return null;
    }
}

const mapStateToProps = (state) => {
    return {
        //  focused: state.get('header').get('focused')
        focused: state.getIn(['header', 'focused']),
        list: state.getIn(['header', 'list']),
        page: state.getIn(['header', 'page']),
        totalPage: state.getIn(['header', 'totalPage']),
        mouseIn: state.getIn(['header', 'mouseIn'])
    }
}

const mapDispathToProps = (dispatch) => {
    return {
        handleMouseEnter() {
            dispatch(actionCreators.mouseEnter())
        },
        handleMouseLeave() {
            dispatch(actionCreators.mouseLeave())
        },
        handleChangePage(page, totalPage) {
            if (page < totalPage) {
                dispatch(actionCreators.changePage(page + 1))
            } else {
                dispatch(actionCreators.changePage(1))
            }
        }
    }
}

换页旋转动画效果实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//	header/index.js
<SearchInfoSwitch onClick={ () => handleChangePage(page, totalPage, this.spinIcon) }>
	<i ref={(icon) => {this.spinIcon = icon}} className="iconfont spin">&#xe66f;</i>
	换一批
</SearchInfoSwitch>

handleChangePage(page, totalPage, spin) {
    let originAngle = spin.style.transform.replace(/[^0-9]/ig, '')
    if (originAngle) {
        originAngle = parseInt(originAngle, 10)
    } else {
        originAngle = 0
    }
    spin.style.transform = 'rotate(' + (originAngle + 360) + 'deg)'
}


//	header/style.js
//	将 SearchWrapper 中的 .iconfont 替换为 .zoom，并给 index.js 中放大镜的字体图标添加 zoom 样式类
export const SearchInfoSwitch = styled.span`
    float: right;
    font-size: 13px;
	cursor: pointer;
	.spin {
		display: block;
		float: left;
		font-size: 12px;
		margin-right: 2px;
		transition: all .2s ease-in;
		transform-origin: center center;
	}
`

避免无意义的请求发送

每次点击搜索框都会发送请求

1
2
3
4
5
6
7
8
9
10
<NavSearch
	className={focused ? 'focused' : ''}
	onFocus={ () => handleInputFocus(list) }
	onBlur={handleInputBlur}></NavSearch>

handleInputFocus (list) {
    if (list.size === 0) {
        dispatch(actionCreators.getList())
    }
}

在 React 中使用路由功能

路由就是根据 URL 的不同显示不同的内容

安装： npm install react-router-dom --save

1
2
3
4
5
6
7
8
9
10
11
12
13
//	App.js
import { BrowserRouter, Route } from 'react-router-dom'

<div>
	<Header />
    <BrowserRouter>
        <div>
    		<Route path='/' exact render={() => <div>home</div>}></Route>
        	<Route path='/detail' exact render={() => <div>detail</div>}></Route>
    	</div>
    </BrowserRouter>    
</div>
//	exact 的作用：加上 exact 只有路径完全匹配时才会显示组件，否则在匹配 /detail 时，home 和 detail 都会匹配到

首页组件的拆分

src/pages/home/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React, { Component } from 'react'
import Topic from './components/Topic'
import List from './components/List'
import Recommend from './components/Recommend'
import Writer from './components/Writer'
import { HomeWrapper, HomeLeft, HomeRight } from './style'
class Home extends Component {
    render() {
        return (
            <HomeWrapper>
            	<HomeLeft>
                	<img className="banner-img" src="https://upload.jianshu.io/admin_banners/web_images/4592/22f5cfa984d47eaf3def6a48510cc87c157bf293.png?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540" />
                    <Topic />
                    <List />
                </HomeLeft>
                <HomeRight>
                	<Recommend />
                    <Writer />
                </HomeRight>
            </HomeWrapper>
        )
    }
}
export default Home

src/pages/home/style.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import styled from 'styled-components'

export const HomeWrapper = styled.div`
	overflow: hidden;
	width: 960px;
	margin: 0 auto;
`
export const HomeLeft = styled.div`
	float: left;
	margin-left: 15px;
	padding-top: 30px;
	width: 625px;
	.banner-img {
		width: 625px;
		height: 270px;
	}
`
export const HomeRight = styled.div`
	width: 280px;
	float: right;
`

src/pages/detail/index.js

1
2
3
4
5
6
7
8
9
import React, { Component } from 'react'
class Detail extends Component {
    render() {
        return (
            <div>Detail</div>
        )
    }
}
export default Detail

App.js

1
2
3
4
5
6
7
import Home from './pages/home'
import Detail from './pages/detail'

<div>
	<Route path='/' exact component={Home}></Route>
	<Route path='/detail' exact component={Detail}></Route>    
</div>

src/pages/home/components/List.js

1
2
3
4
5
6
7
8
9
import React, { Component } from 'react'
class List extends Component {
    render() {
        return (
            <div>List</div>
        )
    }
}
export default List

src/pages/home/components/Recommend.js

1
2
3
4
5
6
7
8
9
import React, { Component } from 'react'
class Recommend extends Component {
    render() {
        return (
            <div>Detail</div>
        )
    }
}
export default Recommend

src/pages/home/components/Topic.js

1
2
3
4
5
6
7
8
9
import React, { Component } from 'react'
class Topic extends Component {
    render() {
        return (
            <div>Topic</div>
        )
    }
}
export default Topic

src/pages/home/components/Writer.js

1
2
3
4
5
6
7
8
9
import React, { Component } from 'react'
class Writer extends Component {
    render() {
        return (
            <div>Writer</div>
        )
    }
}
export default Writer

首页专题区域布局及 reducer 的设计

pages/home/components/Topic.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { connect } from 'react-redux'
import { TopicWrapper, TopicItem } from '../style'

return (
    <TopicWrapper>
        {
            this.props.list.map((item) => {
                return (
                	<TopicItem key={item.get('id')}>
                        <img className='topic-pic' src={item.get('imgUrl')} alt='' />
                        {item.get('title')}
                    </TopicItem>
                )
            })
        }
    </TopicWrapper>
)

const mapState = (state) => ({
    list: state.getIn(['home', 'topicList'])
})
export default connect(mapState)(Topic)

pages/home/style.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
export const TopicWrapper = styled.div`
	overflow: hidden;
	padding: 20px 0 10px 0;
	margin-left: -18px;
	border-bottom: 1px solid #dcdcdc;
`
export const TopicItem = styled.div`
	float: left;
	height: 32px;
	line-height: 32px;
	margin-left: 18px;
	margin-bottom: 18px;
	padding-right: 10px;
	font-size: 14px;
	color: #000;
	border: 1px solid #dcdcdc;
	border-radius: 4px;
	background: #f7f7f7;
	.topic-pic {
		display: block;
		float: left;
		width: 32px;
		height: 32px;
		margin-right: 10px;
	}
`

pages/home/store/reducer.js
管理 Home 页面中的数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { fromJS } from 'immutable';
const defaultState = fromJS({
    topicList: [{
        id: 1,
        title: '社会热点',
        imgUrl: 'imgUrl'
    },{
        id: 2,
        title: '手绘',
        imgUrl: 'imgUrl'
    }]
});
export default (state = defaultState, action) => {
    switch(action.type) {
        default:
            return state;
    }
}


//	pages/home/store/index.js
import reducer from './reducer';
export { reducer }

src/store/reducer.js

1
2
3
4
import { reducer as HomeReducer } from '../pages/home/store'
const reducer = combineReducers({
    home: homeReducer
})

首页文章列表制作

home/components/List.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { ListItem, ListInfo } from '../style'
import { connect } from 'react-redux'

const { list } = this.props
return (
    <div>
    	{
            list.map((item) => {
                return (
                	<ListItem key={item.get{'id'}}>
                        <img className='pic' src={item.get(imgUrl)} alt='' />
                        <ListInfo>
                            <h3 className='title'>{item.get('title')}</h3>
                            <p className='desc'>{item.get('desc')}</p>
                        </ListInfo>
                    </ListItem>
                )
            })
        }
    </div>
)

const mapState = (state) => ({
    list: state.getIn(['home', 'articleList'])
})
export default connect(mapState)(List)

home/style.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
export const ListItem = styled.div`
	overflow: hidden;
	padding: 20px 0;
	border-bottom: 1px solid #dcdcdc;
	.pic {
		display: block;
		width: 125px;
		height: 100px;
		float: right;
		border-radius: 10px;
	}
`
export const ListInfo = styled.div`
	width: 500px;
	float: left;
	.title {
		line-height: 27px;
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}
	.desc {
		line-height: 24px;
		font-size: 13px;
		color: #999;
	}
`

pages/home/store/reducer.js

1
2
3
4
5
6
7
8
const defaultState = formJS({
    articleList: [{
        id: 1,
        title: 'title',
        desc: 'desc',
        imgUrl: 'imgUrl'
    }]
})

首页推荐部分

home/components/Recommend.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { connect } from 'react-redux'
import { RecommendWrapper, RecommendItem } from '../style'
return (
	<RecommendWrapper>
        {
            this.props.list.map((item) => {
                return <RecommendItem imgUrl={item.get('imgUrl')} key={item.get('id')}/>
            })
        }
    </RecommendWrapper>
)

const mapState = (state) => ({
    list: state.getIn(['home', 'recommendList'])
})
export default connect(mapState, null)(Recommend)

pages/home/style.js

1
2
3
4
5
6
7
8
9
10
export const RecommendWrapper = styled.div`
	margin: 30px 0;
	width: 280px;
`
export const RecommendItem = styled.div`
	width: 280px;
	height: 50px;
	background: url(${(props) => props.imgUrl})
	background-size: contain;
`

pages/home/store/reducer.js

1
2
3
4
5
6
const defaultState = formJS({
    recommendList: [{
        id: 1,
        imgUrl: 'imgUrl'
    }]
})

home/components/Writer.js

1
2
3
4
5
6
import { WriterWrapper } from '../style'
return (
	<WriterWrapper>
        WriterWrapper
    </WriterWrapper>
)

pages/home/style.js

1
2
3
4
5
6
7
8
export const WriterWrapper = styled.div`
	width: 278px;
	border: 1px solid #dcdcdc;
	border-radius: 3px;
	height: 300px;
	line-height: 300px;
	text-align: center;
`

首页异步数据获取

api/home.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
{
    "success": true,
    "data": {
        "topicList": [
            {
                "id": 1,
                "title": "社会热点",
                "imgUrl": "//upload.jianshu.io/collections/images/506/165584954978.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/64/h/64/format/webp"
            },
            {
                "id": 2,
                "title": "手绘",
                "imgUrl": "//upload.jianshu.io/collections/images/16/computer_guy.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/64/h/64/format/webp"
            }
        ],
        "articleList": [
            {
                "id": 1,
                "title": "编程中，有哪些好的习惯值得我们一开始就坚持？",
                "desc": "说一些基础的、适用于初学者的好习惯。 ＃1 - 在开始编码之前先规划和组织代码 在项目的开始阶段，不要上手直接写代码，一定要先确定代码的分层和架...",
                "imgUrl": "//upload-images.jianshu.io/upload_images/16557762-b59fc4d5a04a9f37?imageMogr2/auto-orient/strip|imageView2/1/w/360/h/240"
            },
            {
                "id": 2,
                "title": "编程中，有哪些好的习惯值得我们一开始就坚持？",
                "desc": "说一些基础的、适用于初学者的好习惯。 ＃1 - 在开始编码之前先规划和组织代码 在项目的开始阶段，不要上手直接写代码，一定要先确定代码的分层和架...",
                "imgUrl": "//upload-images.jianshu.io/upload_images/16557762-b59fc4d5a04a9f37?imageMogr2/auto-orient/strip|imageView2/1/w/360/h/240"
            },
            {
                "id": 3,
                "title": "编程中，有哪些好的习惯值得我们一开始就坚持？",
                "desc": "说一些基础的、适用于初学者的好习惯。 ＃1 - 在开始编码之前先规划和组织代码 在项目的开始阶段，不要上手直接写代码，一定要先确定代码的分层和架...",
                "imgUrl": "//upload-images.jianshu.io/upload_images/16557762-b59fc4d5a04a9f37?imageMogr2/auto-orient/strip|imageView2/1/w/360/h/240"
            }
        ],

        "recommendList": [
            {
                "id": 1,
                "imgUrl": "//cdn2.jianshu.io/assets/web/banner-s-club-aa8bdf19f8cf729a759da42e4a96f366.png"
            },
            {
                "id": 2,
                "imgUrl": "//cdn2.jianshu.io/assets/web/banner-s-7-1a0222c91694a1f38e610be4bf9669be.png"
            }
        ]
    }
}

src/pages/home/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { connect } from 'react-redux'
import axios from 'axios'

render(){}
componentDidMount() {
    axios.get('/api/home.json').then((res) => {
        const result = res.data.data
        const action = {
            type: 'change_home_data',
            topicList: result.topicList,
            articleList: result.articleList,
            recommendList: result.recommendList
        }
        this.props.changeHomeData(action)
    }).catch(() => {
        
    })
}

const mapDispatch = (dispatch) => ({
    changeHomeData(action){
        dispatch(action)
    }
})
export default connect(null, mapDispatch)(Home)

home/store/reducer.js

1
2
3
4
5
6
7
8
9
10
switch(action.type) {
    case 'change_home_data':
        return state.merge({
            topicList: fromJS(action.topicList),
            articleList: fromJS(action.articleList),
            recommendList: fromJS(action.recommendList)
        })
    default:
        return state 
}

异步操作代码拆分优化

pages/home/index.js

1
2
3
4
5
6
7
8
9
10
11
12
import { actionCreators } from './store'

componentDidMount() {
    this.props.changeHomeData()
}

const mapDispatch = (dispatch) => ({
    changeHomeData(){
        dispatch(actionCreators.getHomeInfo())
    }
})
export default connect(null, mapDispatch)(Home)

pages/home/store/actionCreators.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import axios from 'axios'	//	删除 index.js 中的 axios 引入
import * as constants from './constants'

const changeHomeData = (result) => ({
	type: constants.CHANGE_HOME_DATA,
	topicList: result.topicList,
	articleList: result.articleList,
	recommendList: result.recommendList
})

export const getHomeInfo = () => {
    return (dispatch) => {
        axios.get('/api/home.json').then((res) => {
            const result = res.data.data
            dispatch(changeHomeData(result))
		})
    }
}

pages/home/store/constants.js

1
export const CHANGE_HOME_DATA = 'home/CHANGE_HOME_DATA'

home/store/reducer.js

1
2
3
4
5
6
7
8
9
10
11
12
import * as constants from './constants'

switch(action.type) {
    case constants.CHANGE_HOME_DATA:
        return state.merge({
            topicList: fromJS(action.topicList),
            articleList: fromJS(action.articleList),
            recommendList: fromJS(action.recommendList)
        })
    default:
        return state 
}

pages/home/store/index.js

1
2
3
import * as actionCreators from './actionCreators'
import * as constants from './constants'
export { reducer, actionCreators, constants }

实现加载更多功能

pages/home/components/List.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import { LoadMore } from '../style'
import { actionCreators } from '../store'

const { list, getMoreList, page } = this.props
return(
    <div>
    	{}
        <LoadMore onClick={() => getMortList(page)}>加载更多</LoadMore>
    </div>
)

const mapState = (state) => ({
    page: state.getIn(['home', 'articlePage'])
})
const mapDispatch = (dispatch) => ({
    getMoreList(page) {
        dispatch(actionCreators.getMoreList(page))
    }
})
export default connect(mapState, mapDispatch)(List)


//	home/style.js
export const LoadMore = styled.div`
	width: 100%;
	height: 40px;
	line-height: 40px;
	margin: 30px 0;
	background: #a5a5a5;
	text-align: center;
	border-radius: 20px;
	color: #fff;
	cursor: pointer;
`

pages/home/store/actionCreators.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import { fromJS } from 'immutable'

const addHomeList = (list, nextPage) => ({
    type: constants.ADD_ARTICLE_LIST,
    list: fromJS(list),
    nextPage
})

export const getMortList = (page) => {
    return (dispatch) => {
        axios.get('/api/homeList.json?page=' + page).then((res) => {
            const result = res.data.data
            dispatch(addHomeList(result, page + 1))
        })
    }
}

//	pages/home/store/constants.js
export const ADD_ARTICLE_LIST = 'home/ADD_ARTICLE_LIST'

//	pages/home/store/reducer.js
const defaultState = fromJS({
    articlePage: 1
})


case constants.ADD_ARTICLE_LIST:
	return state.merge({
        'articleList': state.get('articleList').concat(action.list),
        'articlePage': action.nextPage
    })

public/api/homeList.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
    "success": true,
    "data": [
                {
                    "id": 4,
                    "title": "编程中，有哪些好的习惯值得我们一开始就坚持？",
                    "desc": "说一些基础的、适用于初学者的好习惯。 ＃1 - 在开始编码之前先规划和组织代码 在项目的开始阶段，不要上手直接写代码，一定要先确定代码的分层和架...",
                    "imgUrl": "//upload-images.jianshu.io/upload_images/16557762-b59fc4d5a04a9f37?imageMogr2/auto-orient/strip|imageView2/1/w/360/h/240"
                },
                {
                    "id": 5,
                    "title": "编程中，有哪些好的习惯值得我们一开始就坚持？",
                    "desc": "说一些基础的、适用于初学者的好习惯。 ＃1 - 在开始编码之前先规划和组织代码 在项目的开始阶段，不要上手直接写代码，一定要先确定代码的分层和架...",
                    "imgUrl": "//upload-images.jianshu.io/upload_images/16557762-b59fc4d5a04a9f37?imageMogr2/auto-orient/strip|imageView2/1/w/360/h/240"
                },
                {
                    "id": 6,
                    "title": "编程中，有哪些好的习惯值得我们一开始就坚持？",
                    "desc": "说一些基础的、适用于初学者的好习惯。 ＃1 - 在开始编码之前先规划和组织代码 在项目的开始阶段，不要上手直接写代码，一定要先确定代码的分层和架...",
                    "imgUrl": "//upload-images.jianshu.io/upload_images/16557762-b59fc4d5a04a9f37?imageMogr2/auto-orient/strip|imageView2/1/w/360/h/240"
                }
        ]
}

返回顶部

pages/home/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
import { BackTop } from './style'

handleScrollTo(){
    window.scrollTop(0, 0)
}

return(
    <HomeWrapper>
        { this.props.showScroll ? <BackTop onClick={this.handleScrollTop}>返回顶部</BackTop> : null }
    </HomeWrapper>
)

componentDidMount() {
    this.bindEvents()
}
componentWillUnmount() {
    window.removeEventListener('scroll', this.props.changeScrollTopShow)
}
bindEvents() {
    window.addEventListener('scroll', this.props.changeScrollTopShow)
}


const mapState = (state) => ({
    showScroll: state.getIn(['home', 'showScroll'])
})
const mapDispatch = (dispatch) => ({
    changeScrollTopShow() {
        if (document.documentElement.scrollTop > 300) {
            dispatch(actionCreators.toggleTopShow(true))
        } else {
            dispatch(actionCreators.toggleTopShow(false))
        }
    }
})
export default connect(mapState, mapDispatch)(Home)


//	pages/home/store/actionCreators.js
export const toggleTopShow = (show) => ({
    type: constants.TOGGLE_SCROLL_TOP,
    show
})
//	pages/home/store/constants.js
export const TOGGLE_SCROLL_TOP = 'home/TOGGLE_SCROLL_TOP'
//	pages/home/store/reducer.js
showScroll: false

case constants.TOGGLE_SCROLL_TOP:
	return state.set('showScroll', action.show)

//	pages/home/style.js
export const BackTop = styled.div`
	position: fixed;
	right: 100px;
	bottom: 100px;
	width: 60px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	border: 1px solid #ccc;
	font-size: 14px;
`

首页性能优化及路由跳转

pages/home/index.js

1
2
3
4
5
6
7
8
9
10
11
12
import React, { PureComponent } from 'react'
class Home extends PureComponent {}

//	pages/home/components/List.js
import { Link } from 'react-router-dom'
class Home extends PureComponent {
    return (
    	<Link key={index} to='/detail'><ListItem></ListItem></Link>
    )
}

//	Topic.js 等四个文件也这样 将 Component 替换为 PureComponent

src/app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//	src/common/header/index.js
import { Link } from 'react-router-dom'
return (
    <HeaderWrapper><Link to='/'><Logo /></Link></HeaderWrapper>
)
//	src/common/header/style.js
export const Logo = styled.div``


return (
    <div className="App">
      <Provider store={store}>
        <BrowserRouter>
          <div>
            <Header />
            <Route path='/' exact component={Home}></Route>
            <Route path='/detail' exact component={Detail}></Route>
          </div>
        </BrowserRouter>
      </Provider>
    </div>
  );

详情页面布局

src/pages/detail/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { DetailWrapper, Header, Content } from './style'

return (
    <DetailWrapper>
    	<Header>文章标题</Header>
        <Content>
        	<img src='https://upload-images.jianshu.io/upload_images/16557762-b59fc4d5a04a9f37?imageMogr2/auto-orient/' alt='' />
            <p><b>文章内容文章内容文章内容文章内容文章内容文章内容</b></p>
            <p>文章内容文章内容文章内容文章内容文章内容文章内容</p>
            <p>文章内容文章内容文章内容文章内容文章内容文章内容</p>
            <p>文章内容文章内容文章内容文章内容文章内容文章内容</p>
            <p>文章内容文章内容文章内容文章内容文章内容文章内容</p>
            <p>文章内容文章内容文章内容文章内容文章内容文章内容</p>
        </Content>
    </DetailWrapper>
)

src/pages/detail/style.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import styled from 'styled-components'

export const DetailWrapper = styled.div`
	overflow: hidden;
	width: 620px;
	margin: 0 auto;
	padding-bottom: 100px;
`
export const Header = styled.div`
	margin: 50px 0 20px 0;
	line-height: 44px;
	font-size: 34px;
	color: #333;
	font-weight: bold;
`
export const Content = styled.div`
	color: #2f2f2f;
	img {
		width: 100%;
	}
	p {
		margin: 25px 0;
		font-size: 16px;
		line-height: 30px;
	}
	b {
		font-weight: bold;
	}
`

使用 redux 管理详情页面数据

创建文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//	pages/detail/store/actionCreators.js
//	pages/detail/store/constants.js

//	pages/detail/store/index.js
import reducer from './reducer'
import * as actionCreators from './actionCreators'
import * as constants from './constants'
export { reducer, actionCreators, constants }

//	pages/detail/store/reducer.js
import { fromJS } from 'immutable'
import * as constants from './constants'

//	使用 reducer 提供的默认数据，将 index 中的标题和内容删除
const defaultState = fromJS({
    title: '文章标题',
    content: '文章内容'
})

export default (state = defaultState, action) => {
    switch(action.type) {
        default:
            return state;
    }
}

src/store/reducer.js

1
2
3
4
import { reducer as detailReducer } from '../pages/detail/store'
const reducer = combineReducers({
    detail: detailReducer
})

pages/detail/index.js

1
2
3
4
5
6
7
8
9
10
11
12
import { connect } from 'react-redux'

return (
	<Header>{ this.props.title }</Header>
    <Content dangerouslySetInnerHTML={{__html: this.props.content}} />
)

const mapState = (state) => ({
    title: state.getIn(['detail', 'title']),
    content: state.getIn(['detail', 'content'])
})
export default connect(mapState, null)(Detail)

异步获取数据

pages/detail/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
import { actionCreators } from './store'
render(){}
componentDidMount(){
    this.props.getDetail()
}

const mapDispatch = (dispatch) => ({
    getDetail(){
        dispatch(actionCreators.getDetail())
    }
})
export default connect(mapState, mapDispatch)(Detail)


//	pages/detail/store/actionCreators.js
import axios from 'axios'
import * as constants from './constants'
const changeDetail = (title, content) => ({
    type: constants.CHANGE_DETAIL,
    title,
    content
})
export const getDetail = () => {
    return (dispatch) => {
        axios.get('/api/detail.json').then((res) => {
            const result = res.data.data
            dispatch(changeDetail(result.title, result.content))
        })
    }
}

//	pages/detail/store/reducer.js
case constants.CHANGE_DETAIL:
	return state.merge({
        title: action.title,
        content: action.content
    })

//	pages/detail/store/constants.js
export const CHANGE_DETAIL = 'detail/CHANGE_DETAIL'

//	public/api/detail.json
{
    "success": true,
    "data": {
        "title": "文章标题",
		"content": "文章内容"
    }
}

页面路由参数的传递

pages/home/components/List.js

1
<Link to={'/detail/' + item.get('id')}></Link>

App.js

1
<Route path='/detail/:id'>

pages/detail/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
componentDidMount(){
    this.props.getDetail(this.props.match.params.id)
}

const mapDispatch = (dispatch) => ({
    getDetail(id) {
        dispatch(actionCreators.getDetail(id))
    }
})

//	pages/detail/store/actionCreators.js
export const getDetail = (id) => {
    return (dispatch) => {
        axios.get('/api/detail.json?id=' + id).then((res) => {
            const result = res.data.data
            dispatch(changeDetail(result.title, result.content))
        })
    }
}

登录页面布局

pages/login/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { LoginWrapper, LoginBox, Input, Button } from './style'

class Login extends PureComponent {
    render(){
        return (
        	<LoginWrapper>
                <LoginBox>
                	<Input placeholder='账号'/>
                    <Input placeholder='密码'/>
                    <Button>登录</Button>
                </LoginBox>
            </LoginWrapper>
        )
    }
}

const mapState = (state) => ({
})
const mapDispatch = (dispatch) => ({
    
})
export default connect(mapState, null)(Detail)


//	App.js
import Login from './pages/login'
<Route path='/login' exact component={Login}></Route>

pages/login/style.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import styled from 'styled-components'
export const LoginWrapper = styled.div`
	z-index: 0;	
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 56px;
	background: #eee;
`
export const LoginBox = styled.div`
	width: 400px;
	height: 180px;
	margin: 100px auto;
	padding-top: 20px;
	background: #fff;
	box-shadow: 0 0 8px rgba(0, 0, 0, .1);
`
export const Input = styled.input`
	display: block;
	width: 200px;
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
	margin: 10px auto;
	color: #777;
`
export const Button = styled.div`
	width: 220px;
	height: 30px;
	line-height: 30px;
	color: #fff;
	background: #3194d0;
	border-radius: 15px;
	margin: 10px auto;
	text-align: center;
`

登录功能实现

创建文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//	pages/login/store/actionCreators.js
//	pages/login/store/constants.js

//	pages/login/store/reducer.js
import { fromJS } from 'immutable'
import * as constants from './constants'
const defaultState = fromJS({
    login: false
})
export default (state = defaultState, action) => {
    switch(action.type) {
        default:
            return state;
    }
}

//	pages/login/store/index.js
import reducer from './reducer'
import * as actionCreators from './actionCreators'
import * as constants from './constants'
export { reducer, actionCreators, constants }

src/store/reducer.js

1
2
3
4
import { reducer as loginReducer } from '../pages/login/store'
const reducer = comnineReducers({
    login: loginReducer
})

src/common/header/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { actionCreators as loginActionCreators } from '../../pages/login/store'

//	需要先在 props 中引入 login, logout
{ login ? <NavItem onClick={ logout } className='right'>退出</NavItem> : 
    <Link to='/login'><NavItem className='right'>登录</NavItem></Link>
}
//	handleChangePage 下面
logout() {
    dispatch(loginActionCreators.logout())
}

const mapStateToProps = (state) => {
    return {
        login: state.getIn('login', 'login')
    }
}

pages/login/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { Redirect } from 'react-router-dom'
import { actionCreators } from './store'

const { loginStatus } = this.props
if (!loginStatus) {
    return (
        //	使用 styled 要通过 innerRef 来获取 DOM 元素
        <Input ref={(input) => {this.account = input}} />
        <Input type='password' ref={(input) => {this.password = input}} />
        <Button onClick={ () => this.props.login(this.account, this.password) }>登录</Button>
    ) else {
        //	登录成功，重定向到首页
        return <Redirect to='/' />
    }
}

const mapState = (state) => ({
    loginStatus: state.getIn(['login', 'login'])
})
const mapDispatch = (dispatch) => ({
    login(accountElem, passwordElem) {
        dispatch(actionCreators.login(accountElem.value, passwordElem.value))
    }
})
export default connect(mapState, mapDispatch)(Login)

pages/login/store/actionCreators.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import axios from 'axios'
import * as constants from './constants'

const changeLogin = () => ({
    type: constants.CHANGE_LOGIN,
    value: true
})
export const logout = () => ({
    type: constants.LOGOUT,
    value: false
})

export const login = (account, password) => {
    return (dispatch) => {
        axios.get('/api/login.json?account=' + account + '&password=' + passwoed).then((res) => {
            const result = res.data.data
            if (result) {
                dispatch(changeLogin())
            } else {
                alert('登录失败')
            }
        })
    }
}

//	pages/login/store/constants.js
export const CHANGE_LOGIN = 'login/CHANGE_LOGIN'
export const LOGOUT = 'login/LOGOUT'

pages/login/store/reducer.js

1
2
3
4
case constants.CHANGE_LOGIN:
	return state.set('login', action.value)
case constants.LOGOUT:
	return state.set('login', action.value)

public/api/login.json

1
2
3
4
{
    "success": true,
    "data": true
}

登录鉴权及代码优化

pages/write/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//	复制 login/index.js 中的代码，删除不要的 mapDispatch
import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'
if (loginStatus) {
    return (
        <div>写文章页面</div>
    ) else {
        return <Redirect to='/login' />
    }
}
export default connect(mapState, null)(Write)

//	App.js
import Write from './pages/write'
<Route path='/write' exact component={Write}></Route>
    
//	header/index.js
<Link to='/write'><Button>写文章</Button></Link>

异步组件及withRouter路由方法的使用

安装：npm install react-loadable --save

pages/detail/loadable.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React from 'react'
import Loadable from 'react-loadable'

const LoadableComponent = Loadable({
    loader: () => import('./'),
    loading() {
    	//	组件加载过程中临时显示的组件
    	return <div>正在加载</div>
	}
})

export default () => <LoadabaleComponent />

//	App.js
import Detail from './pages/detail/loadable.js'

//	pages/detail/index.js
import { withRouter } from 'react-router-dom'
connect(mapState, mapDispatch)(withRouter(Detail))

项目上线流程

删除：public/api
打包：npm run build
将 build 中的所有文件放在后端项目中

打赏功能
-------------本文结束感谢您的阅读-------------
0%