react17项目函数式写法中直接使用对象（非useState创建的状态）时，发现页面中的打印被多次触发

在React 17 的函数组件中，如果你直接使用对象作为状态并且没有使用`useState`来管理它，而是在组件内部对其进行修改，可能会导致多次渲染并触发更新。这是因为JavaScript对象的引用是基于其内存地址的，当你对它的属性进行增删改操作时，实际上是对对象本身进行了改变，这会视为状态的变更，从而可能导致多次调用组件的`render`方法。

例如：

function MyComponent({ data }) {
  const obj = { count: 0 }; // 直接使用的对象

  function handleClick() {
    obj.count++; // 这里改变了obj的值
  }

  return (
    <>
      <button onClick={handleClick}>点击</button>
      <p>{obj.count}</p> // 当count变化时，整个组件会被重新渲染
    </>
  );
}

要解决这个问题，你可以将`data`作为一个不可变的数据结构（如`Immutable.js`、`Immer`等），或者确保只在必要的时候触发状态更改。另外，如果`data`不需要外部传递，可以考虑使用`React.memo`或者`useCallback`来优化性能，避免不必要的渲染。