react简书项目

Header

怕各个组件的样式冲突,安装以下进行管理

npm install styled-components

先把index.css换成style.js,如果想设置全局变量，比如进行reset，则

import {injectGlobal} from 'styled-components';

injectGlobal`
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
        display: block;
    }
    body {
        line-height: 1;
    }
    ol, ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
`;

Header下面的style.js

import styled from 'styled-components';
import logoPic from '../../static/logo.png';  //图片要这样引入

export const HeaderWrapper = styled.div`
    position:relative;
    height: 56px;
    border-bottom:1px solid #f0f0f0;
`

export const Logo = styled.a.attrs({
    href:'/'
})`   //可以增加标签的属性
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 56px;
    width:100px;
    background: url(${logoPic});  //图片引用
    background-size: contain;
`

NavItem的样式有不同

export const NavItem = styled.div`
    &.left {
        float: left;
    }
    &.right {
        float: right;
    }
`

box-sizing: border-box;

为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制

改变组件下面的属性的样式，placeholder，&::placeholder

export const NavSearch = styled.input.attrs({
    placeholder: '搜索'
})`
    width: 160px;
    height: 38px;
    margin-top: 9px;
    padding: 0 20px;
    box-sizing: border-box;
    border: none;
    border-radius: 19px;
    outline:none;
    background: #eee;
    font-size: 14px;
    margin-left:20px;
    &::placeholder{
        color: #999;
    }
`

state不可变

npm install immutable

import {fromJS} from 'immutable';

{fromJS} 把js对象变成immutable对象

const defaultState = fromJS({
    focused: false,
});

这时通过dispatch改变state会发生就错误，以为state已经是一个immutable对象了，要通过下面的方法

if(action.type === constants.SEARCH_FOUCUS){
    return state.set('focused',true);
}

immutable的set方法，会结合之前的immutable对象和设置的值返回一个全新的对象，并没有改原始的数据。

npm install redux-immutable
import {combineReducers} from 'redux-immutable';

const mapStateToProps = (state) => {
    return{
        focused: state.get('header').get('focused'),
    }
}

要改成state.get('header').get('focused') ,因为header已经变成immutable对象，要用get()来获取
等价于focused: state.getIn(['header','focused'])

获取ajax数据

npm install redux-thunk axios

页面部分

路由

npm install react-router-dom

import {BrowserRouter, Route} from 'react-router-dom';
<BrowserRouter>
     <div>
        <Route path='/' exact render={()=><div>home</div>}></Route>
        <Route path='/detail' exact render={()=><div>detail</div>}></Route>
     </div>
</BrowserRouter>

exact 表示是确切的路径

把{Component}改成{PureComponent}

{PureComponent} 自动就有shouldComponentUpDate()方法，提高性能,使用的前提是项目使用了immutable.js来管理数据,如果没有使用，会遇到问题。

分别加载每个页面的代码

npm install react-loadable