转载请注明出处，未经同意，不可修改文章内容。
🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。
1 需求
❓查看“简书”官网，并实现需求：
- 当点击“回到顶部”按钮时，页面立刻回到顶部；
- “回到顶部”按钮一开始是“隐藏”状态，当页面向下滑动一定值的时候，“回到顶部”按钮出现（反之亦然）。
✔️需求分析：
- 单就“回到顶部”这个功能而言，一行代码就可以搞定——调用
window.scrollTo(0, 0)方法； - 但“回到顶部”在适当的时机“隐藏”和“显示”则需要走 React-redux“数据”改变的流程，稍微麻烦点，但还是“套路”，所以不可怕。
2 编写“回到顶部”逻辑代码
🔗前置知识：
《JavaScript 基础——浏览器提供的对象：① BOM》——掌握“常用的 window 对象属性”；
《JavaScript 基础——浏览器提供的对象：② DOM》——掌握“ document.documentElement.scrollTop 的用法”；
《JavaScript 基础——JS 事件：③ 常见事件使用》——掌握“window 事件”
1️⃣打开 home 目录下的 index.js 文件，我们先实现简单的“回到顶部”功能：
import React, {Component} from "react";
import Content from "./components/Content";
import Label from "./components/Label";
import Panels from "./components/Panels";
import Download from "./components/Download";
import {
Section,
Aside,
Main,
ToTop
} from "./style.js";
import { connect } from "react-redux";
import {actionCreators} from "./store";
class Home extends Component {
// 1️⃣-②：我们直接将 handleScrollTop 事件方法写在这里；
handleScrollTop() {
window.scrollTo(0, 0);
}
render() {
return(
<div>
<Section className="layout clearfix">
<Aside>
<Panels />
<Download />
</Aside>
<Main>
<img className="banner-img" src="https://qdywxs.github.io/jianshu-images/carousel01.jpg" alt="" />
<Label />
<Content />
</Main>
</Section>
{/* ❗️1️⃣-①：给 ToTop 样式组件绑定一个 click 点击事件； */}
<ToTop onClick={this.handleScrollTop}>
<span className="up">^</span>
<span className="tooltip">回到顶部</span>
</ToTop>
</div>
)
}
componentDidMount() {
this.props.changeHomeData();
}
}
const mapDispatchToProps = (dispatch) => {
return {
changeHomeData() {
const action = actionCreators.getHomeInfo();
dispatch(action)
},
}
}
export default connect(null, mapDispatchToProps)(Home);
返回页面查看（成功回到顶部）：
2️⃣继续去实现“在适当时机”显示和隐藏“回到顶部”按钮，打开 home 目录下 store 中的 reducer.js 文件，在其中定义一个变量 showToTop ，用其来保存“样式组件 ToTop ”的“显示”和“隐藏”：
import {fromJS} from "immutable";
import {INIT_HOME_DATA, ADD_HOME_DATA} from "./actionTypes";
const defaultState = fromJS({
labelList: [],
articleList: [],
panelsList: [],
articlePage: 1,
// ❗️2️⃣-①：定义一个变量，用以保存 ToTop 的“显示”和“隐藏”；
showToTop: false // ❗️❗️❗️初始为“不显示”!
})
export default (state=defaultState, action) => {
if(action.type === INIT_HOME_DATA) {
return state.merge({
labelList: action.labelList,
articleList: action.articleList,
panelsList: action.panelsList
})
}
if(action.type === ADD_HOME_DATA) {
return state.merge({
"articleList": state.get("articleList").concat(action.moreArticleList),
"articlePage": action.nextPage
})
}
return state;
}
2️⃣-②：返回 home 目录下的 index.js 文件；
import React, {Component} from "react";
import Content from "./components/Content";
import Label from "./components/Label";
import Panels from "./components/Panels";
import Download from "./components/Download";
import {
Section,
Aside,
Main,
ToTop
} from "./style.js";
import { connect } from "react-redux";
import {actionCreators} from "./store";
class Home extends Component {
handleScrollTop() {
window.scrollTo(0, 0);
}
render() {
return(
<div>
<Section className="layout clearfix">
<Aside>
<Panels />
<Download />
</Aside>
<Main>
<img className="banner-img" src="https://qdywxs.github.io/jianshu-images/carousel01.jpg" alt="" />
<Label />
<Content />
</Main>
</Section>
{/* 2️⃣-⑤：然后，我们在这里来编写“显示”和“隐藏”的逻辑——用“三元运算符”来作判断； */}
{this.props.showToTop ?
<ToTop onClick={this.handleScrollTop}>
<span className="up">^</span>
<span className="tooltip">回到顶部</span>
</ToTop>
:null
}
</div>
)
}
componentDidMount() {
this.props.changeHomeData();
}
}
// 2️⃣-④：定义 mapStateToProps：
const mapStateToProps = (state) => ({
showToTop: state.getIn(["home", "showToTop"])
})
const mapDispatchToProps = (dispatch) => {
return {
changeHomeData() {
const action = actionCreators.getHomeInfo();
dispatch(action)
},
}
}
/*
2️⃣-③：既然 reducer 中新增了“数据”，且本组件会用到这个“数据”，
故，给 connect 传递另一个参数 mapStateToProps，进而去获取到这个“数据”；
注释掉下面这行代码，重新编写~
export default connect(null, mapDispatchToProps)(Home);
*/
export default connect(mapStateToProps, mapDispatchToProps)(Home)
返回页面查看（由于初始为 false ，所以一开始“返回顶部”是不显示的。但，当我们将 showToTop 的值改为 true 时，“返回顶部”又显示出来了）：
✔️由上边的视频可见，控制“返回顶部”的“显示”和“隐藏”，其实就是控制 showToTop 这个“数据”的值（ true / false ）！
3️⃣返回 home 目录下的 index.js 文件：
3️⃣-⑦：请记得去 home 目录下 store 中的 actionTypes.js 和 actionCreators.js 文件中分别定义“常量”和 action；
actionTypes.js
actionCreators.js
3️⃣-⑨：打开 home 目录下 store 中的 reducer.js 文件，编写修改数据的逻辑；
返回页面查看（成功实现在“适当的时机”去“显示”和“隐藏”）：
3 移除 scroll 事件
❗️以上我们虽然实现了本篇一开始提的“需求”，但还有一个点一定得注意：
4️⃣回到 home 目录下的 index.js 文件：
返回页面查看，无任何异常，成功实现：
下一篇，我们开始编写“详情页”的代码，我们再去好好地走走“流程”，用用“套路”。孰能生巧，多写几次，你一定能熟练掌握 React 的使用。
祝好，qdywxs ♥ you！
原文链接：https://juejin.cn/post/7355063847382646795 作者：itsOli
