Hook简介

Hook 是 React 16.8 的新增特性。

Hook都是些函数，这些函数能让你不使用class的情况下还能 “钩入” React state 及生命周期等特性。

class

​x
import React, { Component } from 'react'

export default class Counter extends Component {
    constructor(props) {
        super(props)
        this.state = { count: 0 }
    }
    render() {
        return (
            <div>
                我是一个使用class定义的组件<br />
                <button onClick={() => this.setState({ count: this.state.count + 1 })}>变数</button>
                <h3>数量：{this.state.count}</h3>
            </div>
        )
    }
}

hook

xxxxxxxxxx
import React, { useState } from 'react'

export default function Counter() {
    // 声明一个叫 “count” 的 state 变量。useState返回一个数组
    const [count, setCount] = useState(0)
    return (
        <div>
            我是使用hook的组件<br />
            <button onClick={()=> setCount(count+1)}>变量</button>
            <h3>数量：{count}</h3>
        </div>
    )
}

提示：

React 没有计划移除 class。

什么时候我会用 Hook？

如果你在编写函数组件并意识到需要向其添加一些 state，以前的做法是必须将其它转化为 class。现在你可以在现有的函数组件中使用 Hook。

实时效果反馈

1. 下面说法错误的是：

A Hook是React16.8新增的特性

B 使用Hook就可以不使用class定义组件了

C 同一个应用中使用了Hook就不能使用Class了

D React 16.8以上同时支持Class和Hook

答案

1=>C