javascript - React 功能组件 - 如何计算实例？

Question

我需要能够跟踪我的组件实例的数量，我该如何在 React 中使用功能组件来做到这一点？

我尝试使用 useRef() 但似乎即使它保留了渲染之间的值 - 它不在组件实例之间共享值。

到目前为止，我想出的唯一解决方案是这个愚蠢的解决方案，我希望有一种方法可以以某种方式以更优雅的方式存储它。

const [ ident, setIdent ] = useState(0);

useEffect(() => {
  if (document.sometring === undefined) {
    document.sometring = 0;
  } else {
    document.sometring++;
  }
  setIdent(document.sometring);
}, []);

问题更新:用例更多的是学术性的，我想知道如何去做，而不是实际的。我希望我的独立组件的每个实例都具有唯一的顺序 ID(如“button-42”)，所以这就是为什么像“给它一个随机代码”这样的解决方案也不适合我。像 redux 或 context 这样的全局状态管理器也不是解决方案，因为比方说，如果我在 GitHub 上开源我的组件，我不应该要求用户也安装 redux 或使用 React.Context。当然，如果组件重新呈现，此 ID 不应更改。

Answer 1

您可以使用 initialise function useState 或使用 useEffect(如果您不需要组件中的更新值)来增加计数器，并将 initialState 设置为新值:

/** export **/ const count = { val: 0 };

const Comp = ({ force }) => {
  // if you don't need the value inside the component on render, you can replace with useEffect(() => (count.val++, count.val), [])
  const [id] = React.useState(() => ++count.val); 
  
  return <div>{force} Count {id}</div>;
}

const Demo = () => {
  const [force, setForce] = React.useState(0);

  return (
    <div>
      <Comp force={force} />
      <Comp force={force} />
      <Comp force={force} />
      
      <button onClick={() => setForce(force + 1)}>Force Render</button>
    </div>
  );
}

ReactDOM.render(
  <Demo />,
  root
)

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>