Vue基础速成React（一）

灵感

最近刚好要接手React，之前在项目中大多使用vue2 vue3 作为技术栈开发，使用了react之后我感觉到它和vue有许多用法类似，我想开一个栏目去写一下速成教程，方便需要临时从vue转到react的开发者可以无缝衔接

提示：这里主要是vue3 =》react function component 的 application

常用函数

React	Vue3
useState	ref / reactive
useRef	ref
useEffect	onUpdated
useEffect with [ ]	onMounted
useEffect with return callback	onBeforeUnmount
useEffect with watch props	watch
useCallback	computed of function
useMemo with watch props	computed of props

其他

关于获取子组件实例，在vue中可以在子组件定义ref属性，使用ref可以获取

在react中，需要在子组件使用forwardRef函数配合useImperativeHandle函数,如下

// child component 

import React, { useImperativeHandle, forwardRef } from 'react';

const Child = forwardRef((props, ref) => {
    useImperativeHandle(ref, () => ({
        print: () => {
            console.log('This is from child component!');
        }
    }));

  return <div>Child Component</div>;
});

export default Child;

// parent component

import Child from './child.tsx'
import { useRef } from 'react'

const Parent = () => {
    const childRef = useRef()
    const handleClick = () => {
        childRef.current.print();
    }
    return (
        <Child ref={ childRef } />
        <button onClick={ handleClick } >click me!</button>
    )
}


export default Parent 

React特有

       React.memo

        主要场景用于减少组件没有必要的更新,当prop值没有修改不会重新渲染,但无法deep监测prop更改,需要注意,另外可以传入第二个参数对前后的props的值进行自定义比较,返回布尔值来决定是否更新

import { memo } from 'react'

// component rerender when props shallow change
const MemoComponent = memo((props) => {

    return <div>{props}</div>
})

export default MemoComponent 

import { memo } from 'react'

// Compare whether custom values are the same
const isArequl = ( oldPoprs, newProps) => {
    reutrn newProps.a === oldPoprs.b
}

// 
const MemoComponent = memo((props) => {

    return <div>{props}</div>
},isArequl)

export default MemoComponent 

结语

有空再更新第二节,希望可以帮到你 !