原文档—->

    npm文档


    对于React组件而言,状态的变化是State的变化而不是State值的变化

    初始化了这样一个状态:

    1. this.state={
    2. name:'xiaoming',
    3. hobbies:['qq','wx']
    4. }

    先这样做:

    1. this.setState({
    2. name:'hanmeimei'
    3. })

    经过这个操作以后,name对应的DOM节点会得到更新,而如果我们这样做:

    1. function changeHobby() {
    2. let hobbies = this.state.hobbies;
    3. hobbies.push('Coding');
    4. this.setState({
    5. hobbies: hobbies
    6. })
    7. }

    第二种操作,react 组件是不会重新渲染的,因为React在检测状态变化时候是一个浅检测,换句话说就是只关注name或者hobbies这两个key对应的value有没有变化,有变化就重新Render否则不做任何动作。那如何去检测value有没有变化,其实就是根据变量的地址。我们都知道变量在内存中都有唯一的地址。拿刚刚的两个例子来说,为什么更新了name和更新了hobbies这两个状态会有两个不同的结果?那是因为在JavaScritp中,string就是被设计成不可变,而数组则可变。换句话说我们无法在保证字符串内存地址不变的情况下改变字符串但却可以保证数组在内存地址不变的情况下增加或者删除其中的某一个元素