Hooks 中的 this[field] 选项

Question

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

例如，如果我制作多个表格，每个表格仅在特定步骤出现，并且希望在每个步骤后保存其数据，在 Class 我将这样做：

/*in class*/

data = [];

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

但是，如果没有 "this"，并且在每次渲染时重新创建所有范围变量，我如何在功能组件中做同样的事情？

Answer 1

对于render-independent-data，recommended way is to use a ref。 useRef 挂钩公开了一个对象，其 current 属性是可变的，您可以将任何想要在 re-renders 中持久化的值附加到它。

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] 选项

this[field] alternative in Hooks

reactjs

react-hooks