React开发实践（8）实战部分 首页 开发（1）

前端付豪
163 阅读5分钟

1、react 路由 

    1、安装 yarn add react-router-dom
    2、BrowserRouter  Route
    3、exact 精准匹配
  • 貌似 版本更新 和之前的用法 不太一样

image.png

  • 现在的 版本 react-router-dom version 6 bit 貌似不需要写 exact 就可精准匹配

image.png

image.png

  • nice !

2、首页组件 拆分 

1、首先 src 下新建 pages 文件夹（包含 home 文件夹 details文件夹） 将首页 主要部分 写出来  width 960px 写一点样式居中
2、然后将 左右部分其他组件写出来 放在 home文件夹下的 components 目录下 
3、
  • 结构

image.png

  • style.js

image.png

  • Home index.js

image.png

  • 每个组件内都使用 这样的占位

image.png

  • 页面效果

image.png

3、首页 专题区域布局和 reducer 设计

  • 先说布局

      1、先写 Topic index.js 基本结构 （左侧小图片 右侧文字）
  2、需要一点样式 style.js 外层容器 TopicWrapper 和 内层 TopicItem

  • Topic index.js

image.png

  • style.js

image.png

  • 页面效果

image.png

  • 再说 数据 管理 

      1、我们需要将数据放在 redux 中管理，当然数据都存在 store 中 
  2、之前有个 headerReducer 我们现在需要一个 homeReducer 
  3、home 文件夹下 新建 store 文件夹 建立 reducer.js
  4、

  • reducer.js 基本结构

image.png

    1、先写基本的 defaultState 的内容  就是列表展示需要的部分
    2、在 store 引入这个 reducer 为了 统一 将添加一个 index.js 
    3、在父组件使用 connect 进行连接
    4、将数据传递给 子组件使用 
    5、子组件可以改写成一个 function 组件
    6、查看页面效果
  • 更改 defaultState 内容

image.png

  • 统一 引入的方式

image.png

image.png

  • 检查页面 redux 可以看到 数据 非常 nice ！

image.png

  • 父组件 home 组件 connect 连接

image.png

image.png

  • 子组件使用

image.png

  • 我们甚至可以打印出来 list 看一下 啥叫 immutable 数据

image.png

  • 页面效果非常nice

image.png

4、首页 新闻列表 布局和渲染 

1、先在 List.js 写基本的结构
2、在 上层 style.js 写样式
3、因为这是 循环渲染数据 应该和上面一样 放在 reducer 里面管理 
4、然后 将数据 去取出 在 home 中拿到 
5、然后 在 子组件 渲染出来就行 
6、查看页面效果
  • List.js 基本结构

image.png

  • style.js 结构

image.png

  • 先看一下页面效果

image.png

  • 在 reducer 中定义 数据

image.png

  • home index.js 使用

image.png

  • List.js

image.png

  • 页面效果 （暂时不纠结 css hahah）

image.png

  • 非常nice ！

5、首页 推荐部分 布局 

1、先在 Recommend.js 基本结构 
2、写它的 style.js
3、然后依旧通过 home.js 传递过来数据 循环展示出
4、页面效果
  • Recommend.js

image.png

  • style.js

  • 注意此处 styled 语法 如何将 组件内的内容传递给 style.js 使用

  • 忽略 此处 图片 有点恶心 其实你可以随意找图片

image.png

  • Reducer.js 新建数据 其实工作中常规会将初始数据写在 index initialState 中

image.png

  • home index.js 中使用数据 传递给 Recommend.js

image.png

  • Recommend.js使用 数据

image.png

  • 页面效果

  • 虽然图片有点恶心 但没有关系哈哈哈

image.png

  • Writer 部分 给个边框 先不写

image.png

5、首页 异步获取数据 怎么做 ？ 

1、在public 文件夹下api mock 一个 home.json 数据  就是当前写的 reducer.js的数据
2、然后 在 home index.js componentDidMount axios 请求数据
3、想更改 store 里的数据 需要走 完整流程
4、更新 reducer 的数据 通过 action
5、页面效果
  • home.json

image.png

  • home index.js 请求 数据

image.png

image.png

image.png

  • 注意此处

image.png

image.png

  • reducer.js

image.png

  • 页面效果

image.png

  • 非常nice ～～～

6、异步操作 代码优化拆分 

1、优化第一个地方 home index.js 发请求 不直接写在 didMount 中
2、因为使用了 thunk 所以将 请求放到 action中 
3、写 actionCreators.js 
4、home index.js 使用 
5、再将字符串 写到 常量 constants 中
  • home index.js 优化

image.png

image.png

  • actionCreators.js

image.png

  • home index.js

image.png

image.png

image.png

  • 定义常量 constants.js 并使用

image.png

  • reducer.js 还有 actionCreator.js 引用

image.png

image.png

8、实现 加载更多功能

  • 点击加载更多

      1、在 List.js 添加一个 阅读更多按钮 并绑定事件
  2、需要 一个 action  在 actionCreators.js 中创建
  3、然后 写 异步获取数据（此处 homeList.json 就是将原来的json 文件复制了一份）
  4、然后 reducer.js 写对应的内容
  5、页面效果

  • List.js

image.png

  • actionCreator.js

image.png

  • homeMore.json

image.png

  • reducer.js 注意此处 .concat 进行连接

image.png

  • contants.js 添加的常量

image.png

  • 查看 页面效果 非常 nice 实现了 点击更多 可以展示更多内容 !

  • 添加页码 我们常常需要将 展示的页码数据传递给后端 拿到之后 可以展示对应页面的部分 

      1、初始数据需要定义一个 articlePage 
  2、然后再 List.js 可以使用 这个 
  3、传递给 actionCreators
  4、reducer 可以拿到这个 page 更改数据
  5、更新 页面

  • reducer.js 初始化 数据

image.png

  • List.js 使用数据

image.png

  • actionCreators.js

image.png

  • reducer.js

image.png

  • 此时 完成了 更新 store 的流程 每次点击 加载更多 页面的 page 就会 + 1

image.png

9、回到 顶部功能实现 

1、首先是在 home index.js 写这个按钮 
2、需要一个 变量控制显示 / 隐藏
3、在 reducer 初始值 定义
4、然后 根据 window.addEventListener监听滚动
5、创建 actionCreator  
6、添加 reducer.js 更新 值
7、页面效果
  • home index.js

image.png

  • style.js 添加样式

image.png

  • 页面 效果

image.png

  • 实现点击滑动到顶部

image.png

  • reducer.js 添加一个变量

image.png

  • home index.js 使用

image.png

  • 绑定监听事件 注意需要解除绑定

image.png

image.png

  • actionCreators.js

image.png

image.png

  • reducer.js

image.png

  • 页面效果 非常nice 滚动 超过 100 才显示 小于 100 隐藏 !

  • 感觉 在写 actionCreator 时 要特别注意 数据的传递 !

10、首页 性能优化和 路由跳转 

1、因为数据使用的是 immutable.js 所以可以将组件内使用 extends Component 更改为 PureComponent 底层实现了 shoudComponentUpdate 不需要自己写
2、点击 List 内容 怎么去详情页面 不要使用 a 表情 要使用 Link
3、简书 header Logo 也需要更改为 Link 跳转

  • react 之中为啥使用 Link 进行跳转是 因为 保持 network --> doc html 只加载一次 对性能有好处

  • network doc这样看

image.png

  • ListItem 点击跳转到详情页面

image.png

  • Logo 更改为 Link 跳转类型

image.png

image.png

撒花 🎉🎉🎉

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

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

avatar
文章
阅读
粉丝