1, React Hooks basic use (description)

1, React Hooks introduced
by the end of 2018 by the launch of Hooks FaceBook group, widely used. React Hooks function instead of using the original form of inherited classes, and using pre-function form of management state, the future will not need to use the formal definition of a component class, all classes in the form of components can be changed as a function of the statement.

2, compare React Hooks Code

1, the original wording

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, written after the switch to 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, the effect preview