美文网首页让前端飞
React-慕课网简书项目实战(二)

React-慕课网简书项目实战(二)

作者: 文艺的程序狗 | 来源:发表于2020-03-20 12:07 被阅读0次

    知识点

    1. 引入styled-components依赖, css的写法可转为js写法
    import styled from ’styled-components’;
    export const HeaderWrapper =styled.div`
        height: 58px;
    border-bottom: 1px solid #f0f0f0;
    `
    
    //'injectGlobal' is not exported from 'styled-components’
    //injectGlobal已过期 现在采用 createGlobalStyle
    引入方式即相当于组件的方式
    import {HeaderWrapper} from ‘./style.js’;
    调用方式
    <HeaderWrapper> Header</HeaderWrapper>
    子属性引入  &.right{ }
    
    1. devtool依赖可以采用redux-devtools-extension
    2. combineReducers 对reducer进行合并处理
    3. immuable.js 第三方依赖 让state不可变(fromJS({name:’hello'}))
    4. react-immuable state的获取和设置都通过set和get方法
    5. react-router-dom 路由<Router>
    6. PureCommponent 结合immableJS实现自己根据数据进行刷新,可以避免父组件更新,所有子组件都更新的情况

    优化

    1. 代码编写 每个组件有各自的reducer等其它信息,统一在index.js导出
    2. 性能优化 PureCommponent 结合immableJS实现自己根据数据进行刷新
    3. 性能优化 Link(react-router-dom)替换a标签,优化一次html请求
    4. 性能优化 react-loadable 引入 ,优化js资源,避免一次性加载所有js文件(结合WithRouter)

    相关文章

      网友评论

        本文标题:React-慕课网简书项目实战(二)

        本文链接:https://www.haomeiwen.com/subject/uvfjyhtx.html