React第四天——hooks

Hooks基本介绍

hooks是react 16.8的新增特性，它可以让你在不编写class的情况下使用state以及其他react特性

hooks出现，解决了如下一些问题

告别令人疑惑的生命周期
告别烦人的this
告别繁重的类组件，回归前端程序员更加熟悉的函数

useState 和 useEffect

useState略

useEffect包含以下知识点

副作用的概念

函数分为纯函数和带有副作用函数，

纯函数：一个确切的参数在你的函数中运行后，一定能得到一个确切的值，例如
复制代码
```
function test(x){
	return x*2
}
```
如果一个函数中，存在副作用，那我们就称该函数不是一个纯函数，所谓副作用，就是值函数结果不可控，例如发送网络请求，添加监听事件和取消事件，手动修改dom，我们一般将这些副作用写在生命周期钩子，现在写在useEffect这个hook中
- 基本使用
  
  import { useEffect, useState } from "react"
  
  function App(){
  const [count,setCount] = useState(0)
  useEffect(()=>{
  //书写你要执行的副作用，会在组件渲染完成之后执行
  console.log('useEffect');
  复制代码
```
document.title = `你点击了${count}次`
```
  })
  function handleClick(){
  setCount(count+1)
  }
  return (
  
  {count}
  
  <button onClick={handleClick}>+1</button>
  
  )
  }
  export default App;
执行清理操作

import { useEffect, useState } from "react"

function App(){
const [count,setCount] = useState(0)
useEffect(()=>{
const timer = setInterval(()=>{
console.log('effect');
},1000)
//在useEffect中，可以返回一个函数，该函数我们称之为清理函数（一般是做清理操作，）
//该函数会在下一次渲染之后，但在执行副作用操作之前
return ()=>{
clearInterval(timer)
}
})
function handleClick(){
setCount(count+1)
}
return (

{count}

<button onClick={handleClick}>+1</button>

)
}
export default App;

副作用的依赖
目前，我们的副作用函数都会在渲染后重新执行，有些时候我们需要设置依赖项，传递第二个参数，第二个参数为一个依赖数组

import { useEffect, useState } from "react"

function App(){
const [count1,setCount1] = useState(0)
const [count2,setCount2] = useState(0)
const [count3,setCount3] = useState(0)

复制代码

useEffect(()=>{
  //第二个参数是一个数组，只有count1发生变化，才会重新执行Effect
  // 如果第二个参数为空，那么将执行一次
  console.log('执行力effect'); 
},[count1])
return (
  <div>
    <div>{count1}</div>
    <div>{count2}</div>
    <div>{count3}</div>
    
    <button onClick={()=>setCount1(count1+1)}>+1</button>
    <button onClick={()=>setCount2(count2+1)}>+1</button>
    <button onClick={()=>setCount3(count3+1)}>+1</button>

  </div>
)

}
export default App;

自定义Hook

除了官方指定内置的Hook，我们还可以自定义hook，自定义hook本质上就是函数，但和普通函数还是有一点区别的，主要体现在以下两点

自定义hook能够调用诸如 useState,useRef等，普通函数则不能，由此可以通过内置的hooks获得Fiber的访问方式，可以实现在组件级别存储数据的方案
自定义hook需要以use开头，普通函数则没有这个规则，使用use开头更像是一个约定

子组件
import {useState} from 'react'
function useMyBook(){
const [bookName,setBookName] = useState('学习Vue')
return {
bookName,
setBookName
}
}
export default useMyBook

父组件
import {useState} from 'react'
import useMyBook from './components/useMyBook.tsx'
function App(){
const {bookName,setBookName} = useMyBook()
const [value,setValue] = useState('')
function handleChange(e){
setValue(e.target.value)
}
function handleClick(){
setBookName(value)
}
return (

{bookName}

<button onClick={handleClick}>确定</button>

)
}
export default App