react与虚拟DOM、JSX

最新推荐文章于 2025-05-17 10:49:43 发布

原创最新推荐文章于 2025-05-17 10:49:43 发布 · 206 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #react native #javascript

博客介绍了React的相关知识，采用组件化模式和声明式编码，可在React Native中进行移动端开发，使用虚拟DOM和diff算法减少与真实DOM交互。还讲解了虚拟DOM操作页面、与真实DOM的区别，以及JSX的基本用法和小练习，强调了表达式和语句的区分。

1、采用组件化模式、声明式编码，提高开发效率及组件复用率

2、在React Native中可以使用React语法进行移动端开发

3、使用虚拟DOM+diff算法，减少与真实Dom的交互

用虚拟dom操作页面

<!-- 准备好容器 -->
<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>
<script type="text/babel">
    const VDOM = <h1>5555555</h1>
    ReactDOM.render(VDOM, document.getElementById('test'))
</script>

虚拟dom和真实dom的区别

<!-- 准备好容器 -->
<div id="test"></div>
<div id="demo"></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>
<script type="text/babel">//这里必须使用babel
    // 获取虚拟DOM
    const VDOM = <h1>5555555</h1>
    // 渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))
    // 真实DOM
    const TDOM=document.getElementById('demo')
    console.log('VDOM',VDOM);
    console.log('TDOM',TDOM);
    debugger
    // 关于虚拟DOM
    // 1、本质是object对象
    // 2、虚拟DOM比较轻，真实DOM比较重，因为虚拟DOM是React内部在用，无需真实DOM那么多属性
    // 3、虚拟DOM最终会被React转化为真实DOM，呈现在页面上

jsx一些基本用法

jsx等于js+xml

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

jsx语法规则

1、定义虚拟DOM时不要加引号

2、标签中混入js表达式时要用{}

3、样式的类名指定要用className

4、内联样式，要用style={{key:value}}的形式去写

5、只有一个根标签

6、标签必须闭合

7、标签首字母

（1）若小写字母开头，则将标签转为html中同名元素，若html没有该元素，会报错

（2）若大写字母开头，react会渲染对应组件，若组件没有定义，会报错

<div id="test"></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">
    let myId = 55
    let redC = 'red'
    const VDOM = (<div>
        <h4 id={myId}>{myId}</h4>
        <span style={{ color: redC }}>999</span>
        <span className='fdf'>666</span>
        <input type="text" />
    </div>)
    ReactDOM.render(VDOM, document.getElementById('test'))
</script>

jsx小练习：把数组渲染到页面

重点：{里面只能放表达式}

一定注意区分【js语句（代码）】【js表达式】

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

（1）a

（2）a+b

（3）fn(1)

（4）arr.map()

（5）function test(){}

2、语句（代码）

（1）if(){}

（2）for(){}

（3）switch(){case:xxxx}

<script type="text/babel">
    const data = ['vue', 'react', 'angular']
    const VDOM = (
        <div>
            <h1>前端框架</h1>
            <ul>
                {data.map((num,index)=>{
                    return <li key={index}>{num}</li>
                })}
            </ul>
        </div>
    )
    ReactDOM.render(VDOM, document.getElementById('test'))
</script>