React 引入import React详解

最新推荐文章于 2024-04-12 19:28:24 发布

des杜甫

最新推荐文章于 2024-04-12 19:28:24 发布

阅读量1.3k

点赞数

文章标签： html5 javascript reactjs es6 css3

本文链接：https://blog.csdn.net/mediven/article/details/103800583

版权

本文深入探讨React框架，解释JSX语法如何转换为React.createElement，并介绍虚拟DOM的概念。通过实现简单的React.createElement方法，理解React更新DOM的机制。文章还提及了React与Vue的对比，强调React的设计哲学和简洁性。

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

本质上来说JSX是React.createElement(component, props, …children)方法的语法糖。

所以我们如果使用了JSX，我们其实就是在使用React，所以我们就需要引入React

###前言
React是前端最受欢迎的框架之一，解读其源码的文章非常多，但是我想从另一个角度去解读React：从零开始实现一个React，从API层面实现React的大部分功能，在这个过程中去探索为什么有虚拟DOM、diff、为什么setState这样设计等问题。

提起React，总是免不了和Vue做一番对比
Vue的API设计非常简洁，但是其实现方式却让人感觉是“魔法”，开发者虽然能马上上手，但其原理却很难说清楚。

相比之下React的设计哲学非常简单，虽然有很多需要自己处理的细节问题，但它没有引入任何新的概念，相对更加的干净和简单。

关于jsx
在开始之前，我们有必要搞清楚一些概念。

我们来看一下这样一段代码：

const title = <h1 className="title">Hello, world!</h1>;

这段代码并不是合法的js代码，它是一种被称为jsx的语法扩展，通过它我们就可以很方便的在js代码中书写html片段。

本质上，jsx是语法糖，上面这段代码会被babel转换成如下代码：

const title = React.createElement(
    'h1',
    { className: 'title' },
    'Hello, world!'
);
　　
</

关注