# 为什么useState可以使用const解构赋值?

之前一直有一个问题困扰我,就是如下useState的数组解构赋值使用const进行声明?

下面是简单的ES6的数组解构赋值:

//const声明的变量不能进行再次赋值,但可以对对象中的属性进行赋值
const [x,y]=[{a:1},3]
x.a = 2 //success
x={}//error 报错;
y=4//error 报错;

x--->{a:1}
y--->3

使用React的useState Hook的标准方法如下:

const [count, setCount] = useState(0);

但是,const count显然要将此变量重新分配给其他原始值❌。为什么变量没有定义为let count

并不是的。重新呈现组件后,将再次执行该函数,从而创建新的作用域,创建新的count变量,该变量与先前的变量无关

如果需要把这些变量进行关联,需要使用useRef的hooks进行保存状态。

例:

let _state;
let _initialized = false;
function useState(initialValue) {
  if (!_initialized) {
    _state = initialValue;
    _initialized = true;
  }
  return [_state, v => _state = v];
}

function Component() {
  const [count, setCount] = useState(0);

  console.log(count);
  setCount(count + 1);
}

Component();
Component(); // in reality `setCount` somehow triggers a rerender, calling Component again
Component(); // another rerender
Last Updated: 8/1/2021, 1:43:20 PM