react初体验

不迷路的77
255 阅读6分钟

初始化配置

craco配置别名和less

下载 npm install @craco/craco@alpha -D 使用：在根目录下创建croco.config.js image.png 在package.json中修改 image.png 下载npm i craco-less@2.1.0-alpha.0 使用：参照anti-ui官网 image.png

样式重置

下载 npm install normlize.css，在index.js中引入import "normalize.css"

路由初始化配置

创建routers文件中index.js,路由懒加载 image.png index.js:因为是异步加载，可能是空，所以加上Suspense，引入 import {Suspense} from 'react' image.png

redux

下载 npm install @reduxjs/toolkit react-redux

toolkit方式(RTK)

在store的模块中配置，还需要暴露，没截图到。 image.png 在store的index中配置 image.png

普通方式

文件构成，每一个文件夹是一个模块 image.png image.png

axios

下载 npm install axios

文件构成 image.png 二次封装 配置文件 image.png services/request/index.js image.png image.png

还没有收到数据就渲染页面会报错的解决方法：

1.逻辑判断 image.png 2.可选链：有值才执行，没有值返回undefined image.png

header组件

因为多页面header组件样式很不一样，所以分开写

下载 npm install styled-components

文件组成--style.js是css in js样式 image.png

主题色的设置

image.png css文件中配置 image.png 或者使用ThemeProvider 在index.js中引入 import {ThemeProvider} from 'styled-components' image.png 创建一个theme文件夹，index.js配置 image.png 使用 image.png

引入图片的方法

在index.js中直接使用标签引入 image.png 在style.js中引入 image.png 通过require(有的版本要加default，有的不需要)(在webpack环境下都要这么引入) image.png

绑定点击事件

点击显示，点击其他地方取消 image.png image.png true-->事件捕获阶段 image.png

room-item组件

store存储数据

image.png 创建一个额外的reducer image.png rmc image.png rmcp image.png

图片宽高比不一致

用padding占位，图片绝对定位移上去。66.66%是指宽度的66.66%. image.png

MaterialUI

根据官方提示下载。css in js打包后也不会很大，打包后是普通的Css文件 image.png 在craco.config.js中配置 image.png ??前面为undefined/null的时候执行后面，如果使用||,前面为0的时候也执行后面。 image.png

store存储数据

第二个参数是个store对象，多个请求写在一起时，使用promise。如果需要state中的数据，就写上getState. image.png 派发多个网络请求 image.png 不需要额外的reducer，直接在reducers中写action image.png 统一导出 image.png

classnames库的使用

安装 npm install classnames

点击哪个index的div给哪个div加active样式 image.png image.png

子组件传父组件

每次home组件在重新渲染的时候，tabClickHandle都会定义一个新的函数对象，子组件都会重新渲染 image.png 性能优化：使用useCallback image.png 在子组件中 image.png 传递index和item image.png 父组件中name动态数据 image.png image.png 错误初始化：infoData第一次传进来为空，设置initialName初始化为空字符串，useState执行，但是只能执行一次。 image.png 正确做法：渲染时做个判断 image.png 配合红框。粉框是第二种方法。但是粉框一共渲染三次：第一次是没数据，第二次是数据传过来，第三次是来了新数据又设置了新name image.png

把标签加上滚动

使用ScrollView包裹 image.png 使用插槽，进行展示 image.png 判断右侧按钮的显示与隐藏 image.png

一个函数要用另一个函数中计算出的属性

1、使用useState，但是性能不好，调用setTotalDistance时，ScrollView这个组件要重新渲染。但是我们只想记录这个值。 image.png 2、useRef image.png 其他组件使用这个值 image.png

entire组件

redux-thunk写法

在service中封装的网络请求 image.png 在entire页面的index.js中发送网络请求 image.png 在action中 image.png 还是在action中 image.png 在constants中 image.png 从redux中获取数据 image.png 在子组件中获取也是一样的 image.png roomList有值再展示，写!!(转成布尔值，布尔值不会渲染到页面上) image.png 根据点击的页码显示相应的内容，派发两个action->1.更改页码2.获取相应页码的数据 image.png 把两个合并成一个(page-1是因为在当前页码中是1开始，action中是0开始)： image.png image.png

使用两个UI组件库，打包后会不会很大

不会，webpack使用tree shaking，只打包用到的UI组件

修改MateriaUI样式

找到要修改的可能的class类名 image.png 中间不要加空格，表示同时满足这两个类名 image.png

object-fit

object-fit:cover保持原来的宽高比，不压缩变形图片的撑开 image.png

detail组件

detail组件的数据是根据entire中的数据来的。把entire的数据存储到store中，再获取。刷新会丢失。因为redux(vuex)都是内存存储，不是本地存储(localStorage)。一般从服务器获取到token，会把它存储到localStorage中，再从localStorage中取出作为初始值。

两种样式用CSS不好做，可以用JS来做： 1.兄弟元素，后面的元素找前面的元素。 2.子元素找父元素。

去除滚动功能

在点开详情页面，用遮罩层设置position:fixed固定定位，占据整个页面(设置left/right/top/bottom都为0，占据整个视口宽度，出现滚动条) 副作用设置 image.png

关闭按钮

在子组件(显示放大图片组件)中设置关闭按钮，绑定点击事件 image.png 在父组件中传递一个函数，更改是否显示showBrowser的参数-->false image.png 子组件调用，判断一下closeClick是否有值，没有值的时候调用报错。 image.png

react-transition-group

引入 image.png 先写SwitchTransition再写CSSTranstion，classNames是动画样式，timeout是必写的。 image.png 在最外层传入isNext是向前还是向后给css-js。 image.png 样式判断是从左边来还是从右边来过渡。 image.png

隐藏图片列表

不能用display，因为没有动画。给高度加动画。 image.png

header组件

监听不到，但是数据改变了。 image.png 解决方法：把suspense放入provider里面。->可以监听到异步加载完的home.js等发出的dispatch image.png

路由跳转回到页面顶部

方案1.在App.jsx中直接配置 image.png

方案2.在hooks文件夹中创建一个新hook image.png 在App.jsx中使用 image.png

头部两个内容的显示与隐藏

两个内容靠isSearch参数控制切换，使用CSSTransition包裹。unmountOnExit={true}表示动画执行完毕后卸载组件。第一个内容包裹如下： image.png 第二个内容包裹如下： image.png

滚动移除蒙板

写一个hook，给Windows加监听事件，用useEffect。大体框架： image.png return对象，解构幅值比较方便 image.png 改进--节流操作：

1.下载 npm install underscore

2.引用 import {throttle} from "underscore"

3.使用 image.png 在header组件中使用hook，使用useRef记录原来的位置。 image.png

在首页最顶部时透明显示

想要把isAlpha这个参数在他的子组件中也能使用，必须要在外层嵌套一个ThemeProvider image.png 在样式中判断 image.png 如果在顶部就是搜索状态 image.png

部署

安装VSCode插件：Remote-SSH

搜索这个工具包image.png

安装 dnf install nginx

启动并查看状态image.png

自动化部署流程 image.png 安装Java(jenkins需要) image.png

安装jenkins
image.png

localStorage

存储到localStorage中数据:localStorage.setItem(key,JSON.stringify(data));

从localStorage中获取数据:JSON.parse(localStorage.getItem(key))<--里面不能是undefined，一般都要加个判断

avatar
文章
阅读
粉丝