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 (<div><div>{count}</div><button onClick={handleClick}>+1</button></div>)
}
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 (<div><div>{count}</div><button onClick={handleClick}>+1</button></div>)
}
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 (<div><div>{bookName}</div><input type="text" value={value} onChange={handleChange}></input><button onClick={handleClick}>确定</button></div>)
}
export default App