【九月打卡】第18天 React零基础入门到实战，完成企业级项目简书网站开发 第九讲

课程名称： React零基础入门到实战，完成企业级项目简书网站开发

课程章节： 项目实战：详情页面和登录功能开发

主讲老师： 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里面的参数和内容