эта [полевая] альтернатива в Hooks - PullRequest
Новая
       13

эта [полевая] альтернатива в Hooks

2 голосов
/ 27 июня 2019

Существует очень удобный способ сохранить некоторые независимые от рендеринга данные в классе React, создав для него поле.

Например, если я создаю несколько форм, каждая из которых появляется только на определенном этапе и хочетсохраняйте свои данные после каждого шага, в классе я сделаю это: 

/*in class*/

data = [];

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

Но как я могу сделать то же самое в функциональном компоненте, если нет «this», и все переменные области видимости воссоздаются на каждомрендеринга

Ответы [ 2 ]

1 голос
/ 27 июня 2019

Основная проблема использования простой переменной в функциональном компоненте заключается в том, что она будет повторно инициализироваться при каждом рендеринге.Вы можете решить эту проблему с помощью 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>
1 голос
/ 27 июня 2019

Для данных, независимых от рендеринга, рекомендуемый способ - использовать ссылку .Хук useRef предоставляет объект, свойство current которого является изменяемым, вы можете прикрепить к нему любые значения, которые вы хотите сохранить при повторном рендеринге. 

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

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