03-JSX

JSX的核心语法

上一节，实现了一个简单的React程序，这一节，我们主要介绍React中的JSX是什么，以及JSX该如何使用。

1. JSX是什么

下面是一段JSX代码：

const message = <h2>我是一段message</h2>

我们可能在用的时候没有过多的想法，但是仔细思考心里就在疑问，这是啥啊，到底是JS还是HTML，其实这就是JSX语法，下面是MDN对于JSX的一小段描述：

我们通过JSX可以实现很多灵活的操作，比方说将message传递给其他组件，当然这些都是后面的了，我们现在只需要了解JSX中可以书写“HTML代码”，以及会写一些简单的JSX语句就OK了。

2. JSX的语法

当然JSX不可能都像我们上面的那样简单的，JSX也会存在很多的用法，下面开始介绍JSX的语法；

2.1渲染多个DOM元素

渲染多个DOM元素

首先，我们需要了解map函数，这个函数是对数组进行一个映射，可以生成另外一个数组，例如：

[1, 2, 3].map(function(item) {
    console.log(item); //1 2 3
});

map函数是需要传入一个函数，这个函数会将返回值都添加到另外一个新数组中，当然上面的函数是没有返回值的，所以就没有新数组；

let arr = [1, 2, 3];

const newArr = arr.map(function(item) {
    return item + 1;
});

console.log(arr); //[1, 2, 3]
console.log(newArr); //[2, 3, 4]

当然map函数中传入的参数是不止这些的

[1, 2, 3].map(function(item, index, arr) {
    console.log(item, index, arr);
});

对应的参数分别是数组的值，下标以及这个数组对象;

OK,介绍玩map函数，接下来介绍怎么生成多个DOM元素：

我们在JSX中嵌套JS代码是需要加一层大括号，表示范围：

{
    this.state.movies.map(item => {
        return <li>{item}</li>
    })
}

接下来时完整代码：

class App extends React.Component {
    constructor() {
        super();
        this.state = {
            message: "Hello",
            movies: ["假如爱有天意", "我不是药神", "流浪地球", "辩护人", "素媛"],
        }
    }

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

ReactDOM.render(<App/>, document.getElementById("app"));

上面的代码会报一个警告，说没有唯一的key，这个先不管；

当然，我们在这里也可将这些代码抽成一个函数：

const lis = [];
for (const movie of this.state.movies) {
    lis.push(<li>{movie}</li>);
}

之后再在大括号俩面调用就OK；

2.2 绑定属性

绑定属性(包括html属性和css属性)

类似于绑定文本节点，绑定属性用的也是{}

2.2.1 绑定普通属性

<h2 title={this.state.title}>{this.state.message}</h2>

2.2.2 绑定类名

<div className={"box" + this.state.active ? "active": ""}>动态绑定class</div>

我们在绑定属性的时候是可以使用逻辑运算符的

2.2.3 绑定style

<div style={{color: "red", fontSize: "24px"}}>动态绑定style</div>

由于style属性本来就是一个对象，所以这里需要使用双大括号

2.3 绑定事件

我们在传统操作中是需要传递很多交互事件的，在React交互事件和原生的交互事件是不一样的

主要都是在this绑定上，我们在前面一节也提到了一种绑定方式——使用bind绑定this

这里我们再介绍两种方式：

2.3.1 把函数定义成箭头函数（ES6）

我们这里使用绑定this的技巧就是，箭头函数的特点，箭头函数的this指向是不会随着运行环境的上下文的改变而改变的，也不会随着bind，call，apply等方法改变this，箭头函数再定义的时候就已经再定义环境的上下文中绑定了this

btnClick2 = () => {
    // 首先,我们需要明确箭头函数中是不会绑定this的,它是根据这个函数书写的上下文来确定this的指向;
    // 那么,我们只要在这里使用箭头函数,this就自动指向使用时候的实例对象
    console.log('按钮发生点击2');
    console.log(this);
}

2.3.2 在执行函数的时候再包裹一层

这里用到的仍然是箭头函数的this指向；

仍然是普通的函数定义；但是在绑定事件的时候：

<button onClick={(e) => {this.btnClick3()}}>按钮</button>

完整代码：

<script type="text/babel">
    class App extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                message: "Hello",
            }

            this.btnClick1 = this.btnClick2.bind(this);     
        }

        btnClick1() {
            // 正常的逻辑都可以处理,但是一旦涉及this,就会出现问题
            console.log('按钮发生点击1');

            console.log(this); //没有处理this的话,这个this指向的就是underfined
        }

        btnClick2 = () => {
            // 首先,我们需要明确箭头函数中是不会绑定this的,它是根据这个函数书写的上下文来确定this的指向;
            // 那么,我们只要在这里使用箭头函数,this就自动指向使用时候的实例对象
            console.log('按钮发生点击2');
            console.log(this);
        }

        btnClick3() {
            console.log('按钮发生点3');
            console.log(this);
        }   

        render() {
            return (
                <div>
                    {/*有三种解决this指向的方案*/}
                    {/*方案一:用bind绑定this*/}
                    <h2>方案一:使用bind绑定this</h2>
                    {/*1.直接在使用的时候绑定*/}
                    <button onClick={this.btnClick1.bind(this)}>按钮</button>
                    {/*2.在构造函数中重新绑定this*/}
                    <button onClick={this.btnClick1}>按钮</button>

                    <h2>方案二:在定义函数的时候使用箭头函数</h2>
                    <button onClick={this.btnClick2}>按钮</button>

                    <h2>方案三:在调用的时候使用箭头函数</h2>
                    <button onClick={(e) => {this.btnClick3()}}>按钮</button>
                </div>
            );
        }
    }

    ReactDOM.render(<App/>, document.getElementById("app"));
</script>

2.4 条件渲染

React在这方面有两种方式都能实现条件渲染，类似于vue中v-show和v-if：

一种是加上css属性display：none；

一种是不在虚拟DOM中存在；

2.4.1css属性实现条件渲染：

<h2 style={{display: this.state.isShow ? "block" : "none"}}>{this.state.message}</h2>

2.4.2 虚拟DOM实现条件渲染：

由于在React如果内部没有子节点存在的话，这父节点就会被剔除，所以我们直接控制子节点是否存在就能实现条件渲染：

<button onClick={() => this.setState({isLogin: !isLogin})}>{isLogin ? "欢迎XXX" : "登录"}</button>

到这里JSX的基础语法就已经介绍完了