目前用react写了几个查询页面,也算实战当做练习了吧,使用到的hooks也就只有useState,useEffect,useForm,这次先记录一下我对前两个hook的理解(可能理解不足,欢迎大牛们提意见)
一、什么是hook
hook翻译为钩子,它的含义是指如果你想使用某些方法,就可以使用钩子将他钩进你的组件中,我目前觉得这里的钩子其实就是定义了一些常用的方法,然后在函数组件中使用它。(注:只能在函数组件中使用这些钩子。)
二、useState
状态钩子:用于为函数组件引入状态(state),纯函数不能有状态,所以把状态放在钩子里面。(这个钩子可以看做全局变量,因为useState是跨整个组件的生命周期的,这个“状态”其实可以存储任意类型的数据,数组、对象等都是可以的,并且可以在组件执行某些事情的时候重新赋予它新的状态)废话不多说直接上实践代码(附用法):
<div id="test"></div>
<script type="text/babel">
/**
* 函数定义的按钮组件
*/
function Button() {
/**
* 使用useState定义两个该组件的全局变量buttonText,num(状态钩子)
* buttonText:按钮上的显示内容
* setButtonText:更改buttonText内容(状态)的函数
* num:点击次数
* setNum:更改num内容(状态)的函数
*/
const [buttonText,setButtonText] = React.useState('初始化内容');
const [num,setNum] = React.useState(0);
// 设置一个点击事件,每次点击时更新它的内容
const Onclick = ()=>{
// 设置num = num+1()更改num的状态
setNum(num=>num+1);
/**
* 由于上述代码并不会立即改变num的数值因此我们需要显示的点击次数还需要+1
* buttonText内容更改后会自动刷新组件的显示内容
*/
setButtonText('第'+(num+1)+'次点击');
}
// 这里是页面上看到的内容
return(
<div style={{padding:'50vh 0 0 50vw'}}>
<button onClick={()=>Onclick()}>{buttonText}</button>
</div>
)
}
/**
*
*/
renderUnit(<Button/>,'test');
</script>
演示结果
三、useEffect
官网说的是Effect Hook 可以让你在函数组件中执行副作用操作,那么什么是副作用呢?
概括地讲,只要是跟函数外部环境发生的交互就都是副作用。那么重点来了,【发生交互】这个我们很熟悉,向后端发送请求不就是一次交互吗?因此我们的请求代码可以写在useEffect里面。
实践代码(附用法):
<div id="test"></div>
<script type="text/babel">
function App() {
// 初始化count = 0
const [count,setCount] = React.useState(0);
/**
* effect(params1,params2)
* @params1 函数,请求代码放在这里
* @params2 依赖,初始化以及当依赖改变时执行params1
*/
React.useEffect(() => {
// 这里模拟ajax请求
setTimeout(()=>{
// 模拟从后台获取到数据后进行赋值
setCount(count+1);
}, 1000);
},[count]);
return (
<div style={{padding:'50vh 0px 0px 50vw'}}>
<h1>当前count值为:{count}</h1>
</div>
)
}
ReactDOM.render(<App/>,document.getElementById('test'))
</script>
结果演示