1 React JSX如何渲染?
JSX 本身不能被浏览器直接识别和执行,因为它不是标准的 JavaScript 语法。
JSX 是一种语法扩展,它允许开发者在 JavaScript 中以类似HTML的语法编写UI结构。
- 使用编译器(如Babel):Babel 可以将 JSX 代码转换为普通的 JavaScript 函数调用,通常是 React.createElement() 函数调用。这个过程被称为转译(transpilation)。例如:
const element = <h1>Hello, world!</h1>;
会被 Babel 转换为:(@babel/plugin-transform-react-jsx转化插件)
const element = React.createElement("h1", null, "Hello, world!");
React.createElement()
函数是React框架的核心之一。它接收三个参数:
- 类型:组件的类型,可以是一个类(React.Component)或函数(function)。
- props:传递给组件的属性。
- children:子元素或内容。
Babel完成转换后,会输出纯JavaScript代码,这些代码可以在不支持JSX的JavaScript环境中运行。
- 渲染
一旦你通过React.createElement()创建了元素(即React元素),React的渲染流程会接管:
调和过程(Reconciliation):React会比较新旧元素的差异,决定如何高效地更新DOM。
渲染:React根据调和过程的结果,调用原生的DOM API来更新浏览器的DOM结构。
组件生命周期:React会根据需要调用组件的生命周期方法,如componentDidMount、componentDidUpdate等。