使用react hooks编写组件 1

首先从react导出useState

	import { useState } from 'react'

然后定义一个函数组件，通过执行useState会得到一个数组，将其解构给value和setValue，此外，useState可以接收一个参数，这样value的值就是传入的参数，而setValue则是用来修改value的值的函数。

const HookDemo = () => {

    const [value, setValue] = useState('hooks demo')
}

export default HookDemo

然后编写HTML代码，分别定义了一个改变value值的函数handleChange和获取value值的函数getValue，这样就可以直接通过useState实现了改变数据从而改变视图。

const HookDemo = () => {

    const [value, setValue] = useState('hooks demo')

    const handleChange = () => {
        setValue('我是改变后的值')
    }

    const getValue = () => {
        console.log(value)
    }

    return (
        <div>
            <input type="text" value={value} onChange={e => setValue(e.target.value)}></input>
            <button onClick={handleChange}>change</button>
            <button onClick={getValue}>get</button>
        </div>
    )
}

export default HookDemo

有了hooks之后就可以通过这些hooks来实现类组件的效果了，写法也比较简单。