javascript - 为什么在 React js 中初始化一维数组和二维数组的行为不同

Question

示例 1

const arr   = ["a","b","c","d"]

class Alphabate extends React.Component{
    constructor(props){
        super(props)
        this.state = {alpha:[...arr]}
        this.state.alpha[0] = "Changed"
        console.log(`inside consructor arr =  ${arr}`)
        
    }

    render(){
        return <div>
            {this.state.alpha.map(
            x=><h3>{x}</h3>
            )}
             </div>
    }
}



ReactDOM.render(<Alphabate />,
document.getElementById("root"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>

<div id="root"></div>

在此示例中，1 浏览器显示 Changed b c d 和控制台日志“inside consructor arr = a,b,c,d”

const arr   = [["a","b"],
               ["c","d"]]

class Alphabate extends React.Component{
    constructor(props){
        super(props)
        this.state = {alpha:[...arr]}
        this.state.alpha[0][0] = "Changed"
        console.log(`inside consructor arr =  ${arr}`)
        
    }

    render(){
        return <div>
            {this.state.alpha.map(
            x=>x.map(
            y=><h3>{y}</h3>
            ))}
             </div>
    }
}



ReactDOM.render(<Alphabate />,
document.getElementById("root"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>

<div id="root"></div>

在此示例中，浏览器显示 Changed b c d 和控制台日志“inside consructor arr = Changed,b,c,d”

所以我的问题是：为什么一维数组按值传递，二维数组按引用传递，尽管我传递了数组 [...arr] 的副本而不是数组

标签： javascripthtmlarraysreactjs

Answer 1

JavaScript 没有“二维”数组。它有数组数组。当你这样做时：

this.state = {alpha:[...arr]}

...您只是在制作外部数组的副本；它仍然包含对原始内部数组的引用arr。因此，当您更改这些内部数组的内容时，无论您查看哪个外部数组以到达内部数组，都会看到这种变化。