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);

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

useEffect语法：

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

其中，第一个参数是一个箭头函数，代表要执行的内容，第二个参数是一个列表，你面的内容就是要监听的内容，如果列表为空，则监听所有。也就是说，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>
  )
}

useParam 与 useHistory

useParam语法：

声明：

const params = useParams();

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

useHistory语法：

声明：

const history = useHistory();

跳转：

<button onClick={()=>{
  history.push('/')
}}>Home</button>

实例代码

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