react基础知识-11.Hook

11.1 认识Hook

Hook是一个特殊的函数，它可以让你"钩入"React的特性,例如，useState是允许你在react函数组件中添加state的Hook，如果你在编写函数组件并意识到需要向其添加一些state,以前的做法是必须转化为class,但是现在你可以在现有函数组件中使用Hook

import React,{useState} from "react"

export default function HookPage(props){
  const [count,setCount] = useState(0)
  return (
    <div>
      <h3>HookPage</h3>
      <p>{count}</p>
      <button onClick={()=>setCount(count+1)}>add</button>
    </div>
  )
}

11.2 使用Effect Hook

Effect Hook可以让你在函数组件中执行副操作
数据获取,设置订阅以及手动更改React组件中的Dom都属于副作用

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

export default function HookPage(props){
  const [count,setCount] = useState(0)
  //与componentDidMount和componentDidUpdate相似
  useEffect(()=>{
    document.title = `You clicked ${count} times`
  })
  return (
    <div>
      <h3>HookPage</h3>
      <p>{count}</p>
      <button onClick={()=>setCount(count+1)}>add</button>
    </div>
  )
}

在函数组件主体内（这里指在 React 渲染阶段）改变 DOM、添加订阅、设置定时器、记录日志以及执行其他包含副作用的操作都是不被允许的，因为这可能会产生莫名其妙的 bug 并破坏 UI 的一致性。
使用 useEffect 完成副作用操作。赋值给 useEffect 的函数会在组件渲染到屏幕之后执行。默认情况下，effect 将在每轮渲染结束后执行，但你可以选择让它在只有某些值改变的时候才执行

• effect的条件执行

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

export default function HookPage(props){
  const [count,setCount] = useState(0)
  const [date,setDate] =useState(new Date())
  useEffect(()=>{
    document.title = `You clicked ${count} times`
  },[count])
  useEffect(()=>{
    const timer = setInterval(()=>{
      setDate(new Date());
    },1000)
  },[])
  return (
    <div>
      <h3>HookPage</h3>
      <p>{count}</p>
      <button onClick={()=>setCount(count+1)}>add</button>
      <p>{date.toLocaleTimeString()}</p>
    </div>
  )
}

只有当useEffect第二个参数数组中的数值改变时，才会重新创建订阅

• 清除effect

组件卸载时，需要清除effect创建的诸如订阅或者计时器等资源，要实现这一点，需要返回一个清楚函数，防止内存泄露,清除函数会在组件卸载前执行。

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

export default function HookPage(props){
  const [count,setCount] = useState(0)
  const [date,setDate] =useState(new Date())
  useEffect(()=>{
    document.title = `You clicked ${count} times`
  },[count])
  useEffect(()=>{
    const timer = setInterval(()=>{
      setDate(new Date());
    },1000)
    return()=>clearInterval(timer)
  },[])
  return (
    <div>
      <h3>HookPage</h3>
      <p>{count}</p>
      <button onClick={()=>setCount(count+1)}>add</button>
      <p>{date.toLocaleTimeString()}</p>
    </div>
  )
}

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