当前位置：首页 > news >正文

【React】Hooks

news 文章来源：https://blog.csdn.net/m0_63300737/article/details/129051765 2024/11/18 21:52:40

🚩🚩🚩
💎个人主页: 阿选不出来
💨💨💨
💎个人简介: 一名大二在校生,学习方向前端,不定时更新自己学习道路上的一些笔记.
💨💨💨
💎目前开发的专栏: JS 🍭Vue🍭React🍭
💨💨💨

文章目录

什么是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(() => {//effectreturn ()=> {//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])
<button></button>

只有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);
<Swiper ref={myswiper}/>

useRef 可以保存住先前的值，保存临时变量不丢失，绑在DOM上实现组件通信或组件访问。

useContext（减少组件层级）

先了解一下context。

创建 context 对象

const GlobalContext = React.createContext()

父组件中

<GlobalContext.Provider value={{call:"打电话"，sms:"发短信"，info:"xxxxxxx"}}></GlobalContext.Provider>

子组件中

<GlobalContext.Consumer>{(value)=>{{call}-{sms}-{info}}}
</GlobalContext.Consumer>

使用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选择进行什么操作。

缺点：不支持异步操作。

注意：不能影响原状态。需要对原状态进行深复制。