React(1)-jsx语法(element,vDOM)

卷心菜007

已于 2022-08-21 14:12:02 修改

阅读量550

点赞数 1

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

于 2022-08-20 15:33:37 首次发布

本文链接：https://blog.csdn.net/m0_65912225/article/details/126394270

版权

React 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

React教程文档:入门教程: 认识 React – React

构建用户界面(视图层)的JavaScript库，不是框架。(react全家桶是框架)

核心思想:关注点分离

发展:html/css/js=>vue:组件化开发template style script=>react:all in js

1.jsx

<body>

        1.准备容器

        <div id="app"></div>

        2.引入库注意顺序:react-dom依赖于react,先引入react再引入react-dom

        <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>

        <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

        引入babel解析jsx,将jsx语法转化为浏览器能识别的代码

        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

        <script type="text/babel">

                3.jsx=>js扩展语法,可以在js中写类似于html语法格式

          // jsx=>element元素:构成react应用的最小单元

          //jsx=>element=>component-components=>app

                var e = <h1>hello world<h1>

          //元素打印出是是普通的js对象=>虚拟DOM(本质js对象)

          console.log(e)

          4.将虚拟DOM渲染到真实DOM容器中

          //ReactDOM react元素(虚拟DOM)同步(优化算法)真实DOM

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

        </script>

</body>

2.element

<body>

        <div id="app"></div>

        <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>

        <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

        <script type="text/babel">

1.变量

const name = "react"

var element = <h1>hello {name}</h1>

2.计算

                var element = <h1>hello {2020+1}</h1>

3.jsx语法中调用函数

var user = {

                        firstName:"Less",

lastName:"Yu"

                }

function formatName(user){
return user,firstName + "-" + user.lastName

                }

                var element = <h1>hello {formatName(user)}</h1>

4.函数中使用jsx语法

//函数

                function formatName(user){
return user,firstName + "-" + user.lastName

                }

//函数中有jsx

function greeting(user){

if(user){

//函数中jsx语法{ }调用普通函数

          return <h1>hello {formatName(user)}</h1>

                }

else{

return <h2>hello stranger</h2>

                        }

                }

//数据

                var user = {

                        firstName:"Less",

lastName:"Yu"

                }

const element = greeting(user)

5.属性绑定

属性：驼峰式命名 class=>className for=>htmlFor

const e = <h1 tabIndex = "a">hello world</h1>

                var user = {

                        firstName:"Less",

lastName:"Yu",

avator:"(图片链接太长了，假装有图片链接)"

                }

const element = <img src={user.avator}/>

const element =

<div>

<label htmlFor = "name">姓名</label>

<input type = "text" id = "name" />

</div>

6.绑定样式

样式值默认单位:px

var style = {width:100,height:100};

                var user = {

                        firstName:"Less",

lastName:"Yu",

avator:"(图片链接太长了，假装有图片链接)"

                }

const element = <img src={user.avator}/ style = {style}>

   const element = <img src={user.avator}/ style={{width:100,height:100}}>嵌套两层

7.包含元素

const element = <h1>hello</h1> <h1>world</h1>

//报错：JSX express must have one parent element

                const element = <div> <h1>hello</h1> <h1>world</h1> </div> //正确书写格式

8.转义(ReactDOM实现)

var str = "<a>strong man</a>";

//转义：<a>string man </a&gt

   //相当于:真实DOM中 <div><a>string man </a&gt</div>

          //如果不进行渲染的话，浏览器直接识别为链接,属于开发时的漏洞，会被攻击

          //作用：防止XSS攻击,保证安全性

                var str2 = "<a href ='http://www.baidu.com'>strong man</a>"

                var element = <div dangerouslySetInnerHTML= { { __html:str2} }></div>

                const element = <div>{str}</div>

9.for循环+element

var element =

                        <ul>

<li>zs</li>

<li>ls</li>

<li>ww</li>

<li>zl</li>

</ul>

var names = ["zs","ls","ww","zl"]

                let eArray = [];

for(let i = 0;i<names.length;i++){

                        eArray.push(<li>{name[i]}</li>

                }

function getElements(){

                        let eArray = [];

          for(let i = 0;i<names.length;i++){

                                eArray.push(<li>{name[i]}</li>

                        }

return eArray

                }

var element = <ul>{eArray}</ul>

//react中name既不是保留字也不是关键字

<script>

this.name = ["zs","ls"]

                        console.log(typeof name) //输出string

//window本身有name属性，是字符串类型，window.name只能接受字符串

注意：不要在全局作用域中使用name,局部作用域中可以使用name

</script>

//将虚拟DOM渲染到真实DOM容器里面

ReactDOM.render(element,document.getElementById("app"))

        </script>

</body>

3.element-update

<body>

        <div id="app"></div>

        <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>

        <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

        <script type="text/babel">

1.immediate元素=>react元素是不可改变对象(快照)

var element =

<div>

<h1>Clock</h1>

<h2>{ new Date().toLacalTimeString() }</h2>

                        </div>

2.创建时间元素，同步DOM

function tick(){

//创建时间元素

                        var element =

          <div>

          <h1>Clock</h1>

          <h2>{ new Date().toLacalTimeString() }</h2>

                                </div>

console.log(element)

                        //状态比较 js对象比较虚拟DOM比较 =>react只更新变化的部分=>优化=>减少重绘面积=>性能更好(vue与react的差别)

                        //元素同步真实DOM

                  ReactDOM.render(element,document.getElementById("app"))

                }

//每隔一秒执行一次，实现时钟效果

setInterval(tick,1000)

        </script>

</body>

4.虚拟DOM

<body>

        <div id="app"></div>

        <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>

        <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

        <script type="text/babel">

0.jsx语法规定

                var element = <div className = "title" style = {{color:'red'}}> hello </div>

1.type="text/babel" => babe-preset-react-app解析jsx语法

2.React.createElement => 生成虚拟DOM

var element = React.createElement("div",{

className:"title",

style:{ color:"red" }

                },"hello");

          console.log(element) //js对象

3.虚拟DOM分析

{

props:{

                                children:"hello",

className:"title",

style:{ color:"red" }

                        },

type:"div"

                }

查看真实DOM

const trueDOM = document.querySelector("title")

                console.dir(trueDOM)

4.将虚拟DOM转化为真实DOM=>渲染到容器中

注意：转化真实DOM只转化变化部分，减少了重绘面积，减少重绘次数

                ReactDOM.render(element,document.getElementById("app"))

真实DOM和虚拟DOM对比：

创建虚拟DOM相当于创建普通对象，相对来说，开销极小

5.渲染带浏览器 (html=>视图)

                <div class = "title" style = "color:red"> hello </div>

        </script>

</body>

卷心菜007

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React(1)-jsx语法(element,vDOM)

构建用户界面(视图层)的JavaScript库，不是框架。(react全家桶是框架)核心思想:关注点分离发展:html/css/js=>vue:组件化开发template style script=>react:all in js
复制链接

扫一扫