数值更新问题

当button点击时count+1
把count数字增加内到array更新li列表

初次启动时 useeffect 执行两次
array 变成 [0,0,0] 导致生出三个li
但我的 dependencies [Count] 应该没有变吧?
后面增加产生的数值列表是正常的
结果则是 [0,0,0,1,2,3,4,5]

我用另一个方法
直接宣告一个 Count 变数而不用 useState
在 onClick 内的 setList 把 Count++
但结果则是 [0,1,2,2,2,2,2]

重复渲染问题
当我新加元素到 Array 中
如果不想要旧元素 Item 重新渲染
是要在每个 Item 里面还要有一个自己的状态吗?
比方说把 props.title 当作初值给 useState
只有在 Item 内 useEffect 的 [props.title]
更新后再重新 setState 更改 UI
这样是可以的吗?

export default function App() {
  // let Count = 0;
  let [Count, setCount] = useState(0);
  let [List, setList] = useState([Count]);

  useEffect(() => {
    setList((prevList) => {
      return [...prevList, Count];
    });
  }, [Count]);

  return (
    <div className="App">
      <button
        onClick={() => {
          setCount(Count + 1);
        }}
        
        // onClick={() => {
        //   setList((prevList) => {
        //     Count = Count + 1;
        //     return [...prevList, Count];
        //   });
        // }}
      >
        button
      </button>
      <ul>
        {List.map((val) => {
          return <Item title={val} />;
        })}
      </ul>
    </div>
  );
}
function Item(props) {
  return <li>{props.title}</li>;
}