React 03 - JSX核心语法（2）

1.JSX核心语法2

• 1.1 图片格式处理
  如果说原本的图片是400px * 400px的大小.
  而我需要展示的仅仅为 120px * 120px.

这样就会降低浏览器性能。

1.http请求大的图片，降低性能。
2.浏览器处理图片又需要小号性能。

解决方法：
处理地址参数；

//图片格式处理函数
function getSizeImage(imgUrl, size){
    return imgUrl + `?param=${size}x${size}`;
}

• 1.2 jsx绑定属性（基本属性, class属性, 动态绑定class属性, 绑定style属性）

render() {
    const {title, imgUrl, link, active} = this.state;
    return (
        <div>
            {/*绑定title属性*/}
            <h2 title={title}>我是标题!</h2>
            <img src={getSizeImage(imgUrl, 140)} alt=""/>
            <p><a href={link}>百度一下</a></p>


            {/*绑定class属性*/}
            <div className="box title">我是div元素</div>
            <div className={"box title " + (active ? "active": "")}></div>


            {/*绑定style属性*/}
            <div style={{color:'red',fontSize:'30px'}}>我是div元素，负责绑定style属性</div>
        </div>
    ) 
}

• 1.3 jsx绑定事件和this处理

render() {
    return (
        <div>
            {/*绑定this三种方案*/}

            {/*使用bind绑定this(显示绑定)*/}
            <button onClick = {this.btnCLick.bind(this)}>点击按钮，弹出相关信息</button>

            {/*使用es6箭头函数*/}
            <p><button onClick = {this.btnCLick2}>点击按钮2</button></p>

            {/*方案三:直接传入一个箭头函数，在箭头函数中调用需要执行的函数，并且可以传递参数*/}
            <p><button onClick={ () => {
                this.btnClick3()
            } }>点击按钮3</button></p>
        </div>
    ) 
}

btnCLick(){
    alert(this.state.message)
}

//箭头函数永远不会绑定this  箭头函数绑定的this是箭头函数定义的作用域内
btnCLick2 = () => {
    console.log(this)
    console.log(this.state.message)
}

btnClick3(){
    console.log(this)
    console.log(this.state.message)
}

• 1.4 jsx绑定事件和传递参数

render() {
    return (
        <div>
        <p><button onClick={this.btnClick01.bind(this)}> 按钮1 </button></p>


        <ul>
            {
                this.state.movies.map((item,index,arr) => {
                    return (
                        <li 
                            onClick={ (e) => { this.liClick(e,item,index)} }>
                            {item}
                        </li>
                    )
                })
            }
        </ul>
        </div>
    ) 
}

btnClick01(event){
    console.log(event)  //可以打印出对应的event对象
    console.log(this.state.message)
}


liClick(item,index,e){
    console.log('发生了点击',item,index)
    console.log(e)
}

• 1.5 react条件渲染
  在某些情况下，界面的内容会根据不同的情况来显示不同的内容，或者决定是否渲染某部分内容。
  在react中，所有的条件判断都和普通的JavaScript代码一致。

render() {

    //通过if判断
    let welcome = null;
    let btnText = null;
    if(this.state.isLogin){
        welcome = <h2>欢迎回来!</h2>
        btnText = '退出'
    } else{
        welcome =<h2>请先登录!</h2>
        btnText = '登录'
    }


    

    return (
        <div>
            {/*if 判断*/}
            {welcome}

            <button>{btnText}</button>

            {/*三元运算符 判断*/}
            <button onClick = { e => {this.change()}}>{this.state.isLogin? "退出": "登录"}</button>

            {/*逻辑与 判断*/}
            {this.state.isLogin && 123456}
        </div>
    ) 
}

change(){
        this.setState({
            isLogin: !this.state.isLogin
        })
    }
}

• 1.5 react模拟v-show效果（修改display属性）

    render() {
        const {isLogin} = this.state;

        const displayValue = (isLogin? 'block':'none');
        return (
            <div>
                <h2 style={{display:displayValue}}>你好啊，codekang</h2>
                <button onClick={ e => {
                    this.loginClick()
                } }>
                {isLogin? '欢迎回来': '请先登录'}
                </button>
            </div>
        ) 
    }

    loginClick(){
        this.setState({
            isLogin:!this.state.isLogin
        })
    }
}

• 1.6 react条件列表渲染

render() {

    //使用filter高阶函数过滤数组小于50的数字
    var newArr = this.state.numbers.filter(item => {
        return item > 50
    })

    console.log(newArr)
    return (
        <div>
            <ul>
            {
                newArr.map(item => {
                    return <li>{item}</li>
                })
            }
            </ul>
        </div>
    ) 
}