hook

hook

hook是 16.8新增特性
作用：让函数组件拥有state，类似生命周期，ref,reduce功能

useState

• 模拟state

useEffect

• 一个参数带return
  1. useEffect({}=>{
  console.log(“首次渲染与更新”)
  return {}=>{console.log(首次卸载)}
  })
  2. 模拟
  componentDidMount
  componentDidUpdate
  3. return
  componentWillUnmount
  componentDidupdate
• 第二个参数是空数组,return
  1. useEffect({}=>{
  console.log(“首次渲染与更新”)
  return ()=>{console.log(首次卸载)}
  },[ ])
  2. componentDidMount
  3. compomentWillUnmount
• 第三个参数是具体的值
  1. useEffect({}=>{
  console.log(“首次渲染与更新”)
  return ()=>{console.log(首次卸载)}
  },[num ])
  2. 模拟
  componentDidMount
  componentDidUpdate
  （update只对num有用）
  3. return
  componentDidUpadate
  （update只对num有用）

useRef

- const inp=useRef(null)<input ref={inp}/>
- inp.current.value

自定义hooks

• 定义
  const[size,setSize]=useState({height:xxx,width:xxx})
• 处理
  const onResize=()=>{setSize({width:xxx,height:xxx})}
  useEffect(()=>{
  监听事件 window.addEventListener(“resize”,onResize)
  return 移除监听
  （）=>window.removeEventListener(“resize”,onResize)
  },[])
• 返回return size
• 使用const size=use WInSize()