Question

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

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

/*in class*/

data = [];

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

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

Answer 1

对于独立于渲染的数据，recommended way is to use a ref。 useRef钩子公开了一个对象，其current属性是可变的，您可以在重新渲染时附加要保留的所有值。

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

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

Answer 2

在功能组件中使用简单变量的主要问题是它将在每个渲染器上重新初始化。您可以使用useRef解决此问题，因为在重新发布组件时会保留数据，并且更改数据不会导致重新呈现。

多次单击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>

Hooks中的this [field]替代

2 个答案: