react17/vue3基础hooks使用对比

创建响应式数据

react：useState/useReducer
vue：ref/reactive

使用：

useState

const testState = useState(false)
const test = testState[0]
const setTest = testState[1]

因为返回的是一个数组，一般使用数组解构赋值

const [test,setTest] = useState(false)
//setState更新值不是实时的，react为提高性能可能会合并多个setState

useReducer

const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}
const [state, dispatch] = useReducer(reducer, initialState);
//取值：state.count
//修改值：dispatch({type: 'decrement'})

ref/reactive

const test = ref(false)//基本类型
const test2 = reactive({count:10})//引用类型

返回一个响应式代理对象

缓存

vue：computed
react：useMemo/useCallback
区分：都接受函数参数，computed自动收集依赖，useMemo/useCallback需手动指定

返回值

const a = ref(1)
const res = computed(()=>{
	return a.value+1
})
//a的值变化后computed会重新计算

const a = useState(1)
const res = useMemo(()=>{
	return a.value+1
},[a])
//a的值变化后useMemo会重新计算
const res2 = useMemo(()=>{
	return a.value+1
},[])
//a的值变化后useMemo不会重新计算

返回函数

const a = ref(1)
const fun = computed(()=>{
	return (addCount)=>{ return a.value+addCount}
})
const res = fun(10)
//a的值变化后computed会重新计算

const a = useState(1)
const fun = useCallback((addCount)=>{
	return a.value+addCount
},[a])
const res = fun(10)
//a的值变化后useMemo会重新计算

副作用

vue:mounted/unmounted/...（同vue生命周期）
react:useEffect

useEffect(()=>{
	//...mounted时执行,dependency改变时执（类似beforeUpdate）
	return ()=>{
		//...unmounted时执行
	}
},[dependency])

ref

vue:ref
react:useRef
ref取值为.value，useRef为.current,其他用法基本一致，数据更新react是实时的

组件多层级传值

vue：provide/inject
react：createContext/useContext

暴露方法/属性给父组件

vue：直接在setup返回即可
react:useImperativeHandle(与 forwardRef 一起使用)
官网示例：

function FancyInput(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);
//渲染 <FancyInput ref={inputRef} /> 的父组件可以调用 inputRef.current.focus()。