1.Hooks
1.在函数组件中没有state(状态),也没有声明周期
2.react hooks,可以让react函数组件也拥有状态
NO.1:useState
1.在函数组件中使用useState来定义响应式数据,接收一个参数(变量的默认值)
2.setkeyword 相当于 setState,用来修改keyword的值
代码如下
import React, { useState } from 'react';
function Demo() {
// 定义响应式变量 show
let [show,setShow] = useState(true);
//点击事件
const clickNumber = ()=> {
//修改
setShow(!show); //可以多次点击
// setShow(show=false); //只可以点击一次
}
return (<div>
<button onClick={clickNumber}>切换</button>
<p>
{
show?<span>123</span>:<span>456</span>
}
</p>
</div>);
}
export default Demo;
No.2:useEffect
-
一个参数: 函数, 只要状态发生了变化, 函数就会执行,(默认先执行一次)
-
两个参数: 函数+空数组, 只会执行一次
-
两个参数: 函数+非空数组, 数组中的状态都发生了改变, 函数才会被调用