React开发实践（7）实战部分 Header 组件开发 2

前端付豪
602 阅读5分钟

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

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

*reducer.js

image.png

  • 页面使用 数据

image.png

  • 页面效果 非常 nice ！

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

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

image.png

  • src/store/reducer.js

image.png

  • 页面内使用

image.png

  • 非常nice ！

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

   1、先写 最外层的 容器  SearchInfo
   2、写标题部分 SearchTitle 切换部分 SearchSwitch
   3、小的内容使用 SearchList 包裹 
   4、写小的 item    SearchItem
   5、写好之后 这篇区域触发条件就是 props.isFocused  提取为一个函数放在 外面 命名为 renderSearchInfo

  • 多说一句 react 只能兼容到 ie8以上的浏览器

  • renderSearchInfo

image.png

  • 每块需要的样式 
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 配置一下

image.png

  • actionCreator.js

image.png

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

image.png

  • 然后 在 组件内 调用一下

image.png

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

image.png

  • 拿到请求后 渲染数据 

      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

image.png

  • actionCreator.js

image.png

  • reduce.js

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

image.png

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

image.png

image.png

  • 查看页面效果

image.png

  • 非常nice ！

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

image.png

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

5、稍微 优化一下 

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

image.png

  • 解构赋值语法

image.png

  • 如何避免 多次发请求

### 比较重要的内容：

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

image.png

image.png

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

image.png

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

image.png

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

  • 先实现 每页 10条数据 总共有几页数据展示出来

    1、reducer.js 中添加 page 和 totalPage 2、拿到数据后更新 totalPage 3、页面渲染时 更改 显示数量 当然这个使用 page 得出 4、

  • 先更新 totalPage

image.png

image.png

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

image.png

  • 再更改 页面渲染的 内容

  • 引入 page

image.png

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

image.png

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

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

image.png

  • 组件添加事件

image.png

image.png

  • actionCreator.js 写 action

image.png

  • reducer.js 处理

image.png

  • 页面使用

image.png

image.png

  • 页面效果非常的 nice ！

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

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

1、绑定事件

image.png

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

image.png

3、 actionCreator

image.png

4、reducer.js 使用 新的 page

image.png

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

  • 还有一个 warning 处理 ？

image.png

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

image.png

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

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

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

image.png

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

image.png

  • 还有一个小问题

image.png

image.png

image.png

7、换页 旋转动画实现

  • 先将 icon 引入

    1、去 iconfont 找一个 spin
2、然后拿过来 更改一下 iconfont.js 内容 替换掉这个 @font-face 
3、此时可能有样式冲突，更改一下 className 可解决

image.png

image.png

  • 当前页面实现效果

image.png

  • 接下来 怎么让它 转动起来 ？

      1、添加样式 
  2、使用 ref 拿到 这个i 标签并传递给 handleClick 
  3、拿到 rotate 的数值 部分 此处使用 正则过滤
  4、每次点击 + 360 ，开始为空时 则 设置 rotate = 0

  • 样式

image.png

  • 使用 ref

image.png

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

image.png

image.png

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

image.png

  • 页面效果 非常 nice！

撒花 🎉🎉🎉

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

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

avatar
文章
阅读
粉丝