react的hooks - 技术栈

useState：状态管理---在函数组件中添加响应式状态。

例：

javascript 复制代码

const [count, setCount] = useState(0);
setCount(5)//更新count的值

相当于vue的 ref / reactive：

javascript 复制代码

const count = ref(0)
count.value = 5

2.useEffect：副作用处理---处理副作用（数据获取、订阅、DOM操作等）。

例：

javascript 复制代码

useEffect(()=>{
  //组件挂载或更新时执行
  document.title = `Count:${count}`;
  return()=>{
   //清理函数（组件卸载或依赖变化前执行）
   console.log('清理')
  }
},[count]) //依赖数组

相当于vue的 watch / watchEffect：

javascript 复制代码

watch(count,(newVal)=>{
  document.title = `Count:${newVal}`
  return ()=> console.log('清理');
})

//或者使用watchEffect
watchEffect(()=>{
   document.title = `Count:${count.value}`
})

3.useContext:跨组件数据传递---无需props层层传递，直接获取上下文数据。

javascript 复制代码

const ThemeContent = createContext('light')
const theme = useContext(ThemeContent )

相当于vue的provide / inject：

javascript 复制代码

import {inject} from 'vue'
const theme = inject('theme')

4.useReducer：复杂状态管理---适用于复杂状态逻辑（类似redux）。

javascript 复制代码

const [state,dispatch] = useReducer(reducer,initialState);
dispatch({type:'increment'})

相当于vue的pinia：

javascript 复制代码

const state = reactive({count:0});
function dispatch(action){
  if(action.type === 'increment') state.count++
}

5.useRef：引用/DOM访问

javascript 复制代码

const inputRef = useRef(null);
<input ref={inputRef} />
inputRef.current.focus()//访问dom

相当于vue的ref：

javascript 复制代码

const inputRef = ref(null);
<input ref="inputRef" />
inputRef.value.focus(); // 访问DOM

6.useMemo：记忆化计算---缓存计算结果，优化性能

javascript 复制代码

//computeExpensiveValue是开发者自定义的复杂的计算函数
const expensiveValue = useMemo(()=>{
   return computeExpensiveValue(a,b);
},[a,b])//只有a或者b变化时才重新计算

相当于vue的computed：

javascript 复制代码

const expensiveValue = computed(()=>{
  return computeExpensiveValue(a.value,b.value)
})//computeExpensiveValue是开发者自定义的复杂的计算函数

7.useCallback：记忆化函数---缓存函数引用，避免子组件不必要的重新渲染。

javascript 复制代码

const handleClick = useCallback(()=>{
  console.log(count)
},[count])//依赖变化时才重新创建函数

相当于vue的手动优化，只有一依赖变化时才执行的函数：

javascript 复制代码

const handleClick = ()=>{
   console.log(count.value)
}

8.useLayoutEffect：同步副作用---在DOM更新后、浏览器绘制前同步执行。

javascript 复制代码

useLayoutEffect(()=>{
//DOM更新后同步执行（在浏览器绘制前）
  measureDOM()
},[deps])

相当于vue的nextTick + watch：

javascript 复制代码

// Vue 3（nextTick + watch）
watch(someRef, () => {
  nextTick(() => {
    measureDOM();
  });
});

9.自定义Hooks：逻辑复用

javascript 复制代码

//自定义Hooks
function useLocalStorage(key,initialValue){
  const [value,setValue] = useState(()=>{
    const stored = localStorage.getItem(key)
    return stored ? Json.Parse(stored) : initialValue
  })
   
  useEffect(()=>{
     localStorage.setItem(key.Json.stringify(value));
  },[key,value])

  return [value,setValue]
}

//使用
 const [name,setName] = useLocalStorage('name','默认名')

相当于vue：

javascript 复制代码

//vue3自定义组合函数
function useLocalStorage(key,initialValue)=>{
  const value = ref(initialValue);
  const stored = localStorage.getItem(key);
  if(storde) value.value = Json.parse(stored)

  watch(value,(newVal)=>{
    localStorage.setItem(key,Json.stringfy(newValue))
  })
  
  return {value}
}

//使用
const {value:name} = useLocalStorage('name','默认名')