React | 初学react（JSX创建虚拟DOM、创建组件的两种方法）

最新推荐文章于 2024-03-21 22:39:09 发布

胖者是谁

最新推荐文章于 2024-03-21 22:39:09 发布

阅读量855

点赞数 1

分类专栏： JS 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/m0_72383454/article/details/127565681

版权

JS 专栏收录该内容

37 篇文章 2 订阅

订阅专栏

了解React~

它是一个将数据渲染为HTML视图的js库，采用组件化模式，声明式编码，提高开发效率和组件复用性；在React Native中可以用react预发进行安卓、ios移动端开发；使用虚拟dom和有些的diffing算法，尽量减少与真实dom的交互，提高性能。

一、React JSX

二、模块与组件的理解

三、React面向组件编程

一、React JSX

首先，我们的准备工作：

    <!-- 准备好容器 -->
    <div id="root"></div>
    <!-- 引入react核心库 -->
    <script src="./js/react.development.js"></script>
    <!-- 引入react扩展库 操作DOM元素 -->
    <script src="./js/react-dom.development.js"></script>
    <!-- 把JSX语法转化为JS -->
    <script src="./js/babel.min.js"></script>

我们的工作原理，是将虚拟DOM转换成真实DOM。

其次，我们创建虚拟DOM有两种方式：JS和JSX。

但是通过JS来创建对于我们来说十分的不方便，用JSX来创建虚拟DOM也只是JS的一个语法糖，最后还是转换成html结构的形式，所以一般我们用JSX来创建虚拟DOM，但是我们还是来看一下区别。

通过JS创建虚拟DOM：

 <script>
        // 通过JS来创建虚拟DOM
        const V_DOM = React.createElement("p",{title:'react'},React.createElement('span',{},'hello,react~'))
        ReactDOM.render(V_DOM,document.getElementById('root'))
    </script>

通过JSX创建虚拟DOM：

    <script type="text/babel">
        // 1.创建虚拟DOM
        const V_DOM = (
            <h1>
                <span>
                    hello,react~
                </span>
            </h1>
        )
        // 2.渲染虚拟DOM到页面
        ReactDOM.render(V_DOM,document.getElementById('root'))
    </script>

其中需要注意的是，我们的script标签中，type要写成【text/babel】，我们通过babel来把JSX转换成JS。

JSX语法规则：

定义虚拟DOM，不要写引号
标签中混入JS表达式时要用（）
样式的类名指定不要用class，要用className
内联样式，要用style={{key:value}}的形式去写
只有一个要标签
标签必须标签
标签首字母：小写字母开头，则将标签转为html中同名元素，若html中无譔标签对应的同名元素，则报错；大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

二、模块与组件的理解

模块:随着业务逻辑增加，代码越来越多且复杂，为了复用JS，简化JS 的编写，提高JS运行效率，向外提供特定功能的JS程序，一般就是一个JS文件。

组件：一个界面的功能更复杂，为了复用编码，简化项目编码，提高运行效率，组件用来实现局部功能效果的代码和资源的集合（html/css/js/image等等）

三、React面向组件编程

面向组件编程，那就得有组件， React给我们提供了两种方法去创建组件：函数式组件、类式组件。

函数式组件：

   <script type="text/babel">
        function GetName(props){
            return <p>姓名:{props.name}</p>
        }
        function GetAge(props){
            return <p>年龄:{props.age}</p>
        }
        function Person(props){
            return(
                <div>
                    <GetName name={props.name}/>
                    <GetAge age={props.age}/>
                </div>
            )
        }
        ReactDOM.render(<Person name='张三' age={19}/>,document.getElementById('root'))
    </script>

类式组件：

    <script type="text/babel">
        // 1:react发现组件是类定义的时候 就会new出这个实例,调用里面的render方法
		// 2:把里面的虚拟dom转成真实dom
       class Person extends React.Component{
         render(){
            return <p>hello,类式组件</p>
         }
       }
        ReactDOM.render(<Person/>,document.getElementById('root'))
    </script>

当我们通过JSX去创建虚拟DOM，babel.js把会帮我们把JSX转换成原生JS，且开启了严格模式。在严格模式下，我们用函数式组件创建组件时，在那个组件里是没有自己的this，所以我们后面谈的【组件实例的三大核心属性】都是基于类式组件来展开说明的，但是回过头来，难道用函数式组件来创建组件就不能用state了嘛，当然不是，最新版本的React我们会用到hooks也可以让函数有三大属性。

哈哈~在这做个铺垫，今天的内容就说到这里！

拜比~