hooks|hooks 系列九（hooks 实战）
快来加入我们吧！
"小和山的菜鸟们"，为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验，请您移至我们官网小和山的菜鸟们 ( https://xhs-rookies.com/ ) 进行学习，及时获取最新文章。
"Code tailor" ，如果您对我们文章感兴趣、或是想提一些建议，微信关注 “小和山的菜鸟们” 公众号，与我们取的联系，您也可以在微信上观看我们的文章。每一个建议或是赞同都是对我们极大的鼓励！
实战案例：留言功能
【hooks|hooks 系列九（hooks 实战）】我们学完了 react-hooks 的一些基础内容，现在是我们的一个实战环节。
项目的功能与我们的 React 教程内容相似。具体可参考，React 系列 - 实战案例：增加登录
效果
我们要做的实战很简单，就是一个简单的留言功能。
效果图：
Login 页面
登录状态维护
如果我们登录成功之后，我们应该需要有一个用来存放信息的地方，为之后进行鉴权做准备，我们采用 localStorage 来做数据持久化处理。
this.props.history.replace('/home')
window.localStorage.islogin = '1'鉴权跳转到首页 我们需要在登录页面鉴权，我们让
login 页面在加载完成的时候判断，如果已经登录过了，那么我们就跳转到 home 主页，而要达到这样的效果就需要在 useEffect() 中，在页面展示之前进行判断。useEffect(() => {
let localStorage = window.localStorage
if (localStorage.islogin === '1') {
props.history.replace('/home')
}
})登录页全部代码 用两个
useState() 来记录用户输入的账号密码，然后用于登录验证。import React, { useEffect, useState } from 'react'
import './login.css'function Login(props) {
useEffect(() => {
let localStorage = window.localStorage
if (localStorage.islogin === '1') {
props.history.replace('/home')
}
})const [username, setUsername] = useState('')
const [password, setPassword] = useState('')return (欢迎来到XXX博客区
)function handleLogin() {
if (username && password) {
props.history.replace('/home')
window.localStorage.islogin = '1'
alert('欢迎！')
} else {
alert('请输入用户名和密码！')
}
}
}export default LoginHome 页面
import React, { useState } from 'react'
import Comment from './comment'
import checkRole from './checkRole'
import './App.css'function App(props) {
const [title, setTitle] = useState('Hello Hooks')
const [desc, setDesc] = useState(
'你知道有这么一个团队吗？他们怀揣梦想，艰苦奋斗，作为一群大学生菜鸟，放弃了平时娱乐的时间，选择一起学习，一起成长，将平时学习的笔记，心得总结为文章，目的很简单，希望可以帮助向他们一样的菜鸟们？你想了解更多吗？快搜索微信公众号：小和山的菜鸟们，加入他们吧！',
)
const [comments, setComments] = useState([
{
headPortrait: 'https://xhs-rookies.com/img/rookie-icon.png',
time: new Date(2021, 4, 14, 21, 2, 30),
nickName: '小菜鸟',
detail: '这是一个即将推出系列文章的团队，我们一起期待他们的作品吧！',
liked: true,
likeNum: 23,
},
])
const [text, setText] = useState('')return (退出登录{title}
{desc}评论
{comments.map((item, index) => {
return (
changeLike(index)} {...item} />
)
})}
文章图片
发表)
// 退出登录
function handleLogout() {
window.localStorage.islogin = '0'
props.history.replace('/login')
}
// 改变text
function changeText(e) {
setText(e.target.value)
}function changeLike(index) {
let newArray = [...comments]
let newItem = { ...newArray[index] }
if (newItem.liked) {
newItem.liked = false
newItem.likeNum -= 1
} else {
newItem.liked = true
newItem.likeNum += 1
}
newArray[index] = newItem
setComments(newArray)
}function addComment() {
if (!text) {
alert('请输入留言内容')
return
}
let detail = text
setText('')
let newComment = {
headPortrait: 'https://xhs-rookies.com/img/rookie-icon.png',
time: new Date(),
nickName: '小菜鸟',
detail,
liked: false,
likeNum: 0,
}
setComments([newComment, ...comments])
}
}export default App 用到的组件
comment 组件 这个组件是用来显示用户留言的，按数据展示。
import React from 'react'
import './comment.css'function Comment(props) {
const { nickName, time, headPortrait, detail, liked, likeNum, changeLike } = props
return (
{nickName}
{getTime(time)}
{detail}{!!likeNum && likeNum})function getTime(time) {
const year = time.getFullYear()
const month = time.getMonth() + 1
const day = time.getDate()
const hour = String(time.getHours()).padStart(2, '0')
const minute = String(time.getMinutes()).padStart(2, '0')
const second = String(time.getSeconds()).padStart(2, '0')
return `${year}.${month}.${day}${hour}:${minute}:${second}`
}
}export default Comment总结 到这里，我们的
hooks 实战就已经结束了，虽然只是一个简单的留言功能，但是也包含了 hooks 的一些用法。如果需要查看源码的话，可以查看并下载我们的开源库项目 github 地址
下节预告
hooks 的学习到此已经告一段落，接下来在这个金九银十的时间段，我们将为大家带来精彩的面试题目，敬请期待！推荐阅读
- 小影写在2018九月开学季
- 【欢喜是你·三宅系列①】⑶
- 你不可不知的真相系列之科学
- 让眼泪滑落，成为骄傲(三十九)
- 残卷
- 人脸识别|【人脸识别系列】| 实现自动化妆
- 第十九周
- 一块玻璃要了九岁男童的命|一块玻璃要了九岁男童的命 家长老师是怎么教育孩子的（）
- 九月计划
- 泰拳居家打卡十九天