react（一）-- jsx-element_jsx.element-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_48942526/article/details/120521352

一、初识react

什么是react？
A JavaScript library for building user interfaces
— 是构建用户界面（视图层）的javascript库
— 不是一个框架，react全家桶是一个框架
理念：
Learn Once, Write Anywhere
—react-dom =>web页面
—react-native =>anroid/ios（移动端开发）
—…
核心思想
All in js（用js的思想解决所有问题）关注点分离
第一个react代码（jsx语法）

<body>
    <!-- 01 准备容器 -->
    <div id="app"></div>
    <!-- 02引入库
        注意顺序：react-dom 依赖于react
    -->
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <!-- 引入babel,解析jsx语法 -->
    <script src="../js/babel.min.js"></script>
    <!-- babel解析jsx语法 转换成浏览器可以识别的语法-->
    <script type="text/babel">
        //03 jsx => js扩展语法 'x':xml; 在js里面写 类似于html 语法格式
        var e = <h1>hello world</h1>
        // 元素e ：本质=>普通js对象 名称=>虚拟DOM
        console.log(e);
        //04 把虚拟DOM渲染到真是DOM容器里面
        // ReactDOM的作用：把react元素（虚拟DOM）,通过优化算法同步到真实DOM
        ReactDOM.render(e,document.getElementById("app"));
    </script>
</body>

页面显示：在这里插入图片描述

二、jsx语法对element(元素)的操作

变量

    const name = 'react'
    var e = <h1>{name}</h1>

显示结果：
在这里插入图片描述

计算

var e = <h1>{2020 + 1}</h1>

显示结果：
在这里插入图片描述

jsx语法中调用函数

       var user = {
            firstName:"林",
            lastName:"筱筱"
        }
        function formName(user){
            return user.firstName + user.lastName
        }
        var e = <h1>你好,{formName(user)}！</h1>
        ReactDOM.render(e,document.getElementById("app"))

显示结果：
在这里插入图片描述

函数中使用jsx语法

		var user = null
        function formName(user){
            return user.firstName + user.lastName
        }
        function greeting(user) {
            if(user){
                return <h1>你好,{formName(user)}！</h1>
            }else{
                return <h1>不存在</h1>
            }
        }
        var e = greeting(user)
        ReactDOM.render(e,document.getElementById("app"))

显示结果：
在这里插入图片描述

属性绑定
— 属性：驼峰式
— 例：class–>className for–>htmlFor

		var user = {
            firstName:'林',
            lastName:'筱筱',
            avater:'https://img0.baidu.com/it/u=665428887,1855518822&fm=15&fmt=auto'
        }
        const e = <img src={user.avater} width="200px" height="200px"/>
        ReactDOM.render(e,document.getElementById("app"))

显示结果：
在这里插入图片描述

绑定样式

		var style = {width:100,height:100,backgroundColor:'red'}
        // const e = <div style={style}></div>
        const e = <div style={{width:100,height:100,backgroundColor:'red'}}></div>
        ReactDOM.render(e,document.getElementById("app"))

显示结果：
在这里插入图片描述

包含元素

定义标签时，值允许被一个标签包裹，最外层标签没有同级的兄弟元素/标签，否则会报错

转义=>安全

		var str1 = '<a href="http://www.baidu.com">strong man</a>'
        //转义为： &lt;a href="http://www.baidu.com"&gt;strong man&lt;/a&gt
        const e = <div>{str1}</div>
        ReactDOM.render(e,document.getElementById("app"))

显示结果：
在这里插入图片描述
不安全：

		var str2 = '<a href="http://www.baidu.com">strong man</a>'
        var e = <div dangerouslySetInnerHTML={{__html:str2}}></div>
        ReactDOM.render(e,document.getElementById("app"))

显示结果：
在这里插入图片描述

for + element

		//(一)
		var arr = [1,2,3,4]
        let eArr = []
        for (let i = 0; i < arr.length; i++) {
            eArr.push(<li>{arr[i]}</li>)
        }
        var e = <ul>{eArr}</ul>
        ReactDOM.render(e,document.getElementById("app"))
        //(二)封装函数
        var arr = [1,2,3,4]
        function getArr(arr) {
            let eArr = []
            for (let i = 0; i < arr.length; i++) {
                eArr.push(<li>{arr[i]}</li>)
            }
            return eArr
        }
        var e = <ul>{getArr(arr)}</ul>
        ReactDOM.render(e,document.getElementById("app"))

显示结果：
在这里插入图片描述
* 注意：不要用name做变量名，name是window中的属性，是字符串；解决方法：局部作用域

元素更新

01 immutable–不可变的 => react元素就是不可变元素，一旦创建就不可改变

		var e = 
        <div>
            <h2>clock: {new Date().toLocaleTimeString()}</h2>
        </div>
        ReactDOM.render(e,document.getElementById("app"));

在这里插入图片描述

02 解决：替换

		//解决：替换 创建时间元素，同步到DOM
        function tick() {
            //创建时间元素
            var e = 
                <div>
                    <h2>clock: {new Date().toLocaleTimeString()}</h2>
                </div>
            //每次都会产生一个e=>js对象 （虚拟对象）
            /*状态比较（js对象比较 虚拟DOM比较）=>
            后一个与前一个进行比较，只更新变化的部分=>
            优化 减少重回面积=>性能好*/
            console.log(e);
            //元素同步到DOM
            ReactDOM.render(e,document.getElementById("app"));
        }
        setInterval(tick,1000)

在这里插入图片描述

*三、虚拟DOM

写jsx语法

		//01 jsx语法约定
        //单个子元素
        var e = 
            <div className='title' style={{color:'red'}}>
                hello
            </div>
        //多个子元素
        var e = 
            <div className='title' style={{color:'red'}}>
                hello
                <h3>111</h3>
                <h3>"111"</h3>
            </div>

通过type=“text/babel”=>babel-preset-react-app 解析jsx语法

		//02 babel-preset-react-app 解析jsx语法=>转化如下：
        //单个子元素
        var e = React.createElement("div", {
            className: "title",
            style: {
                color: 'red'
            }
        }, "hello");
        //多个子元素
        var e = React.createElement("div", {
            className: "title",
            style: {
                color: 'red'
            }
        }, "hello", 
        React.createElement("h3", null, "111"),
        React.createElement("h3", null, "\"111\""));

React.createElement=>生成虚拟DOM

		//03 React.createElement生成虚拟DOM
        var e = React.createElement("div", {
            className: "title",
            style: {
                color: 'red'
            }
        }, "hello");
        console.log(e); //js对象
        ReactDOM.render(e,document.getElementById("app"));

在这里插入图片描述

虚拟DOM分析

		//04 虚拟DOM分析 伪代码
        {
            props:{
                children:'hello',
                className:'title',
                style:{
                    color:'red'
                },
                type:'div'
            }
        }

将虚拟DOM转化为真实DOM=>渲染到容器里面

	ReactDOM.render(e,document.getElementById("app"));

虚拟DOM：减小重绘面积和重绘次数
真实DOM与虚拟DOM对比：相对于真实DOM，创建虚拟DOM时，创建普通js对象，开销极小

渲染到浏览器 html => 视图
* 扩展：查看真实DOM

	<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>Document</title>
	</head>
	<body>
	    <div class="title" style="color: red;">hello</div>
	    <script>
	        //查看真实DOM
	        const tDom = document.querySelector('title');
	        console.log(tDom);
	        console.dir(tDom)
	    </script>
	</body>
	</html>

在这里插入图片描述