React Hooks基本使用(介绍),Hooks新语法介绍

1、React Hooks介绍
2018年底由FaceBook的小组推出Hooks,得到广泛使用。React Hooks使用函数替代原本的继承类形式，并且使用预函数的形式管理state,以后就不用再使用类的形式定义组件了，所有的类形式组件都可以更改为函数声明了。

2、对比一下React Hooks代码

1、原始写法

import React,{Component} from 'react'

class UseState extends Component{
    constructor(props) {
        super(props);
        this.state = {count:0}
    }

    render() {
        return(
            <div>
                <p>你点击了{this.state.count}次</p>
                <button onClick={this.addCount.bind(this)}>点我+1</button>
            </div>
        )
    }

    addCount(){
        this.setState({
            count:this.state.count + 1
        })
    }
}

export default UseState

2、改用React Hooks之后的写法

import React,{useState} from 'react'
//useState:用来声明状态变量
/*
    用法：声明、读取、使用（修改）基本三项
 */

function ReactHooks() {
    const [count,setCount] = useState(0);
    return(
        <div>
            <p>点击了{count}次</p>
            <button onClick={()=>{setCount(count+1)}}>点我+1</button>
        </div>
    )
}

export default ReactHooks

3、效果预览