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

1、react 路由

1、安装 yarn add react-router-dom
    2、BrowserRouter  Route
    3、exact 精准匹配 
复制代码

• 貌似 版本更新 和之前的用法 不太一样

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

• nice !

2、首页组件 拆分

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

• 结构

• style.js

• Home index.js

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

• 页面效果

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

• 先说布局

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

• Topic index.js
  

• style.js

• 页面效果

• 再说 数据 管理

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

• reducer.js 基本结构
  

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

• 更改 defaultState 内容

• 统一 引入的方式

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

• 父组件 home 组件 connect 连接

• 子组件使用

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

• 页面效果非常nice

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

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

• List.js 基本结构

• style.js 结构

• 先看一下页面效果

• 在 reducer 中定义 数据

• home index.js 使用

• List.js

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

• 非常nice ！

5、首页 推荐部分 布局

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

• Recommend.js

• style.js
  
• 注意此处 styled 语法 如何将 组件内的内容传递给 style.js 使用
  
• 忽略 此处 图片 有点恶心 其实你可以随意找图片
  

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

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

• Recommend.js使用 数据

• 页面效果
  
• 虽然图片有点恶心 但没有关系哈哈哈
  

• Writer 部分 给个边框 先不写

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

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

• home.json

• home index.js 请求 数据

• 注意此处

• reducer.js

• 页面效果

• 非常nice ～～～

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

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

• home index.js 优化

• actionCreators.js

• home index.js

• 定义常量 constants.js 并使用

• reducer.js  还有 actionCreator.js 引用

8、实现 加载更多功能  

• 点击加载更多

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

• List.js
  

• actionCreator.js

• homeMore.json

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

• contants.js 添加的常量

• 查看 页面效果 非常 nice  实现了 点击更多 可以展示更多内容  !
  
• 添加页码 我们常常需要将 展示的页码数据传递给后端 拿到之后 可以展示对应页面的部分

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

• reducer.js 初始化 数据
  

• List.js 使用数据

• actionCreators.js

• reducer.js

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

9、回到 顶部功能实现  

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

• home index.js

• style.js 添加样式

• 页面 效果

• 实现点击滑动到顶部

• reducer.js 添加一个变量

• home index.js 使用

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

• actionCreators.js

• reducer.js

• 页面效果 非常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这样看
  

• ListItem 点击跳转到详情页面

• Logo 更改为 Link 跳转类型

撒花 🎉🎉🎉

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

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