Hook 是 React 16.8 的新增特性,它可以让你在不编写 class 的情况下 使用 state 以及其他的React 特性。
React Hooks 编写形式对比:
class 写法:
import React, { Component } from 'react' export default class Example extends Component { state={ count:0 } handleClick=()=>{ this.setState({count:this.state.count+1}) //不能写this.state.count++ } render() { return ( <div> <p>点击了{this.state.count}次</p> <button onClick={this.handleClick}>点击</button> </div> ) } }
hooks 写法:
import React, { useState } from 'react' function Hexample(){ const [count,setCount] = useState(0) return ( <div> <p>点击了{count}次</p> <button onClick={() => setCount(count + 1)}>点击</button> </div> ) } export default Hexample;