本文作者系360奇舞团前端开发工程师
Hooks 的作用
Hooks 是 React 16.8 版本引入的一项特性,它允许在函数式组件中使用状态和其他 React 特性,而不需要使用类组件。Hooks 就是钩子,作用是把某个目标结果钩到某个可能会变化的数据源或者事件源上,那么当被钩到的数据或事件发生变化时,产生这个目标结果的代码会重新执行,产生更新后的结果。
常用的钩子
useState
-
useState(initialState)有一个初始化值作为参数,initialState 可以是任意值
-
返回包含两个值数组,第一个是值,第二个是 set 方法
需要注意的一点,setCount 后,直接获取 count,count 的值是不变的,这是因为 useState 是一个异步操作,它并不会立即更新状态。当你在函数组件中调用 useState 更新状态时,React 会将新的状态安排进下一次渲染,并在之后的某个时候才会执行更新,这导致在更新状态后立即访问该状态可能会得到之前的值,而不是最新的值。
go
//这是一个useState简单使用实例
function Plus() {
const [count, setCount] = useState(1);
function counter(){
setCount(count+1)
}
return (
<div className='plus'>
<div>{count}</div>
<div className='plus-click' onClick={counter}>+</div>
</div>
);
}
useEffect(执行副作用)
副作用是指一段和当前执行结果无关的代码,比如说要修改函数外部的某个变量,要发起一个请求有两个参数。useEffect 有两个参数第一个参数是 callback,第二个是个依赖数组,这个数组可以为空
go
// 在这里count的值发生变化时,clikValue的值及跟着变化,在这个callback里也可以发起网络请求
function CountPlus() {
const [count, setCount] = useState(0);
const [clikValue, setClickValue] = useState("");
useEffect(() =>{
setClickValue("我点击了"+count+"次")
},[count])
function counter(){
setCount(count+1)
}
return (
<div className='plus'>
<div>{count}</div>
<div className='plus-click' onClick={counter}>+</div>
<div>{clikValue}</div>
</div>
);
}
export default CountPlus;
useContext
可以用来在组件树中传递数据
go
//User:是消费提供的值的地方
import React, { useContext } from 'react';
import UserContext from './UserContext';
import '.././index.css';
function User() {
const user = useContext(UserContext)
return (
<div className='plus'>
<p>{user.name}</p>
<p>{user.sex}</p>
</div>
);
}
export default User;
go
// UserContext:创建上下文
import { createContext } from 'react';
const UserContext = createContext();
export default UserContext;
go
//App:是提供上下文值的地方
import User from "./componts/User";
import UserContext from "./componts/UserContext";
import './App.css';
function App() {
return (
<div className="App">
<UserContext.Provider value={{ name: '张三', sex: '男' }}>
<User></User>
</UserContext.Provider>
</div>
);
}
export default App;
useReducer
用于在函数组件中处理复杂的状态逻辑。它通常用于管理具有复杂状态和行为的组件,尤其是涉及到多个状态转换的情况。useReducer 接受两个参数:一个是包含状态转换逻辑的函数(reducer),另一个是初始状态。它返回一个包含当前状态和 dispatch 函数的数组。
go
import CountDis from "./componts/CountDis";
import './App.css';
import React, { useReducer } from 'react'
const reducer = (state, action) => {
switch (action.type) {
case 'count':
return { ...state, count: state.count + 1 }
default:
return state
}
}
function App() {
const [useState, dispatch] = useReducer(reducer, { count: 0 })
return (
<div className="App">
<p>点击了 {useState.count}次</p>
<CountDis dispatch={dispatch}></CountDis>
</div>
);
}
export default App;
go
import React from 'react';
import '.././index.css';
function CountDis({dispatch}) {
function counter(){
dispatch({ type: 'count' })
}
return (
<div className='plus'>
<div className='plus-click' onClick={counter}>+</div>
</div>
);
}
export default CountDis;
useRef
useRef 主要用于在函数组件中保存和访问可变的 ref 对象。useRef 返回一个包含 current 属性的对象,该属性被初始化为传入的参数(任意数据类型) 主要作用
-
访问 Dom 元素
-
保存变量、
go
function CountRef() {
const inputRef = useRef(null);
// 使用 ref 访问 DOM 元素
useEffect(() => {
if (inputRef.current) {
inputRef.current.focus();
}
}, []);
function counter() {
alert(inputRef.current.value)
}
return (
<div className='plus'>
<p>{inputRef.current}</p>
<input ref={inputRef}></input>
<div className='plus-click' onClick={counter}>+</div>
</div>
);
}
export default CountRef;
useCallback
useCallback 的主要目的是性能优化 用于缓存回调函数,以便在依赖项变化时避免不必要的函数重新创建。在 React 中,每当函数组件重新渲染时,函数组件的所有局部变量都会重新初始化。如果将一个新的函数作为 prop 传递给子组件,即使这个函数具有相同的逻辑,由于它是一个新的引用,子组件可能会被重新渲染,从而可能引起性能问题。
go
function CountUseCallback() {
const [count, setCount] = useState(1);
const handleClick = useCallback(() => {
// 处理点击事件逻辑
setCount(count+1)
}, []);
return (
<div className='plus'>
<div>{count}</div>
<div className='plus-click' onClick={handleClick}>+</div>
</div>
);
}
export default CountUseCallback;
useMemo
用于在渲染过程中缓存和重用计算昂贵的值。它类似于 useCallback,但是主要用于缓存计算结果,而不是缓存回调函数。
go
function CountMemo({size}) {
let result = useMemo(() => {
return comuteData()
}, [size])
function comuteData(){
if(size<0){
return 0
}
let sum = 0
for(let i =1;i<=size;i++){
sum+=i
}
return sum
}
return (
<div className='plus'>
<p>{result}</p>
</div>
);
}
export default CountMemo;
总结
上述的钩子里 useState,useEffect,useReducer,useRef 本人用的较为多些,useContext ,useMemo 和 useCallback 用的少些。除了上述钩子之外,还有 useImperativeHandle、useLayoutEffect、自定义钩子等其他用途的钩子。通过深入了解和熟练使用这些钩子,我们可以更有效地构建强大而灵活的 React 应用程序。在使用钩子时,选择适当的钩子来解决您的问题,并根据需要组合使用它们,以获得最佳性能和可维护性。
- END -
关于奇舞团
奇舞团是 360 集团最大的大前端团队,代表集团参与 W3C 和 ECMA 会员(TC39)工作。奇舞团非常重视人才培养,有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择,并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。