React hooks 中 useState的使用

其实吧 我从去年就学习过一段时间 react 说实话对类的写法还是 不太喜欢 喜欢函数的那种简洁感
前段时间 一个培训机构联系我 说要不要 学习前端，我当时也是无聊吧，就让他把大纲发过来，然后就看了了 React hooks 这个显眼的名词
因为之前就是无意之中看过好多次了，这次就下决心去官网 好好看看 原来 其实我也一直再用 只是不知道他的 官方名字而已 而且 也不知道他还有其他的 几个方法 ，一直以为是 react 新增的东西呢。
好了 闲话说的有点多了哈
其实 useState 的作用 就和之前的 class里面的状态管理 是相同的效果 不过 useState 是在函数里面使用的

比较经典的例子就是 计时器了
我们先用以前的方式进行实现下 类的方式 实现

import React, {
      Component } from 'react'

export default class Demo extends Component {
     
    constructor(props) {
     
        super(props)
    
        this.state = {
     
             count:0
        }
    }
    
    addCount(){
     
        this.setState({
     
            count:this.state.count+1
        })
    }
    render() {
     
        return (
            <div>
                <p>You click {
     this.state.count} times;</p>
                <button onClick={
     this.addCount.bind(this)}>+1</button>
            </div>
        )
    }
}

就实现一个计数器 要写那么多的代码 相对来说还是 很难受的

下面看下 通过react hooks 来实现

import React, {
      useState } from 'react'
function Counter(){
     
    const [count, setcount] = useState(0)
    return (
        <>
            <p>You click {
     count} times</p>
            <button onClick={
     ()=>{
     setcount(count+1)}}>+1</button>
        </>
    )
}
export default Counter;

是不是很简短

useState 相当于在函数组件中 封装了一个 类似类中间的 state 状态管理

但是 并不是说 类以后就不能使用了 我个人觉得吧 两种方式还是可以友好共存的 取长补短吧

useState（） 里面是的参数 是 count的初始值 这里我设置是 0
setCount 就是 通过这里可以实现对 count的操作 赋值 相加 等等

 const [count, setcount] = useState(0)

还是一句老话 不要把他们当新的东西来学 那样就很累 只是原来的老东西 封装了一些 导致看起来比较新而已 如果以前 class里面的状态管理很熟练的话 这个很容易上手的
加油 关注我 持续更新前端知识