1. 问题描述

今天在写一个代码题时候, 有一个BUG 导致自己停滞好久, 该BUG 可以描述为如下代码:

PS: 由于原题是算法题, 为了叙述方便以及展示重点考虑, 这里只复现BUG, 不提供原场景.

const log = console.log.bind(console)

let obj = {}

let list = [1, 2, 3]

obj.array_1 = list

obj.array_2 = list

obj.array_1.push(4)

log(obj)

// {

// array_1: [ 1, 2, 3, 4 ],

// array_2: [ 1, 2, 3, 4 ]

// }

场景说明:

在第8行代码: obj.array_1.push(4) 中, 目的是将obj.array_1 值改变, 而obj.array_2 值期望是不要改变, 但是结果事与愿违, obj.array_1, obj.array_2 的值均发生了改变.

2. 原因分析

要理解上面代码, 我们先来了解一下JavaScript 的数据类型, JavaScript 的数据类型可分为:

基本数据类型: Undefined, Null, Number, String, Boolean
引用数据类型: Object(array, object, set 等数据类型)

JavaScript 对于数据类型值操作的方式如下:

基本数据类型: 按值访问, 因此可以操作保存在变量中的实际值;
引用数据类型: 引用类型的值是保存在内存中的对象, 和其他语言不通, JavaScript 不允许直接访问内存中的位置, 也就是说不能直接操作对象的内存空间, 我们在操作对象时实际上是操作对象的引用而不是实际的对象, 为此引用类型的值是按引用访问的.

简而言之, 当一个变量 a 是引用数据类型时, a 保存的是一个地址, 我们操作 a 来达到改变地址值的目的; 当变量 b 和 a 指向同一个地址时, 他们的操作会互相影响;

在上面的例子中, obj.array_1 和 obj.array_2 指向的是同一个引用数据类型 list, 因此它们之间的操作会互相影响, 如果要消除这种影响, 我们将obj.array_1 和 obj.array_2 指向不同的引用数据类型即可

const log = console.log.bind(console)

let obj = {}

let list = [1, 2, 3]

obj.array_1 = list

// 通过Array.prototype.slice() 方法完成数组的拷贝

obj.array_2 = list.slice()

obj.array_1.push(4)

log(obj)

// {

// array_1: [ 1, 2, 3, 4 ],

// array_2: [ 1, 2, 3 ]

// }

log(typeof 'here')

3. React 中的引用数据类型

在React 中, 引用数据也具有这种性质(因为React 本身支持JavaScript, JSX 也是JavaScript 语法的升级), 如下面例子:

import React from "react";

const log = console.log.bind(console)

class ReactObjectAdress extends React.Component{

    constructor(props) {

        super(props)

        this.state = {

            arrayOne: [],

            arrayTwo: []

        }

    }

    componentDidMount() {

        let array = [1, 2, 3, 4]

        this.setState({

            arrayOne: array,

            arrayTwo: array

        })

    }

    onClickEvent = () => {

        let array = this.state.arrayOne

        array.push(5)

        this.setState({

            arrayOne: array

        })

    }

    render() {

        let { arrayOne, arrayTwo } = this.state

        log('arrayOne: ', arrayOne)

        log('arrayTwo: ', arrayTwo)

        return (

            <>

                <button onClick={this.onClickEvent}>click Me!</button>

            </>

        )

    }

}

export default ReactObjectAdress

描述:

当我们点击 'click Me!' 按钮触发 onClickEvent 实践时, 可以在控制台看到 this.state.arrayOne 和 this.state.arrayTwo 这两个数组发生了改变: 数组被添加了一个新数据 5

4. 业务场景

根据上面React 框架的例子, 我们来思考这样一个业务场景:

现在需要在ReactObjectAdress 组件中添加两个组件: (array 表示在componentDidMount 中的值, 可以理解出初始数据)

组件ShowArray, 用于展示数组 array
组件UpdateArray, 用于更新数组 array, 且更新需要向后端确认

根据上面的场景, 我们可能会写如下的代码:

import React from "react";

const log = console.log.bind(console)

class ReactObjectAdress extends React.Component{

    constructor(props) {

        super(props)

        this.state = {

            arrayOne: [],

            arrayTwo: []

        }

    }

    componentDidMount() {

        let array = [1, 2, 3, 4]

        this.setState({

            arrayOne: array,

            arrayTwo: array

        })

    }

    onClickEvent = () => {

        let array = this.state.arrayOne

        array.push(5)

        this.setState({

            arrayOne: array

        })

    }

    render() {

        let { arrayOne, arrayTwo } = this.state

        // log('arrayOne: ', arrayOne)

        // log('arrayTwo: ', arrayTwo)

        return (

            <>

                <button onClick={this.onClickEvent}>click Me!</button>

                <ShowArray array={arrayOne} />

                <UpdateArray array={arrayTwo} />

            </>

        )

    }

}

export default ReactObjectAdress

描述:

上面代码中, ShowArray UpdateArray 的参数分别为arrayOne, arrayTwo, 这样会存在一个问题:

arrayOne, arrayTwo 指向的是同一个地址, 如果我们在UpdateArray 中操作this.props.array 参数, 导致的结果就是arrayOne, arrayTwo 这两个数会马上改变; ShowArray, UpdateArray这两个组件会立即更新显示!

但正确的逻辑应该是先等到UpdateArray 和后端确认之后, ShowArray 组件才完成更新, 因此这种场景下: 显示的数据和更改的数据不应该使用同一个地址存储, 上面的代码需要进行如下的变更:

componentDidMount() {

    let array = [1, 2, 3, 4]

    this.setState({

        arrayOne: array,

        arrayTwo: array.slice()

    })

}

5. 参考资料

JavaScript 高级程序设计第4章 - 变量、作用域和内存问题(第三版)

巴特西

JavaScript 引用数据类型

1. 问题描述

2. 原因分析

3. React 中的引用数据类型

4. 业务场景

5. 参考资料

最新文章

热门文章