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、效果预览