React基础之自定义hook函数
自定义Hook是以use打头的函数，通过自定义Hook函数可以来实现逻辑的封装与复用
封装自定义hook的通用思路
1.声明一个以use大头的函数
2.在函数体内封装可复用的逻辑
3.把组件中用到的状态或者是状态以对象或是数组的形式return出去
4.在需要使用组件的地方，执行这个函数，结构出需要使用的状态和回调进行使用
import React, { useState } from 'react';
import { useEffect } from 'react';
function useToggle(){
const [value,setValue]=useState(true)
const toggle=()=>{
setValue(!value)
}
//那些状态和回调函数需要在其他组件中使用 return
return{
value,
toggle
}
}
function App() {
const {value,toggle} =useToggle()
return (
<div>
{value&& <div>this is div</div>}
<button onClick={toggle}>toggle</button>
</div>
);
}
export default App;
ReactHooks使用规则
1.只能在组件中或其他自定义hook函数中调用
2.只能在组件的顶层调用，不能嵌套在if、for、其他函数中
import React, { useState } from 'react';
useState('')//错误的
function App() {
if(Math.random()>0.5){
useState('')//错误的
}
return (
<div>
</div>
);
}
export default App;