DEV Community

Jihao Deng
Jihao Deng

Posted on

RCT007 React Hooks

React Hooks

Hooks主要用于解决函数式组件无状态、无生命周期的问题。

本篇主要介绍以下几个Hooks:

  • useState 状态
  • useEffect 类似生命周期中的 didMount 和 didUpdate
  • useParam 获取参数(内部封装)
  • useHistory 通过js api操作路由跳转

useState 与 useEffect

现在我们实现一个点赞的函数组件,其中有一个点赞数的状态count,以及两个按钮:赞和踩,它们的效果分别是点赞数+1和-1。每次点赞数改变,浏览器都会在控制台中打印一段话。

使用useState让组件拥有state状态,使用useEffect来监听某个状态的改变。

useState语法:

const [count, setCount] = useState(0);
Enter fullscreen mode Exit fullscreen mode

其中,count是状态名,setCount是设置这个状态的方法,它会调用render函数,useState(0)是将这个状态的初始值设为0。

useEffect语法:

useEffect(()=>{
  console.log('count updated, current count: ' + count);
}, [count])
Enter fullscreen mode Exit fullscreen mode

其中,第一个参数是一个箭头函数,代表要执行的内容,第二个参数是一个列表,你面的内容就是要监听的内容,如果列表为空,则监听所有。也就是说,useEffect()里面第二个参数变了,就会执行第一个参数里面的代码。

实例代码

import React, {useState,useEffect} from 'react'

export default function Count() {
  const [count, setCount] = useState(0);
  useEffect(()=>{
    console.log('count updated, current count: ' + count);
  }, [count])
  return (
    <div>
      <h1>Like or Dislike ?</h1>
      <p>current likes: {count}</p>
      <button onClick={()=>{setCount(count + 1)}}>Like</button>
      <button onClick={()=>{setCount(count - 1)}}>Dis</button>
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

useParam 与 useHistory

useParam语法:

声明:

const params = useParams();
Enter fullscreen mode Exit fullscreen mode

此时,params就是一个json数据,可以直接使用params.xxx来获取参数的值。

useHistory语法:

声明:

const history = useHistory();
Enter fullscreen mode Exit fullscreen mode

跳转:

<button onClick={()=>{
  history.push('/')
}}>Home</button>
Enter fullscreen mode Exit fullscreen mode

实例代码

import React from 'react'
import {useParams,useHistory} from "react-router-dom";

export default function Profile() {
  const params = useParams();
  const history = useHistory();
  return (
    <div>
      <p>The params: {JSON.stringify(params)}</p>
      <p>The user ID is: {params.userId}</p>
        <button onClick={()=>{
            history.push('/')
        }}>Home</button>
    </div>
  )
}

// 之前使用class组件时的版本,相比之下函数组件更加简单明了
// export default class Profile extends React.Component {
//   jumpHome = () => {
//     this.props.history.push('/')
//   }
//
//   render() {
//     return <div>
//       <h1>this is detail</h1>
//       {/* 获取路由参数 */}
//       <p>当前的参数值为:{this.props.match.params.userId}</p>
//       <button onClick={this.jumpHome}>Home</button>
//     </div>
//   }
// }

Enter fullscreen mode Exit fullscreen mode

Top comments (0)