react学习之路5：学习react时的一些小坑

使用react也有一段时间了，其实一直是在做项目过程中学习，所以难免会遇到一些坑。而且在写法上，react与vue有相似的地方，但如果太想当然地使用vue的写法会遇到一些坑。

1. 在Jsx语法中,处理事件需要bind(this,value),使这个事件指向这个当前组件内的funtion，写法的话我总结了几种，其中推荐第三种写法，这种写法对性能的影响是小的。

//第一种 bind绑定
addClick(){
        let click = this.state.click
        this.setState({
            click:++click
        })
    }
render() { 
        return ( <div onClick={this.addClick.bind(this)}>这是页面</div> );
    }

//第二种 在jsx中使用箭头函数

addClick(){
        let click = this.state.click
        this.setState({
            click:++click
        })
    }
render() { 
        return ( <div onClick={()=>{this.addClick()}}>这是页面</div> );
    }

//第三种 箭头函数外移（推荐写法）
addClick = ()=>{
        let click = this.state.click
        this.setState({
            click:++click
        })
    }
    render() { 
        return ( <div onClick={this.addClick}>这是页面</div> );
    }

2. react的局部样式。在vue中的局部样式写法是使用scoped关键字，原理是给vue文件中的样式名称都加上一个key，达到一个“局部”的效果。而react中是局部样式会稍微麻烦一点，使用的方式是文件引入结合类选择器。

//1.新建一个app.module.css
.container{
    color: blue;
}

//app.js引入module样式
import appStyles from './app.module.css'
//className={类选择器}
 <div className={appStyles.container} ></div>

我们来看看效果

与vue实现的原理类似，在class名称后加上了一个唯一的key，达到了局部的目的。

3. 持续更新中