【React】Hooks
个人主页: 阿选不出来
个人简介: 一名大二在校生,学习方向前端,不定时更新自己学习道路上的一些笔记.
目前开发的专栏: JS VueReact
文章目录
- 什么是hooks?
- 为什么用hooks？
- 常用的hooks
-
- useState(保存组件状态)
- useEffect(处理副作用)和useLayoutEffect(同步执行副作用)
- useCallback(记忆函数)
- useMemo(记忆组件)
- useRef(保存引用值)
- useContext（减少组件层级）
- useReduce
什么是hooks?
- Hook是React 16.8.0 版本新增的新特性/新语法。
- 可以让你在函数组件中使用 state 以及其他的 React 特性。
为什么用hooks？
- 高阶组件为了复用，导致代码层级复杂。
- 生命周期的复杂。
- 写成functional组件，无状态组件，因为需要状态，又改成了class，成本高。
常用的hooks
useState(保存组件状态)
const [age,setage] = useState(initalState)
age就是存储的状态，通过setage(value)能修改 age的值为 value 。
useEffect(处理副作用)和useLayoutEffect(同步执行副作用)
Function Component 不存在生命周期，所以不要把Class Component 的生命周期概念搬过来试图对号入座。
useEffect(() => {
//effect
return ()=> {
//cleanup
};
},[依赖的状态；空数组，表示不依赖])
第二个参数如果为空数组，就说明它不依赖于其他任何数据，从组件创建到销毁的过程中只会执行一次。
如果不是空数组，除去第一次执行外，数组中的变量值改变，也会再次执行这个函数。
不要对Dependencies 撒谎， 如果你明明使用了某个变量，却没有申明在依赖中，你等于向React撒了谎，后果就是，当依赖的变量改变时，useEffect也不会再次执行，eslint 会报警告。
返回值
当useEffect的返回值为回调函数时，如果第二个参数为空数组，这个调用函数会在组件被销毁的时候执行，这个时候适合清空定时器，取消订阅，取消绑定事件等。
如果第二个参数不是空数组，那么这个回调函数会在销毁和依赖的数据更新时执行。
useEffect和useLayoutEffect有什么区别？
简单来说就是调用的时机不同，useLayoutEffect和原来componentDidMount &componentDidUpdate一致，在react完成DOM更新后马上同步调用的代码，会阻塞页面渲染。而useEffect是会在整个页面渲染完才会调用的代码。
官方建议优先使用 useEffect。
在实际使用时如果想要避免页面抖动（在 useEffect 里修改DOM很有可能出现）的话，可以把需要操作DOM的代码放到 useLayoutEffect里。在这里做点dom操作，这些dom修改会和 react 做出的更改一起被一次性渲染到屏幕上，只有一次回流、重绘的代价。
useCallback(记忆函数)
防止因为组件重新渲染，导致方法被重新创建，起到缓存作用，只有第二个参数变化了，才重新声明一次
var handleClick = useCallback(()=>{
console.log(name)
},[name])
只有name改变后，这个函数才会重新声明一次。
如果第二个参数传入空数组，那么name第一次创建后就被缓存，当再次执行 handleClick时，即使name后期改变了，拿到的还是老的name。
如果不传第二个参数，每次都会重新渲染一次，拿到的是最新的name。
useMemo(记忆组件)
useCallback的功能完全可以由 useMemo 所取代，如果你想通过使用 useMemo 返回一个记忆函数也是完全可以的。
useCallback(fn,inputs) is equivalent to useMemo(()=>fn,inputs).
唯一的区别是：**useCallback不会执行第一个参数函数，而是将它返回给你，而 useMemo会执行第一个函数并且将函数执行结果返回给你。**所以在前面的例子中，可以返回 handleClick 来达到存储函数的目的。
所以 useCallback常用记忆事件函数，生成记忆后的事件函数并传递给子组件使用。而 useMemo更适合经过函数计算得到一个确定的值，比如记忆组件。
useRef(保存引用值)
const myswiper = useRef(null);
useRef 可以保存住先前的值，保存临时变量不丢失，绑在DOM上实现组件通信或组件访问。
useContext（减少组件层级）
先了解一下context。
创建 context 对象
const GlobalContext = React.createContext()
父组件中
子组件中
{
(value)=>{
{call}-{sms}-{info}
}
}
使用context的形式，子组件能通过 value这个参数获取到父组件传来的属性。
而 useContext()可以在子组件内通过 const value = useContext(GlobalContext)直接获取父组件传来的属性。不需要再写 GlobalContext.Consumer这种标签。
useReduce
实现了React视图逻辑于数据逻辑的分离开来。
也就是说组件的状态与函数方法写到组件实例的外部。
组件内：
const [state,dispatch] = useReducer(reducer,initialState)
state表示状态对象， dispatch传入参数对象，根据标识执行函数方法。
dispatch({
type:"a",
value:"b"，
...
})
组件外
const initialState = {
count:0
}
表示创建了count对象，组件内可以通过 state.count获取。
const reducer = (prevState,action)=>{
let newState = {...prevState}
switch(action.type){
case "a":
...
return ...
case "b":
...
return ...
default:
return prevState
}
}
两个参数：
prevState：组件的现状态对象action：dispatch()传入的对象。
根据 action.type选择进行什么操作。
缺点：不支持异步操作。
注意：不能影响原状态。需要对原状态进行深复制。