hooks 系列九：hooks 实战

快来加入我们吧！

"小和山的菜鸟们"，为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验，请您移至我们官网小和山的菜鸟们 ( https://xhs-rookies.com/ ) 进行学习，及时获取最新文章。

"Code tailor" ，如果您对我们文章感兴趣、或是想提一些建议，微信关注 “小和山的菜鸟们” 公众号，与我们取的联系，您也可以在微信上观看我们的文章。每一个建议或是赞同都是对我们极大的鼓励！

实战案例：留言功能

我们学完了 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博客区

      

        

          
           setUsername(e.target.value)}
          />
        

        

          
           setPassword(e.target.value)}
          />
        

        
 handleLogin()}>
          登录
        

      

    

  )

  function handleLogin() {
    if (username && password) {
      props.history.replace('/home')
      window.localStorage.islogin = '1'
      alert('欢迎！')
    } else {
      alert('请输入用户名和密码！')
    }
  }
}

export default Login

Home 页面

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} />
          )
        })}