1. 认识React

最新推荐文章于 2024-07-30 10:56:44 发布

友人A ㅤ

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量121

点赞数

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

本文链接：https://blog.csdn.net/qq_46025031/article/details/125474067

版权

React 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1. hello, react

老规矩，学习react的第一件事，就是先用hello来开一下光。

需要先在项目当中放以下js文件
编写代码

<body>
    <!-- 准备一个 容器 -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script src="../js/babel.min.js"></script>


    <!-- 
        此处需写babel，不能写javascript
        表示写的不是js，而是jsx，并靠babel翻译 
    -->
    <script type="text/babel">
        /** 1. 创建虚拟DOM
         * 标签处不能写引号，因为它不是字符串
        */
        const VDOM = <h1>Hello, React</h1>
        /** 2. 渲染虚拟DOM到页面
         * ReactDOM.render(虚拟DOM, 容器)
        */
       ReactDOM.render(VDOM, document.getElementById('test'));
    </script>
</body>

运行程序

2. 创建虚拟DOM

使用jsx创建：

使用js创建（一般不用）：

使用jsx创建和使用js创建的区别：

使用jsx：当在标签中添加标签时可以直接嵌套：

还可以用小括号包裹代码，实现结构层次缩进：

在这里插入图片描述

使用js：当在标签中嵌套标签时需要再次创建虚拟DOM：

3. 虚拟DOM和真实DOM

虚拟DOM本质是Object类型的对象：

在这里插入图片描述

真实DOM：

在这里插入图片描述

区别：

虚拟DOM身上属性少，真实DOM身上的属性多。因为虚拟DOM是React内部在用，无需真实DOM上面那么多属性
虚拟DOM最终会被React转化为真实DOM，呈现在页面上

4. jsx语法规则

jsx全称是JavaScript XML，是react定义的一种类似于XML的JS扩展语法：JS + XML。

jsx语法规则：

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

    <script type="text/babel">
        const myId = 'title';
        const myData = 'hello, react'
        // 1. 创建虚拟DOM
        const VDOM = (
            <div>
                <h2 id={myId} className='title'>
                    <span style={{ color: 'red', fontSize: '20px' }}>myData</span>
                </h2>
                <input type="text" />
            </div>
        )
        // 2. 渲染虚拟DOM到页面
        ReactDOM.render(VDOM, document.getElementById('test'));
    </script>

在这里插入图片描述

5. 实现一个列表

区分 js语句（代码） 与 js表达式 ：

表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方

表达式如：

a
a + b
demo(1)
arr.map()
function fn () {}

语句（代码）：

表达式如：

if () {}
for () {}
switch () {case: xxx}

因为标签中混入JS表达式时要用{}，所以遍历数组的时候不能直接用语句进行循环，可以用map表达式来实现：

    <script type="text/babel">
        // 模拟一些数据
        const data = ['aaa', 'bbb', 'ccc']
        const VDOM = (
            <div>
                <h1>列表</h1>
                <ul>
                    {
                        data.map((item, index) => {
                            return <li key={index}>{item}</li>
                        })
                    }
                </ul>
            </div>
        )

        ReactDOM.render(VDOM, document.getElementById('test'));
    </script>

6. 模块与组件

1. 模块

模块：向外提供特定功能的js程序
随着业务逻辑增加，代码多且杂，需要拆分模块
使用模块能复用js，简化js编写，提高js运行效率

2. 组件

组件：实现局部功能效果的代码和资源的集合（html/css/js/image等）
因为现在一个界面的功能很复杂，可以使用组件来组成页面
使用组件能复用编码，提高运行效率

3. 模块化

当应用的js都以模块来编写的，这个应用就是一个模块化的应用

4. 组件化

当应用是以多组件的方式实现，这个应用就是一个组件化的应用

友人A ㅤ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1. 认识React

react基础语法12. 创建虚拟DOM使用jsx创建：使用js创建（一般不用）：使用jsx创建和使用js创建的区别：使用jsx：当在标签中添加标签时可以直接嵌套：还可以用小括号包裹代码，实现结构层次缩进：虚拟DOM本质是Object类型的对象：真实DOM：jsx全称是JavaScript XML，是react定义的一种类似于XML的JS扩展语法：JS + XML。区分 js语句（代码）与 js表...
复制链接

扫一扫

专栏目录