JSX 与 Virtual DOM 学习

最新推荐文章于 2024-11-01 13:37:40 发布

huaqi_

最新推荐文章于 2024-11-01 13:37:40 发布

阅读量489

点赞数

分类专栏： React 学习文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/huaqi_/article/details/122624555

版权

本文探讨JSX的本质，揭示其作为React.createElement()的语法糖特性。详细解析React.createElement()参数，特别是children参数的处理。接着介绍了Virtual DOM的概念及其在React中的作用，解释了为何使用Virtual DOM来提高性能并优化DOM操作。最后，阐述了JSX转化为真实DOM的过程以及Virtual DOM在状态管理和性能提升上的优势。

摘要由CSDN通过智能技术生成

JSX 本质

JSX 仅仅是 React.createElement(type, config, children) 函数的语法糖。

注：语法糖（Syntactic sugar），指计算机语言中添加的某种语法，这种语法对语言的功能没有影响，但是更方便程序员使用。语法糖让程序更加简洁，有更高的可读性。

所有的 JSX 最后会被转换为 React.createElement() 的函数调用。
转换示例：
JSX代码：

            <div>
              <p>plan01:</p>
              <h2>{
   this.state.message}</h2>
              <ul>{
   moviesList}</ul>

              <p>plan02:</p>
              <h2>{
   this.state.message}</h2>
              <ul>
                {
   this.state.moviesList.map(item => {
   
                  return <li>{
   item}</li>;
                })}
              </ul>
            </div>