课程章节： 项目实战：详情页面和登录功能开发
主讲老师： Dell
课程内容：
今天学习的内容包括：
学习使用redux管理页面数据；
React如何异步获取数据；
React页面路由参数的传递；
异步组件及withRouter路由方法的使用
课程收获：
9.1 心得：
实例：
import styled from 'styled-components' ;
export const DetailWrapper = styled.div 、
overflow: hidden;
width: 620px; margin:Ø 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;
}
import React, { Component } from 'react';
import { DetailWrapper,Header,Content } from './style'
class Detail extends Component {
render() {
return(
<DetailWrapper>
＜Header＞衡水中学，被外地人占领的高考工厂＜／Header＞
<Content>
<img src='//test.jpg'>
＜p＞＜b＞2017年，衡水中学考上清华北大的人数是176人＜／b＞
＜p＞2017年，衡水中学考上清华北大的人数是176人，2016年是＜p＞2017年，衡水中学考上清华北大的人数是176人，2016年＜/p＞
</Content>
</DetailWrapper>
)
}
}
export default Detail;
9.2 心得：
避免被转译: dangerouslySetInnerHTML
拒绝转译 dangerouslySetInnerHTML={{__html: this.props.content}}
实例：
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { DetailWrapper,Header,Content } from './style'
class Detail extends Component {
render() {
return(
<DetailWrapper>
<Header>{this.props.title}</Header>
<Content dangerouslySetInnerHTML=> {_html:this.props.content}</Content>
</DetailWrapper> )
}
const mapState = (state) => ({
title: state,getIn(['detail', 'title']), content: state.getIn(['detail', 'content']) });
export default connect(mapState, null)(Detail);
9.3 心得：
实例：
import { fromJS } from 'immutable';
import * as constants from '. /constants';
const defaultState = fromJS({
title: ' ',
content: ' '
});
export default (state=defaultState,action)=>{
switch(action.type) {
case constants.CHANGE_DETAIL:
return state.merge({
title: action.title,
content: action.content
})
default:
return state;
}
import axios from 'axios';
import * as constants from './contants';
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)
})
}
}
9.4 心得：
通过参数形式获取参数
在Link中通过？拼接参数，（相当于添加参数没有改变路径），此时跟路径路由不需要改写写成
path=‘/detail’ 即可
不过此时获取参数有些麻烦 需要通过 this.props.location.search 来获取
此时获取的并不是具体的参数值而是包含？的参数字符串，需要对此进行处理
动态路由获取参数
在Link中通过反斜杠添加参数（相当于路径），此时需要把根路径路路由改写成
path =’ /detail/:id’(添加了 exact精准匹配情况下)
通过 this.props.match.params.id来获取参数
9.5 心得：
import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { LoginWrapper, LoginBox, Input, Button } from '.
class Login extends PureComponent {
render() {
return(
<LoginWrapper>
<LoginBox>
＜Input placeholder＝＇账号＇／＞
＜Input placeholder＝＇密码＇／＞
＜Button＞登陆＜／Button＞
</LoginBox>
</Loginwrapper>
)
}
}
const mapState =(state) => ({
});
const mapDispatch =(dispatch) ({
}}
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: 200px;
margin: 50px auto;
background: #fff;
box-shadow: 0 0
;
9.6 心得：
每个组件负责自己的业务逻辑，所以再调用logout时应该从login中的actionCreate调用，故引入 import { actionCreate as loginActionCreate } from ‘…/…/pages/login/store’
9.7 心得：
import axios from 'axios';
import * as constants from './constants';
const changeDetail=(title, content)({
type:constants.CHANGE_DETAIL,
title,
content
});
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)
}).catch(() => {})
}
};
import { fromJS } from 'immutable';
import * as constants from './constants';
const defaultState=fromJS({
title:
content:
});
export default (state = defaultState, action) => {
switch(action.type) {
case constants.CHANGE_DETAIL
return state.merge({
title: action.title,
content:action.content })
default:
return state;
}
}
9.8 心得：
异步组件：
优化 首页加载所有js文件 首次渲染加载过慢问题
react-loadable 模块可以解决此问题，使组件异步加载
使用方法：
引入react-loadable组件，并在跟路由中组件路径加上为loadable.js层,
此时在组件里需要withRouter方法改写组件，才能正确获取原来的参数
使用react-router-dom里面的withRouter方法，可以使当前组件获取到Router里面的参数和内容
随时随地看视频
