JavaScript基本数据类型解构赋值时复制的是值，是值的拷贝，不是引用

核心

基本数据类型，解构赋值时复制的是值，是值的拷贝，不是引用。hooks里面的更改，外面的不变。

点击更改值，然后点击获取值，输出的是？

<button onclick="timeChange()">更改值</button>
<button onclick="getTime()">获取值</button>
<script>
  function fun() {
    let time = 10;
    function timeChange(){
      time  = 1000
    }
    return { time, timeChange}
  }
  let { time,timeChange} =fun()
  function getTime(){
    console.log('获取的值是', time)
  }
</script>

输出的是 10，不是1000

分析原因

核心原因：基本数据类型，解构赋值时复制的是值，不是引用。
当你点击“更改值”时，修改的是函数内部的局部变量 time，而外部的 time 变量并没有被更新。

解决办法一：通过函数来获取time

<button onclick="timeChange()">更改值</button>
<button onclick="getTime()">获取值</button>
<script>
function fun() {
  let time = 10;
  function timeChange() {
    console.log('设置')
    time = 1000;
  }
  // 通过函数来获取值
  function getTimeValue() {
    return time;
  }
  return { getTimeValue, timeChange };
}

let { getTimeValue, timeChange } = fun();

function getTime() {
  console.log('获取的值是', getTimeValue()); // 总是获取最新值
}
</script>

也可以这样来写 getTimeValue:()=> time

<button onclick="timeChange()">更改值</button>
<button onclick="getTime()">获取值</button>
<script>
function fun() {
  let time = 10;
  function timeChange() {
    console.log('设置')
    time = 1000;
  }
  return { timeChange, getTimeValue:()=> time };
}

let { timeChange, getTimeValue } = fun();

function getTime() {
  console.log('获取的值是', getTimeValue()); // 总是获取最新值
}

将基本数据类型变成引用数据类型

function fun() {
  let state = { time: 10 };
  function timeChange() {
    state.time = 1000;
  }
  return { state, timeChange };
}

let { state, timeChange } = fun();

function getTime() {
  console.log('获取的值是', state.time); // 会得到 1000
}