此[field]替代方案

Question

通过为其创建一个字段，有一种非常令人信服的方法来存储一些独立的数据。

例如，如果我制作几种表格，每种形式仅在某些步骤中出现，并希望在每个步骤之后保存其数据，则在课堂上我将这样做：

/*in class*/
data = [];
saveData = (field) => {
  this.data.push(field);
};

但是，如果没有"此"，我该如何在功能组件中执行相同的操作，并且所有范围变量都在每个渲染上重新创建？

Answer 1

对于渲染无关的数据，推荐的方法是使用参考。useRef钩揭示了一个 current属性可变的对象，您可以将要在重新租用器中持续存在的任何值附加到它。

const data = useRef([]);  // <-- initial value
saveData = (field) => {
  this.data.current.push(field);
};

Answer 2

在功能组件中使用简单变量的主要问题是，它将对每个渲染进行重新初始化。您可以使用useRef解决此问题，因为当组件rerenders和更改它不会导致rerender时保留数据。

单击add几次，然后单击render(通过useState强迫渲染(;

const { useState, useRef } = React;
const Demo = () => {
  const [v, render] = useState(0);
  
  const data = useRef([]);
  
  const saveData = (field) => {
    data.current.push(field);
  };
  return (
    <div>
      <button onClick={() => render(Math.random())}>Render</button>
      
      <button onClick={() => saveData(1)}>Add</button>
      
      <div>
        {data.current.toString()}    
      </div>
    </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>