# simplebook

**Repository Path**: stillreal/simplebook

## Basic Information

- **Project Name**: simplebook
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-01-20
- **Last Updated**: 2021-03-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Getting Started with Create React App

#通过对react的学习，编写了简书博客其涉及的技术点有（create-react-app,jsx,React-transition-group,redux的简单应用，react-router ,antd，style-Component.ui，容器组件，生命周期，无状态组件，axios，redux-thunk
![首页图片](https://images.gitee.com/uploads/images/2021/0303/123634_df35d91d_8021349.png "屏幕截图.png")


# 简书网页（开发中......）

#### 1.主页由heder，recommend，writer，topic，list组成

#### 2.在搜索框通过react-transition实现了点击获得焦点后的搜索框的过渡动画效果。

#### 3.list中的数组通过axio获取的，以及各种state存放的字段都采用了immutable.js，实现数据的不可变性

#### 4.react-router-dom实现了主页面和登录界面的路由切换

#### 5.css采用了style-components

#### 6.采用redux-thunk实现异步请求数据

#### 7，通过无状态组件提高了代码的整洁程度

#### 8.constant.js讲action的type存为常量

#### 9.将reducer拆分到个个组件当中，便于各个模块方法的维护。





![image-20210121110536647](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210121110536647.png)



<img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210121105731356.png" alt="image-20210121105731356" style="zoom:33%;" />





 npm add styled-components

可以将styled-components可以css文件的语法转到js文件上

reset.css 能做做到兼容大多数浏览器的css样式

采用style-components中的injectGlobal而实现的在js文件中也能写css样式

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;

  }

`;

**给标签里面的dom来加样式**

在style.js的文件中自定义css样式的组件，然后导出

在index.js中导入之前在style.js写的自定义css组件，并以标签的形式进行运用

![img](D:\youdaonotedownload\weixinobU7VjpqZViLRO2fRroZqRyjWvAc\affd61342a78404783e1653d1429bd5d\clipboard.png)

![img](D:\youdaonotedownload\weixinobU7VjpqZViLRO2fRroZqRyjWvAc\90854f0405024419b6b831c91f31a300\clipboard.png)

tips： 因为webpack打包是不清楚项目目录结构所以url是不能采用相对相对路径的

所以如果要在react项目中使用url参数，需要将整个图片作为模块导入

![img](D:\youdaonotedownload\weixinobU7VjpqZViLRO2fRroZqRyjWvAc\038c4c8d8b3842aaa9d6437fd9ea8a49\clipboard.png)

![img](D:\youdaonotedownload\weixinobU7VjpqZViLRO2fRroZqRyjWvAc\b37700e6f1c54ab2b802fd3720ced1a3\clipboard.png)

**style.js里面也可以给a标签来定义属性**

![img](D:\youdaonotedownload\weixinobU7VjpqZViLRO2fRroZqRyjWvAc\34a947c628844c10a543dd746592ba43\clipboard.png)

**总结**

所以通过这么多案例我们可以清楚地认识到style-component,可以通过在style.js中定义组件，

来对html地各种标签，进行自定义地改变css样式，以及赋值，，所以这就有效地避免了css从冲突

自己地定义地css组件只由自己地组件使用

在vue当中可以使用id选择器但是也是会有重名的危险，所以还是要在style的标签里面加上scoped

**tips:**

注意因为自定义了css'样式组件所以css样式中的dislay：flex

对子标签的作用无法穿透到子标签,所以如果要让块级标签在同一行，需要采用子标签float的方式

在react的jsx的语法当中，组件标签的首字母必须要大写

**在自定义css组件标签中使用class**

![img](D:\youdaonotedownload\weixinobU7VjpqZViLRO2fRroZqRyjWvAc\a41c1dcf42a7495091db87975006e6d1\clipboard.png)

![img](D:\youdaonotedownload\weixinobU7VjpqZViLRO2fRroZqRyjWvAc\44f533a43b294c7fa042e0263e68d614\clipboard.png)

**如何实现iconfont图标**

 iconfont需要的文件格式为svg，ttf,woff,wot,css

其实像style-components的createGlobalStyle的关键所在就在于丫的作用就不是在于

防止css样式穿透，而是在于定义全局样式了

第一步： 更改inconfont的css文件为js类型的文件

第二步导入createGlobalStyle模块方法

第三步定义常量来接受createGlobalStyle解析的模板字符串

第四步在项目主文件(总容器)导入

并且在render函数中写入导入的变量标签

可以通过上一层的父标签的样式模板来嵌套iconfont的样式从而修改的iconfont的css属性

![img](D:\youdaonotedownload\weixinobU7VjpqZViLRO2fRroZqRyjWvAc\031c561b96aa49dfa5cbd9b7e2e520c1\clipboard.png)

**实现react中的动画效果**

npm add react-transition-group

导入包

![img](D:\youdaonotedownload\weixinobU7VjpqZViLRO2fRroZqRyjWvAc\3246ca4c139247fb9dee4313c9ccc676\clipboard.png)

用CssTransition来包裹着标签

in用来控入场以及出场的动画

timeout属性用来控制过渡时间

![img](D:\youdaonotedownload\weixinobU7VjpqZViLRO2fRroZqRyjWvAc\31eb09f57641416f93377e8c2608e3c3\clipboard.png)

**style.js里面的内容**

![img](D:\youdaonotedownload\weixinobU7VjpqZViLRO2fRroZqRyjWvAc\f4560dd807e44d0d94e8aaa48218a4ca\clipboard.png)

**redux运用**

1，在src目录下创建store文件夹

2，并在store文件夹中创建index.js（内容如下图）

3，在store文件夹中创建reducer.js文件（内容如下图）

4，在App.js总项目文件（主容器）配置（如下图）

5，（配置细节，导入provider，以及store，在render函数里导入Provider标签，并配置store={store}）

tips::::::::配置provider和其store属性的意义是为了让其下的子标签都能拥有调用store里面数据的权限

7，在header也就是子组件就可以通过配置来调取和操作store里的数据了

（具体细节，导入connect的模块方法，同事导出已经概括着mapStateToProps,以及mapDispatchToProps）

tip::::::::mapStateToProps以及mapDispatchToProps的作用就是去除原本要在组件中为了调用state，和修改数据，而进行的this.getstate以及dispatch(action的操作。

如果没有运用redux，那么我们就是将数据存在construct(){}中的this.state（{}），如果要操作数据的话需要采用绑定函数，然后在函数里调用this.getstate()

)

8.如果需要调用方法修改数据的话，需要定义action，派发到store，然后与store里的state，一起传到reduce.js处理（如图）

![img](D:\youdaonotedownload\weixinobU7VjpqZViLRO2fRroZqRyjWvAc\265d50805eb54b0c95ccf5bc8d8cc8a8\clipboard.png)

![img](D:\youdaonotedownload\weixinobU7VjpqZViLRO2fRroZqRyjWvAc\0b5d150b4ae449dbb7a32b4693a5419e\clipboard.png)

![img](D:\youdaonotedownload\weixinobU7VjpqZViLRO2fRroZqRyjWvAc\bff1b5fe474e4ac9a7de7f42375a2cdc\clipboard.png)

![img](D:\youdaonotedownload\weixinobU7VjpqZViLRO2fRroZqRyjWvAc\38450aab7ffc4b209be2eeb3ea815f94\clipboard.png)

![img](D:\youdaonotedownload\weixinobU7VjpqZViLRO2fRroZqRyjWvAc\d1429ff0ed3f4ca5b697aeba7406c8dd\clipboard.png)

因为采用了无状态组件，所以整个header组件并没有了各种逻辑代码，有的只是ui组件，以及action动作的提交，

并且去除了this，毕竟顾名思义，无状态组件（而且因为是箭头函数，this，指针定位也不对）

![img](D:\youdaonotedownload\weixinobU7VjpqZViLRO2fRroZqRyjWvAc\75e6bfc4709642e284264d725bcd57ec\clipboard.png)

通过combineReducers这个可以实现reducer的拆分

![img](D:\youdaonotedownload\weixinobU7VjpqZViLRO2fRroZqRyjWvAc\89e604c8fbe648989ce6517e0f312086\clipboard.png)

通过在header的store目录下创建index.js,导出模块，就可以通过webpac打包节省了一个路径的填写

,但是其注意的一点是在index.js也就是header的主容器组件中，需要将state.aaa.改成state.header.aaa

![img](D:\youdaonotedownload\weixinobU7VjpqZViLRO2fRroZqRyjWvAc\34df5118d31c4119a94e29fd14aed768\clipboard.png)

![img](D:\youdaonotedownload\weixinobU7VjpqZViLRO2fRroZqRyjWvAc\c0f28046318e4d14956dc494a3fcfb96\clipboard.png)

![img](D:\youdaonotedownload\weixinobU7VjpqZViLRO2fRroZqRyjWvAc\9481c35a07024c1ea262bc617321815a\clipboard.png)

在actionCreators这个文件当中，存放的是原先在index.js所指定的动作action

在constant.js中所存放的是给动作统一规划的名字，将其定义为常量，type的值就不再是字符串类型的了

tip:总结，actionCreator的目的其实就是为了创作action,再经由总容器index.js的dispatach调给仓库store，然后仓库再传给redux,而为了拆分各个组件的store的数据和动作，使其更加具有可读性，便在

header目录下创建了子redux，将对应action,以及state的操作放在这个 子redux上，之后为了精简主redux的调用路径，便再header目录下再创建了一个入口文件，index.js,将已经制定好的redux传给主redux，接着redux再通过combineReducer,来接受合并使用子redux

d

**使用immutable.js**

npm i immutable

sh

![img](D:\youdaonotedownload\weixinobU7VjpqZViLRO2fRroZqRyjWvAc\ea2edaaee9234545b27a8c9e88a169ae\clipboard.png)

![img](D:\youdaonotedownload\weixinobU7VjpqZViLRO2fRroZqRyjWvAc\7b0cf19516f044fc89f6a0eb902493fc\clipboard.png)

npm i redux-immutable

让state也会成为一个immutable对象

1.更改CombineReducer的导入包

**发起ajax请求的步骤**

npm i redux-thunk\

可以让action成为一个回调函数而不是一个type: aqqwqwqw的对象

从而实现异步炒操作例如网络请求资源，定时器计时器

![img](D:\youdaonotedownload\weixinobU7VjpqZViLRO2fRroZqRyjWvAc\8ecc11a2848a4a8993d1de86a19a4a61\clipboard.png)

在运用react-new-app特性，可以在public目录创建api目录，在其目录下创建json文件来mock假数据

因为rect-new-app本身其实是一个node命令，所以再没有路由文件的时候，他会默认去找public文件中的api目录中的json文件，然后启动服务器

![img](D:\youdaonotedownload\weixinobU7VjpqZViLRO2fRroZqRyjWvAc\0d3f8dd834f54558b795cbcca319e1a4\clipboard.png)

redux-thrunk能让actionCreator里面的的箭头函数返回的是一个函数，而不是原先的对象

而之所以需要返回的是回调函数是因为安装了redux-thunk就是为了要让返回的action是先经过一次同步的aciton操作，然后再通过axios得到的新的action并且直接在actionCreators中提交

![img](D:\youdaonotedownload\weixinobU7VjpqZViLRO2fRroZqRyjWvAc\f200889bcf3f4bb0b2a795379e4e22d1\clipboard.png)

**react的路由认识**

路由中加入exact属性就是伟了让路由的路径严格匹配，而不是通配符模式

![img](D:\youdaonotedownload\weixinobU7VjpqZViLRO2fRroZqRyjWvAc\dc8f73cf0f5346939d5455733c8dfecd\clipboard.png)

tip: 在箭头的作用域中的外围加上一个（）是代表，括号里面的语句都是返回的语句

![img](D:\youdaonotedownload\weixinobU7VjpqZViLRO2fRroZqRyjWvAc\e77c7822adfb4412b1da322e6912e2a6\clipboard.png)

如何通过容器组件来传值到自定义样式组件

![img](D:\youdaonotedownload\weixinobU7VjpqZViLRO2fRroZqRyjWvAc\d0240f9864c74ee0aeb58632cd223658\clipboard.png)

![img](D:\youdaonotedownload\weixinobU7VjpqZViLRO2fRroZqRyjWvAc\45c188735b1843a0a657a77a145cd6bc\clipboard.png)

**react的路由参数传递**

当路由是以params方式传递的时候

![img](D:\youdaonotedownload\weixinobU7VjpqZViLRO2fRroZqRyjWvAc\eb0de762698d4e3a99a76123fc872831\clipboard.png)

![img](D:\youdaonotedownload\weixinobU7VjpqZViLRO2fRroZqRyjWvAc\27923f75730d4f89a7fcd869d0d331c2\clipboard.png)

![img](D:\youdaonotedownload\weixinobU7VjpqZViLRO2fRroZqRyjWvAc\48e9dc65fdbb461a82fa93c74a54b54e\clipboard.png)

![img](D:\youdaonotedownload\weixinobU7VjpqZViLRO2fRroZqRyjWvAc\807d1e358e2f423e8088fe161817336b\clipboard.png)

当路由是以query的方式传递的时候

![img](D:\youdaonotedownload\weixinobU7VjpqZViLRO2fRroZqRyjWvAc\96aafeb12a1d4598997c38508b260a31\clipboard.png)

![img](D:\youdaonotedownload\weixinobU7VjpqZViLRO2fRroZqRyjWvAc\54fd6fe312cf493a8610250292a398ee\clipboard.png)

![img](D:\youdaonotedownload\weixinobU7VjpqZViLRO2fRroZqRyjWvAc\1c8ebef9f65148c296682519da164ee9\clipboard.png)

通过style-components来自定义的标签想要直接获取dom节点的内容需要采用innerRef={（） =>{}}

**!!!!!!!!!importance**

![img](D:\youdaonotedownload\weixinobU7VjpqZViLRO2fRroZqRyjWvAc\953a5f68e56a40379b683520fc739fab\clipboard.png)

如果要再render函数中的组件的内部函数中传入参数，那么要在这个函数执行时在其外部再加一个一个箭头函数包裹着1