React ----- 02 react JSX语法（1）

最新推荐文章于 2024-01-24 12:31:32 发布

七月是我的生日

最新推荐文章于 2024-01-24 12:31:32 发布

阅读量194

点赞数 1

分类专栏： React 文章标签： react JSX JSX语法

本文链接：https://blog.csdn.net/qq_43955202/article/details/106892894

版权

React 专栏收录该内容

18 篇文章 2 订阅

订阅专栏

1 复习：JavaScript中类的定义

1.1 ES5中类的定义

// ES5中定义类
function Person(name,age){
    this.name = name;
    this.age = age;
}

//函数一般加在原型上
Person.prototype.say = function(){
    console.log(this.name,this.age,'say');
}



var p  = new Person('kobe','40');
console.log(p.name, p.age);  //kobe  40
p.say(); //kobe 40  say

1.2 ES6中类的定义

// ES6中定义类
    class Person{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    say(){
        console.log(this.name, this.age, 'say');
    }
}

var p = new Person('sunwukong',500);
console.log(p.name,p.age);  //sunwukong 500
p.say();  //sunwukong 500 say

1.3 ES6中类的继承

减少代码冗余：

 // ES6中定义类的继承
        class Person {
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }
            say() {
                console.log(this.name, this.age, 'say');
            }
        }

        class Student {
            constructor(name,age,num){
                this.name = name;
                this.age = age;
                this.num = num;
            }
        }


        class Teacher {
            constructor(name,age,skill){
                this.name = name;
                this.age = age;
                this.skill = skill;
            }
        }

使用ES6继承减少冗余代码：

// ES6中定义类的继承
        class Person {
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }
            say() {
                console.log(this.name, this.age, 'say');
            }
        }


        //定义一个student类来继承Person
        class Student extends Person {
            constructor(name,age,num) {
                //继承父类的 name，age，以及方法 say
                super(name,age);

                this.num = num;
            }
        }

        const st1 = new Student('kobe',18,'04183006');
        console.log(st1);
        //{name: "kobe", age: 18, num: "04183006"}
        st1.say();  
        // kobe  18 say


        //定义一个Teacher类来继承Person
        class Teacher extends Person {
            constructor(name,age,skill) {
                super(name,age);
                this.skill = skill;
            }
        }

        const te1 = new Teacher('mr,wang',40,'sing');
        console.log(te1);
        //{name: "mr,wang", age: 40, skill: "sing"}
        te1.say();
        //mr,wang 40 say

2 JSX核心语法（1）

2.1.1 使用react渲染一个电影列表(遍历数组第一种写法)

render() {
    return (
        <div>
        <h2>电影列表</h2>
        <ul>
            {
                this.state.movieList.map((item) => {
                    return <li>{item}</li>
                })
            }
        </ul>
        </div>
    ) 
}

2.1.2 使用react渲染一个电影列表(遍历数组第二种写法)

render() {
    let liArray = [];
    for(let movie of this.state.movieList) {
        liArray.push(<li>{movie}</li>)
    }

    return (
        <div>
        <h2>电影列表</h2>
        <ul>
            {liArray}
        </ul>
        </div>
    ) 
}

2.1.3 使用react渲染一个电影列表(完整代码)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

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


    <!-- 1.引入依赖 -->
    <script src="../react/react.development.js"></script>
    <script src="../react/react-dom.development.js"></script>
    <script src="../react/babel.min.js"></script>


    <!-- 2.代码开发 -->
    <script type="text/babel">

        class APP extends React.Component {
            constructor() {
                super();

                this.state = {
                    message:'Hello World!',
                    movieList:['大闹天宫','红孩儿','海王','阿甘正传']
                }
            }

            render() {

                let liArray = [];
                for(let movie of this.state.movieList) {
                    liArray.push(<li>{movie}</li>)
                }

               return (
                   <div>
                    <h2>电影列表</h2>
                    <ul>
                        {liArray}
                    </ul>
                    </div>
               ) 
            }
        }

        




        ReactDOM.render(<APP/>,document.getElementById('app'));
    </script>
</body>

</html>

2.1.4 使用react完成一个计数器(完整代码)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

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

    <script src="../react/react.development.js"></script>
    <script src="../react/react-dom.development.js"></script>
    <script src="../react/babel.min.js"></script>

    <script type="text/babel">

        class APP extends React.Component {
            constructor(props) {
                super(props);

                this.state = {
                    counter:1
                }
            }

            render() {
               return (
                   <div>
                        <h2>当前计数：{this.state.counter}</h2>    
                        <button onClick={this.increament.bind(this)}>+1</button>
                        <button onClick={this.decreament.bind(this)}>-1</button> 
                   </div>
               ) 
            }

            //定义函数
            increament(){
                this.setState({
                    counter: this.state.counter + 1
                })
            }

            decreament(){
                this.setState({
                    counter: this.state.counter - 1
                })
            }
        }

        ReactDOM.render(<APP/>,document.getElementById('app'));
    </script>
</body>

</html>

3 ：认识JSX语法

1.1 JSX语法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

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

    <script src="../react/react.development.js"></script>
    <script src="../react/react-dom.development.js"></script>
    <script src="../react/babel.min.js"></script>

    <script type="text/babel">


        //JSX语法
        const element = <h2>hello world!</h2>

        ReactDOM.render(element,document.getElementById('app'));
    </script>
</body>

</html>

JSX语法(all in js)?
需要配合type="text/babel"使用。也被叫做JavaScript XML.
主要用于描述我们的UI界面，并且可以完成和JavaScript融合在一起使用，灵活性

为什么react选择了js?
react认为渲染逻辑本质上与其他UI逻辑存在内在耦合。
UI需要绑定事件，UI中需要动态展示数据。他们之间密不可分，react将他们组合在一起，也就是组件。

JSX语法要求?
1.JSX的顶层只能有一个根元素，所以我们很多时候会在外层包裹一个div元素。
2.为了方便阅读，我们通常在JSX外层包裹一个小括号(),也可以支持我们JSX换行书写。
3.JSX中可以写双标签，也可以写单标签。单标签必须以结尾。

1.2 JSX注释语法

render() {
        return (
            <div>
            
            {/*我是一段注释*/}
            hello world!
            </div>
        ) 
    }

1.3 JSX语法-如何嵌入变量
- 1.3.1 在{}可以正常显示的类型
```
this.state = {
    name:'mr.wang',  //String
    age:18,     //Number
    names:['abc','bnc','ppp']  //Array
}
```
- 1.3.2 在{}中不能正常显示的类型
```
this.state = {
    test1:null,  //Null
    test2:undefined,  //Undefined
    test3:true  //Boolean
}
```
为什么react不让这些类型展示？
当我们请求数据出现错误的时候，不让他显示在页面上。
//当test1不为null的时候展示data，否则展示null
{test1 ? data : null; }
//当test3为true展示data
{test3 && data}
- 1.3.3 需要展示这些数据的时候
  使用String() 直接转换。或者拼接空字符串，或者对由toString() 方法的类型进行转换。
- 1.3.4 对象不能作为jsx的子类（不能直接渲染对象）
1.4 JSX语法-如何嵌入表达式

render() {
    const {firstName, lastName, isLogin} = this.state;
    return (
        <div>
            {/*运算符表达式*/}
            {/*拼接字符串*/}
            <h2>{firstName + ' ' + lastName}</h2>

            {/*数据计算*/}
            <h2>{20 * 50}</h2>

            {/*三元表达式*/}
            <h2>{ isLogin? '欢迎回来~': '请先登录~'}</h2>

            {/*进行函数调用*/}
            <h2>{this.getFullName()}</h2>
        </div>
    ) 
}

getFullName(){
    return this.state.firstName + " " + this.state.lastName 
}

心有所向，虽远亦往！

七月是我的生日

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React ----- 02 react JSX语法（1）

1 复习：JavaScript中类的定义1.1 ES5中类的定义// ES5中定义类function Person(name,age){ this.name = name; this.age = age;}//函数一般加在原型上Person.prototype.say = function(){ console.log(this.name,this.age,'say');}var p = new Person('kobe','40');consol.
复制链接

扫一扫