React入门【第一章】

发表于 2021-12-30 更新于 2022-01-11 分类于 React 本文字数： 4.8k 阅读时长 ≈ 4 分钟

描述：React的特点、认识React.js、使用js和jsx创建虚拟DOM、虚拟DOM的特点、jsx语法、模块与组件

React：是一个将数据渲染为HTML视图的开源JS库

js痛点：原生js操作DOM繁琐，效率低【DOM-API 操作 UI】; js操作DOM,浏览器进行大量的重绘重排 ; js没有组件化的方案，代码复用率低

React的特点

采用组件化模式，声明式编程，提高开发效率和组件复用率
React Native 可以进行移动端开发【安卓，ios】
使用虚拟DOM + Diffing算法，减少与真实DOM的交互

认识React.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <!-- react核心库 -->
    <script src="./js/react.development.js"></script>
    <!-- 用于支持react操作dom -->
    <script src="./js/react-dom.development.js"></script>
    <!-- babel用于将jsx转成js【babel也有ES6转ES5的功能】 -->
    <script src="./js/babel.min.js"></script>
    <!-- type="text/babel" 表示写的内容为jsx -->
    <script type="text/babel">
        // 1.创建虚拟DOM  【不用加引号，他是虚拟DOM】
        const VDOM = <h2>123456</h2>
        // 2.渲染虚拟DOM到页面
        // ReactDOM.render(虚拟DOM,容器)
        ReactDOM.render(VDOM, document.getElementById("app"))
    </script>
</body>
</html>

使用js和jsx创建虚拟DOM

jsx:可以更加简洁编写虚拟DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用js和jsx创建虚拟DOM</title>
</head>
<body>
    <div id="app"></div>
    <div id="text"></div>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
    <!-- jsx创建虚拟DOM -->
    <script type="text/babel">
        const VDOM = (
            <h1 id='title'>
                <span>jsx:123456</span>
            </h1>
        )
        ReactDOM.render(VDOM, document.getElementById("app"))
    </script>

    <!-- js创建虚拟DOM -->
    <script type="text/javascript">
        // document.createElement(标签名，标签属性，标签内容)
        const VDOM1 = React.createElement('h1', {}, React.createElement('span', {}, 'js: 1234567'))
        ReactDOM.render(VDOM1, document.getElementById("text"))
    </script>
</body>
</html>

虚拟DOM的特点

本质是Object类型的对象
虚拟DOM属性比真实DOM少很多，虚拟DOM在React内部使用，不需要那么多的属性
虚拟DOM最终会被React转化为真实DOM,呈现在页面上

jsx语法：

定义虚拟DOM,不要写引号
标签混入JS表达式，要用花括号{} 【虚拟DOM里插入变量： {变量}】
样式的类名指定要用className,不是class
内联样式的写法style={{color:'pink',fontSize:'30px'}}
根标签只能有一个
标签必须闭合

标签首字母

小写开头，转成html同名元素，若无则报错【例：】

大写开头，React就会渲染对应的组件，组件没有定义，则报错

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用js和jsx创建虚拟DOM</title>
</head>
<body>
    <div id="app"></div>
    <div id="text"></div>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
    <script type="text/babel">
        const myId = 'tiTlE'
        const myData = 'tiTlE_IteM'
        // 虚拟DOM里插入变量： {变量}
        // myId.toLowerCase() 字符串小写
        const VDOM = (
            <div>
                <h1 className='title' id={myId.toLowerCase()}>
                    <span style={{ color: 'pink', fontSize: '30px' }} id={myData.toLowerCase()}>jsx:123456</span>
                </h1>
                <input type="text" />
            </div>
        )
        ReactDOM.render(VDOM, document.getElementById("app"))
    </script>
    <style>
        .title {
            background-color: royalblue;
        }
    </style>
</body>
</html>

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

a

a+b

demo(1)

arr.map()

function test () { }

JS语句(代码)
例如

if(){}

for(){}

switch(){case:xxx}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app"></div>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
    <script type="text/babel">
        // 模拟数据
        const data = ['A','Vue','React']
        const VDOM = (
            <div>
                <h2>前端框架爱</h2>
                <ul>
                    {
                        data.map((item,index) => {return <li key={index}>{item}</li>})
                    }
                    <li>Ang</li>
                    <li>Vue</li>
                    <li>React</li>
                </ul>
            </div>
        )
        ReactDOM.render(VDOM, document.getElementById("app"))
    </script>
</body>
</html>

模块与组件

模块理解：向外提供特定功能的js程序,一个js文件就是模块
作用:复用js，简化js编写，提高js运行效率，降低耦合性

组件理解：用来实现局部功能效果的代码和资源的集合
作用：复用编码，简化项目编程，提高运行效率

-------------本文结束感谢您的阅读-------------

我的传送门：个人网站、Github、Gitee