React闯关(一) JSX

1. 什么是JSX?

Everything in JS/TS

const Index: FC = () => {
    return (
        <div className="content">Hello</div>
    )
}

2. JSX/TSX没法直接运行在浏览器里，Babel是如何处理JSX的

jsx -> React Element -> Fiber -> HTML Element

创建React element API： React.createElement(type(component), props(attribute), [...children])

React Element: {type, key, props: {..., children: ReactElement}}

React Fiber 图结构(child只向children, return指向父级, sibling指向同级），自身属性Element Tag

*jsx数组结构在fiber图里会自动包一层Fragment

直接操作Jsx render

原因： React自己生成的React Element对于想进阶操作jsx render来说不可控

会使用到的Api：

React.Children.toArray (扁平化规范children类型) React.createElement (创建element) React.cloneElement (复制模板后更新dom)

总体上通过上述三个API规范children类型，进行一些操作。后用cloneElement更新Dom

Babel解析Jsx

Automatic Runtime: 自动解析jsx，无需引入React

Classic Runtime: 必须手动引入React, 不然报错