1：React基本概念

最新推荐文章于 2023-09-05 11:00:58 发布

Yolo.H

最新推荐文章于 2023-09-05 11:00:58 发布

阅读量136

点赞数 1

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

本文链接：https://blog.csdn.net/qq_49075665/article/details/118389390

版权

React 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

原生js的痛点：

DOM繁琐
大量重绘重排
没有组件化编码，代码复用率低

React

概念：用于构建用户界面的js库，将数据渲染为HTML视图的js库

特点：

采用组件化模式，声明式编码
在React Native中可以适用React语法进行移动端开发
适用虚拟DOM+Diffing算法，减少与DOM的交互

文件：

react.js：React核心库。
react-dom.js：提供操作DOM的react扩展库。
babel.min.js：解析JSX语法代码转为JS代码的库。

书写React的步骤：

创建虚拟DOM（适用JSX的书写方式，用babel翻译即可，书写上贴近htmnl，比较便捷）
将虚拟DOM渲染到页面（虚拟DOM object 类型）

虚拟DOM：

本质是Object类型的对象（一般对象）
虚拟DOM比较“轻”（属性少），真实DOM比较“重”（属性多），因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
虚拟DOM最终会被React转化为真实DOM，呈现在页面上。

JSX的语法规则：

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

js语句(代码) 与 js表达式

1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
下面这些都是表达式：
(1). a
(2). a+b
(3). demo(1)
(4). arr.map()
(5). function test () {}
2.语句(代码)：
下面这些都是语句(代码)：
(1).if(){}
(2).for(){}
(3).switch(){case:xxxx}

杂点：

命名式编码：指挥操作一步步
声明式编码：声明一件事情、程序自动执行
查看类型：

console.log('虚拟DOM',VDOM)
console.log(typeof VDOM)
console.log(VDOM instanceof Object)

XML早期用于存储和传输数据

<student>
	<name>Tome</name>
	<age>19</age>
</student>

JSON

"{"name":"Tom","age":19}"
//parse：快速地将JSON中的字符串解析成JS数组和对象
//stringfy：快速地将JS中的数组和对象转换成JSON

React小例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>React小例子</title>
    <!--React语句中要指定样式，用的是className-->
    <!--内联样式中，要使用style={{key:value}}的方式-->
    <style>
        .title {
            color: aqua;
            background-color: bisque;
        }
    </style>
</head>

<body>
    <div id="test"></div>

	<!--引入三个库-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

	<!--适用babel将JSX语句翻译成JS-->
    <script type="text/babel">
    	//存放数据的数组
        const arr = ['Angular','React','Vue']  
        //创建虚拟DOM，适用的是括号，React中书写的是JSX语句，JSX语句中JS表达式才有用
        const VDOM = (
            <div> //一定要有个根节点
                <h1>前端开发</h1>
                <ul>
                    {
                    	//使用map遍历数组
                        arr.map((item,index)=>{
                            return <li key={index}>{item}</li>
                        })
                    }
                </ul>
            </div>
        )
        //将虚拟DOM渲染到页面上
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
</body>

</html>