react18剖析

react剖析

使用脚手架搭建 react 项目

vite

npm create vite@latest my-react-app --template react-ts

create-react-app

npx create-react-app my-react-app --template typescript

jsx

jsx 是在 javascript 代码中编写 html 代码的一种规范。

jsx 通过编译器进行转换，babel(@babel/preset-react、plugin-transform-react-jsx)

转换后变成可以执行的代码

在线转换地址：babel在线转换

再在 react 运行时，通过 react 定义的 jsx 创建出 ReactElement

hooks

• useState
• useReducer
• useRef
• useMemo
• useCallback
• useContext

ref

不仅仅可以作为 dom 的引用，还可以作为不需要引起视图更新的数据存储

function App() {
    const ref = useRef(null)
    useEffect(() => {
        console.log(ref.current)
    }, []);
    return (
        <>
            <div ref={ref}>
                Ref demo
            </div>
        </>
    )
}

forwardRef

Suspense

lazy

memo