React开发实践(7)实战部分 Header 组件开发 2

简介: React开发实践(7)实战部分 Header 组件开发 2

1、如何 使用 immutable 管理 store 的数据 ?

1、安装  yarn add immutable
2、使用 fromJS 将我们 store 的数据 转为 immutable 类型
3、然后 更改数据时 使用 set 方法 
4、取数据 使用 get 方法 
复制代码

*reducer.js

网络异常,图片无法展示
|

  • 页面使用 数据

网络异常,图片无法展示
|

  • 页面效果 非常 nice !

2、统一数据结构   redux-immutable 怎么使用 ?

1、安装 yarn add redux-immutable
2、更改 combinReducers 引入 从这个 引入 
3、然后 更改页面调用方式 
复制代码
  • 为啥需要这个内容 ? 数据获取方式 不一样  此处更改需要 在 src/store/reducer.js 更改

网络异常,图片无法展示
|

  • src/store/reducer.js

网络异常,图片无法展示
|

  • 页面内使用

网络异常,图片无法展示
|

  • 非常nice !

3、热门搜索 样式 布局 开始

1、先写 最外层的 容器  SearchInfo
   2、写标题部分 SearchTitle 切换部分 SearchSwitch
   3、小的内容使用 SearchList 包裹 
   4、写小的 item    SearchItem
   5、写好之后 这篇区域触发条件就是 props.isFocused  提取为一个函数放在 外面 命名为 renderSearchInfo
复制代码
  • 多说一句 react 只能兼容到 ie8以上的浏览器
  • renderSearchInfo

网络异常,图片无法展示
|

  • 每块需要的样式
export const SearchInfo = styled.div`
  position: absolute;
  left: 0;
  top: 56px;
  width: 240px;
  padding: 0 20px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
`;
export const SearchTitle = styled.div`
  margin-top: 20px;
  margin-bottom: 15px;
  line-height: 20px;
  font-size: 14px;
  color: #969696;
  cursor: pointer;
`;
export const SearchSwitch = styled.div`
  float: right;
  font-size: 13px;
  cursor: pointer;
`;
export const SearchList = styled.div``;
export const SearchItem = styled.a`
  display: block;
  float: left;
  line-height: 20px;
  padding: 0 5px;
  font-size: 12px;
  border: 1px solid #ddd;
  color: #787878;
  border-radius: 3px;
  margin: 10px 10px;
  cursor: pointer;
`;
复制代码

4、AJAX 获取 数据 实现 搜索部分下面的内容

  • 准备发请求部分
0、先将 header/index 改成 class 组件,方便之后使用生命周期函数
  1、需要 安装 redux-thunk 使得 action 可以写成函数形式 
  2、在 store.index.js 配置一下
  3、actionCreator.js 写数据请求 使用 fetch 内置fetch 当然也可安装 axios
  4、在 public 文件夹下 新建 api 文件夹 建一个 headerList.json 文件
  5、因为 create-react-app 这个底层基于 node 服务 会先在 src 下找这个文件 如果没有这个接口 会在 public 寻找
复制代码
  • 使用 thunk   store.index.js 配置一下

网络异常,图片无法展示
|

  • actionCreator.js

网络异常,图片无法展示
|

  • public 文件夹下的数据模拟部分

网络异常,图片无法展示
|

  • 然后 在 组件内 调用一下

网络异常,图片无法展示
|

  • 当 input focus 时 可以发现发送请求 拿到了结果

网络异常,图片无法展示
|

  • 拿到请求后 渲染数据
1、在 actionCreator.js 创建 action 并dispatch 到 store 
  2、reduce.js 处理 (prevState,action) --> newState 此处需要注意 更新state 需要 action.payload 数据  也就说 state.xxx = action.xxx  xxx是 payload 内容
  2、在页面先拿到数据(mapStateToProps)  然后使用 .map 渲染数据 
  3、愉快的展示出来 
复制代码
  • 注意此处 默认使用 fetch 没有拿到 data 数据 说明 fetch 不能这样用的 暂时更改为 axios

网络异常,图片无法展示
|

  • actionCreator.js

网络异常,图片无法展示
|

  • reduce.js

* 特别注意  reduce 如何得到 新的 state 是使用了 action.payload

网络异常,图片无法展示
|

  • 在页面使用 .map 渲染数据

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • 查看页面效果

网络异常,图片无法展示
|

  • 非常nice !

有个问题 被忽略掉了 需要 将 actionCreator.ja 接口拿到的数据 统一为 immutable 类型

网络异常,图片无法展示
|

  • 不过现在基本使用 tookit 会自动转为  immutable 所以不用考虑这个

5、稍微 优化一下

1、actionCreator.js 里将不导出的 action 放在顶部或者底部
2、reducer.js 将多个if改写出 switch case 的形式
3、组件内的 this.props.xxx 都使用解构赋值语法 写出来 
4、避免 多次发请求 
复制代码
  • reducer.js

网络异常,图片无法展示
|

  • 解构赋值语法

网络异常,图片无法展示
|

  • 如何避免 多次发请求

### 比较重要的内容:

1、只发一次请求 初始化 数据时 往往放在 didMount 中发起
    2、页面其他地方 只想发送一次请求  往往可以 通过拿到数据内的判断条件来 控制非重复发请求
复制代码

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • 多次 focus 结果  可通过 size 来判断

网络异常,图片无法展示
|

  • 改成这样 可解决 问题  只发送一次请求

网络异常,图片无法展示
|

6、搜索页 换一换功能实现    

  • 先实现 每页 10条数据 总共有几页数据展示出来
    1、reducer.js 中添加  page 和 totalPage 2、拿到数据后更新 totalPage 3、页面渲染时 更改 显示数量 当然这个使用 page 得出 4、
  • 先更新 totalPage

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • 页面看一下效果  更新 成功了

网络异常,图片无法展示
|

  • 再更改 页面渲染的 内容
  • 引入 page

网络异常,图片无法展示
|

* 此处 非常 重要 多个内容分页 功能的基本实现思路 非常nice !

网络异常,图片无法展示
|

* 接下来 实现换一换 但 发现有点问题 鼠标点击换一换就消失了 说明 只是 isFocused 条件不行 还需要 添加一个 mouseIn

1、需要 添加一个 mouseIn 来确定鼠标是否移入/移出
    2、在组件添加对应的事件
    3、派发 action 并且写对应的 reducer 处理
    4、组件内 使用 mouseIn
复制代码
  • 先 reducer.js 定义 mouseIn

网络异常,图片无法展示
|

  • 组件添加事件

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • actionCreator.js 写 action

网络异常,图片无法展示
|

  • reducer.js 处理

网络异常,图片无法展示
|

  • 页面使用

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • 页面效果非常的 nice !

* 接下来 需要实现 换一换 问题就在于 换一换这个地方 事件怎么写 ?

1、绑定事件 
2、需要拿到 totalPage 和 page 做判断后展示 内容 
3、 actionCreator
4、reducer.js 使用 新的 page
4、页面效果
复制代码

1、绑定事件

网络异常,图片无法展示
|

2、需要拿到 totalPage 和 page 做判断后展示 内容

网络异常,图片无法展示
|

3、 actionCreator

网络异常,图片无法展示
|

4、reducer.js 使用 新的 page

网络异常,图片无法展示
|

5、页面效果非常nice ! 实现点击切换的功能

  • 还有一个 warning 处理 ?

网络异常,图片无法展示
|

  • 我已经给了 key 值 但是 还是 报错,第一反应是 直接 log 一下

网络异常,图片无法展示
|

  • 开始 page = 1 这个循环启动了, newList 不存在 所以 需要确保 拿到接口数据后 newList 存在时 再循环

发现即使 先判断 if(newList){for 循环 }  还是不行,更改 key = {i} 解决这个问题

* 还有一件事情 这种 更改多个 state 可以使用 merge 避免.set().set() 很多个 .set 连接

网络异常,图片无法展示
|

  • 为了解决这个事情 改成这样的写法

网络异常,图片无法展示
|

  • 还有一个小问题

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

7、换页 旋转动画实现    

  • 先将 icon 引入
1、去 iconfont 找一个 spin
2、然后拿过来 更改一下 iconfont.js 内容 替换掉这个 @font-face 
3、此时可能有样式冲突,更改一下 className 可解决
复制代码

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • 当前页面实现效果

网络异常,图片无法展示
|

  • 接下来 怎么让它 转动起来
1、添加样式 
  2、使用 ref 拿到 这个i 标签并传递给 handleClick 
  3、拿到 rotate 的数值 部分 此处使用 正则过滤
  4、每次点击 + 360 ,开始为空时 则 设置 rotate = 0
复制代码
  • 样式

网络异常,图片无法展示
|

  • 使用 ref

网络异常,图片无法展示
|

  • 测试点击 hanldeClick 是否可以拿到 ref

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • 接下来 拿到 rotate 值 取得数字部分

网络异常,图片无法展示
|

  • 页面效果 非常 nice!

撒花 🎉🎉🎉

更多项目请访问 github  github.com/huanhunmao

gitee 项目地址 gitee.com/huanhunmao/…



相关文章
|
9天前
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
26 10
React技术栈-react使用的Ajax请求库实战案例
|
11天前
|
前端开发 JavaScript 数据管理
React Formik入门:简化表单处理的神器——全面掌握Formik在React表单开发中的高效应用与实战技巧
【8月更文挑战第31天】在React应用中,表单处理常常因繁琐而令人头疼。Formik作为一个开源库,专为简化React表单设计,减少冗余代码并提升处理效率。本文介绍Formik的使用方法及其优势,通过示例展示如何安装配置并创建基本表单,帮助开发者轻松应对各种表单需求。
17 0
|
13天前
|
前端开发 API
[译] 实战 React 18 中的 Suspense
[译] 实战 React 18 中的 Suspense
|
2月前
|
前端开发
React Hooks实战技巧:提升你的组件开发效率
【7月更文挑战第16天】React Hooks为React开发带来了革命性的变化,使得函数式组件更加强大和灵活。通过掌握上述实战技巧,你可以更高效地编写清晰、可维护和可复用的React组件。希望这些技巧能帮助你在React开发之路上走得更远。
|
2月前
|
前端开发 JavaScript Android开发
React Native跨平台开发实战
【7月更文挑战第21天】React Native为跨平台移动应用开发提供了一种高效且强大的解决方案。通过本文的学习,你应该能够掌握React Native的基本概念和实战步骤,并开始在你的项目中使用React Native进行开发。随着你对React Native的深入理解,你将能够利用其强大的功能来构建更加复杂和高效的移动应用。
|
4月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
288 0
|
4月前
|
存储 前端开发 JavaScript
【第34期】一文学会React组件传值
【第34期】一文学会React组件传值
59 0
|
4月前
|
前端开发
【第31期】一文学会用React Hooks组件编写组件
【第31期】一文学会用React Hooks组件编写组件
62 0
|
4月前
|
存储 前端开发 JavaScript
【第29期】一文学会用React类组件编写组件
【第29期】一文学会用React类组件编写组件
63 0
|
4月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
95 0
下一篇
DDNS