React Hooks

Hook 是什么

Hook是一个特殊的函数，它可以让你钩入React的特性，让函数组件拥有state，ref，reduce等功能。
什么时候我们会用Hook？如果在你编写函数组件并意识到需要向其添加一些state，以前的做法是必须将其转换为class，现在你可以在现有的函数组件中使用Hook。

Stare hook

stare hook的主要作用就是过去需要的state和更新state的方法
使用方法

const [state,setState] = useState(initialState)

参数initialState可以直接是当前state的初始值，也可以是一个函数，函数的返回值将作为state的值，参数只会在组建的初始渲染中起作用。
返回值：返回的是一个数组，一个当前state的值，另一个是更新state的方法，这里面setState方法与class中的setState不同在于，此setState不会合并state中的值

function Hooks(props){
const [num,setNum] = useState(0)  //定义一个变量num默认值为0
useEffect(()=>{
console.log("更新"+num)
return ()=>{
console.log("被卸载了")
}
}，[num]）

Effect hook

useEffect方法是在每次渲染之后执行，可以理解为class写法中的 compontentDidMount / compontentDidUpdate
参数：function，在每次渲染之后执行，在函数里可以编写更新dom，添加订阅 等。
执行条件useEffect的第二个参数是一个数组，只有但数组中的值发生改变的时候才会调用effect，如果执行在第一次挂载和卸载的时候调用，只需要传一个【】空数组 代码同上
参数返回值：function(可以不返回)如果didUpdate函数中返回了一个函数，这个函数会在组件写在前执行需要清除上次订阅的内容可以在这里面写。

自定义Hook

function Hooks(props){
const size = useWinSize();
}
//定义一个useWinSize
function useWinSize(){
const [size,setSize] = useState({
 height:window.innerHeight,
 width:window.innerWidth,
})
//初始话size的高与宽
const onResize=()=>{
setSize({
  height:window.innerHeight,
 width:window.innerWidth,
})
}
useEffect(()=>{
window.addEventListener("resize",onResize)
return ()=>{
window.removeEventListener("resize",onResize)
}
},[])
return size;
}

原理同上！