reactjs - Hooks 中的 this[field] 替代方案

Question

有一种非常方便的方法可以通过为其创建字段来在 React 类中存储一些与渲染无关的数据。

例如，如果我制作多个表单，每个表单仅出现在某个步骤，并且希望在每个步骤后保存其数据，则在 Class I 中将这样做:

/*in class*/

data = [];

saveData = (field) => {
  this.data.push(field);
};

但是，如果没有“this”，并且在每个渲染上重新创建所有作用域变量，我如何在功能组件中执行相同的操作？

Answer 1

对于与渲染无关的数据，recommended way is to use a ref 。 useRef Hook 公开一个其 current 属性是可变的对象，您可以将任何想要在重新渲染时保留的值附加到它。

const data = useRef([]);  // <-- initial value

saveData = (field) => {
  this.data.current.push(field);
};