React基础语法

最新推荐文章于 2024-07-11 10:47:24 发布

ClareXi

最新推荐文章于 2024-07-11 10:47:24 发布

阅读量81

点赞数

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

本文链接：https://blog.csdn.net/ClareXi/article/details/132249189

版权

React 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

React基础语法

原生JS语法与React语法对比

原生JS语法与React语法对比

原生JS语法举例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    
</head>

<body>

    <!-- 展开运算符的一些用法 -->
    <script type="text/javascript">
        let arraylist = [1,3,5,7,9]
        let arraylist2 = [2,4,6,8,10]
        console.log(...arraylist);


        //批量接收所有参数
        function sum(...numbers){
            console.log('@', numbers);//@ (4) [1, 2, 3, 4]
        }
        console.log(sum(1,2,3,4));//undefined  因为没有返回值吗？


        //数组身上的方法，累加求和
        function sum2(...numbers){
            return numbers.reduce((pre,curr)=>{
                return pre+curr
            })
        }
        console.log(sum2(1,2,3,4));//10

        //展开运算符不能展开对象，但是外面包一个花括号可以复制一个对象
        let person = {name:"tom", age:"18"}
        let person2 = {...person}
        console.log(person); 
        person.name = 'jerry'//因为是复制之后改变的name，所以person2没变，只有person变了
        console.log(person2);


        //复制对象的时候，修改了他的属性
        let person3 = {...person, name:"jack"}
        console.log(person3)

    </script>

</body>


</html>

React语法举例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

 
</head>

<body>

    <div id="example"></div>
    <script type="text/babel">
        const myData = ['a','b','c']

        const VDOM = (
            <div>
                <h1>标题</h1>

                <u1>
                    {
                        myData.map((item,index)=>{
                            return <li key={index}>{item}</li>
                        })
                    }    
                </u1>

            </div>
        )
        ReactDOM.render(VDOM, document.getElementById('example'));

    </script>

</body>


</html>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

    <style>
        .title {
            background-color: aqua;
            width: 200px;
        }
    </style>

</head>

<body>

    <div id="example" style="color: orange; width: 100px"></div>
    <script type="text/babel">
        const myData = 'hello,React'

        const VDOM = (
            <h1 className="title" id="test">
                <span style={{color:'white'}}>{myData.toLowerCase()}</span>
            </h1>
        )
        ReactDOM.render(VDOM, document.getElementById('example'));
        
    </script>

</body>


</html>

区别：

需要引入react相关的js库
script标签中，如果是原生js，写的是javascript，如果是react，写的是babel
内联样式：<span style={{color:‘white’}}>，需要加上两个花括号和一个单引号，不能像之前html中那样写
,直接在标签里面写
JSX是一种用于描述UI的JavaScript扩展语法，React使用这种语法描述组件的UI。React认为，一个组件应该是具备UI描述和UI数据的完整体，不应该将它们分开处理，于是发明了JSX，作为UI描述和UI数据之间的桥梁。详细介绍;https://m.runoob.com/react/react-jsx.html
JSX语法的标签里面还可以使用JS表达式,但是需要用花括号括起来，否则就会被当做字符串输出
由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，React DOM 使用 className 和 htmlFor 来做对应的属性，见react案例2
虚拟DOM：React元素本身就是一个虚拟DOM节点。例如，下面是一个DOM结构：
React的项目一般都是用ES 6语法来写的