react 包目录及用途

 

 

利用脚手架工具创建一个react环境代码如下:

打开命令行
create-react-app my-app
cd my-app
npm start

创建成功后包含目录结构如下:

使用图片的第一种方式${图片的路径}如下:后边还有第二种方式

yarn add styled-components
import styled from "styled-components";
import logoPic from "../../statics/logo.png"
生成带样式并且带属性的a标签   图片的引用方式:先导入路径,然后用如下方式引用路径
export const Logo = styled.a.attrs({
    href:"/",
})`
    position:absolute;
    top:0;
    left:0;
    height:56px;
    display:block;
    width:100px;
    background:url(${logoPic});
    background-size:contain;
        
`

yarn add react-transition-group
import {CSSTransition} from "react-transition-group"
给NavSearch标签添加上动画


    

动画的效果是
export const NavSearch = styled.input.attrs({
    placeholder:"搜索",
})`
    width:160px;
    height:38px;
    border:none;
    outline:none;
    padding:0 30px 0 20px;
    margin-left:20px;
    box-sizing:border-box;
    margin-top:9px;
    border-radius:19px;
    background:#eee;
    font-size:14px;
    color:#666;
    &.focused {
        width:240px;
    }
    &::placeholder{
        color:#999;
    }
    &.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 RecommendItem = styled.div`
    width:280px;
    height:50px;
    background:url(${(props)=>props.imgUrl});
    background-size:contain;
`;

局部加载的实现需要借助于react-loadable

yarn add react-loadable

 在自己需要用到的组件中写入一个loadable.js文件

内容如下:

import React from "react";
import Loadable from "react-loadable";
const LoadableComponent = Loadable({
   loader:()=>import("./"),
   loading(){
        // 网速慢的时候显示的内容,可以改成自己的组件
        return 
正在加载
   }
});

export default ()=>

官网可能和上边的有点不一样但是不影响使用

如果路由传参数需要修改如下内容:

局部加载完成

 

&的用法

yarn add redux

yarn add react-redux

创建store

创建reducer

导入provider给其包含的组件及其子孙组件提供store中的数据

链接模型，交互数据

connect

 

yarn add immutable  fromjs fromJS

如果是用immutable的话可以用PureComponent如果不是最好不要用会有坑,用PureComponent的好处是提升性能,

yarn add redux-immutable

reducer的多级分发嵌套问题

一个项目目录下有一个大的store这个store下有一个reducer这个reducer作用为总路的reducer,其他的reducer作为这个的子reducer,

 

yarn add redux-thunk   作用应该是二级嵌套dispatch方法

yarn add axios

import axios from "axios"

对应的public下创建一个api的目录然后api下还应该有一个headerList.json的文件如下:

特别需要注意的是.json文件必须是json格式特别注意不能有逗号结尾,否则会报错

 

yarn add react-router-dom            路由

react-router-dom 此包下边还有  Redirect  Link 等常用组件用法如下: