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>
// }
// }
Top comments (0)