为什么将节点的Ref set进useState, 用对象包裹再setState会报错, 直接setState不会?

Question

像这样子写是可以成功将div的Ref暴露出来的

export default function () {

  const [ state, setState ] = useState({ name: 123 });

  console.log(state);

  return (
    <div>
      <div ref={input => setState(input)} />
    </div>
  );
}

结果如下:

但如果这样子将其包裹为一个对象再进行setState写

export default function () {

  const [ state, setState ] = useState({ ref: undefined });

  console.log(state);

  return (
    <div>
      <div ref={input => setState({ ...state, ref: input })} />
    </div>
  );
}

就会发生报错...

道理我都懂, 在render中(此处function相当于render)写一个非交互式的setState操作的话就会引起无限循环重渲染从而导致爆内存, 但是这里为什么第一种就可以, 而第二种会报错, 希望大佬们指教

Answer 1

第1种方式，input值只在第1次渲染后完后，input变更，setState后触发重新渲染，ref的callback再次被调用，此时的input和上一次的相同；
而第2种方式，setState的都是一个新对象，每次都不同，导致循环渲染