react基础知识—12.自定义Hook与Hook使用规则

12.1 自定义Hook

有时候我们会想在组件之间重用一些状态逻辑,目前有两种主流方案来解决这个问题:高阶组件和render props。自定义Hook可以让你在不增加组件的情况下达到同样的目的。
自定义Hook是一个函数，其名称"use"开头，函数内部可以调用其他的Hook

import React,{useState,useEffect,useDemo} from "react"

export default function CustomHookPage(props){
  const [count,setCount] = useState(0);
  useEffect(() => {
    console.log("count effect");
    document.title = `点击了${count}次`
  }, [count])

  return(
    <div>
      <h3>自定义Hook</h3>
      <p>{count}</p>
      <button onClick={()=>setCount(count+1)}>add</button>
      <p>{useClock().toLocaleTimeString()}</p>
    </div>
  )
}

//自定义Hook
function useClock(){
  const [date, setDate] = useState(new Date())
  useEffect(() => {
    console.log("date effect")
    const timer = setInterval(()=>{
      setDate(new Date())
    },1000)
    return () => clearInterval(timer);
  }, [])
  return date
}

12.2 Hook使用规则

Hook就是JavaScript函数，但是使用他们会有两个额外的规则：

• 只能在函数最外层调用Hook。不要在循环、条件判断或者子函数中调用。
• 只能在React的函数组件中调用Hook。不要在其他JavaScript函数中使用。

代码下载地址:https://gitee.com/JingYaBei/my-app.git