hooks
是react16.8
版本及以上版本可以使用的,它的作用就是使得我们在使用函数创建组件的时候,可以跟使用class
创建组件时达到一样的效果!有了这个就不用考虑改用无状态组件还是有状态组件了!具体使用方式如下
import React, { useState, useEffect} from 'react'
import ReactDom from 'react-dom'
// 定义函数式组件
const Title = function () {
// name 赋初始值为'张珊'
const [name, setMyState] = useState('张珊');
return (
<div>
<h1 name ={name}>{name}</h1>
</div>
)
}
// 定义函数式组件
const TestHooks = function() {
// myState设置初始值为1
const [myState, setMyState] = useState(1);
// 这里的useEffect相当于类组件中的componentDidMount()和componentDidUpdate()的集合,也就是说,该函数会在组件挂
// 载完成和组件更新完成之后执行
useEffect(() => {
console.log('初始化组件的时候执行,每次点击都执行了');
})
return (
<div>
<Title></Title>
<h1>{myState}</h1>
{
/**
* 通过setMyState修改状态值
*/
}
<button onClick = {() => setMyState(myState +1)}>点击</button>
</div>
)
}
export default TestHooks;