Реагировать useState против необработанной переменной - PullRequest
Новая
       9

Реагировать useState против необработанной переменной

0 голосов
/ 20 февраля 2019

Например, у меня есть некоторые данные, которые должны быть отображены.Элементы будут всегда одинаковыми, но они поступают из реквизита. 

const items = props.data.values.map(value => ({
  id: value.id
  name: value.name,
  rating: Number(value.rating)
}));

return (
  {items.map(item => (
    <div key={item.id}....
  )}
);

Могу ли я использовать useState для таких переменных: 

const [items] = useState(data.values.map(value => ({
  id: value.id
  name: value.name,
  rating: Number(value.rating)
})));

Помогает ли это мне избавиться от лишних"отображение" во время следующего рендеринга или нет?

Ответы [ 2 ]

0 голосов
/ 20 февраля 2019

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

const items = useMemo(() => {
    return data.values.map(...)
}, [data])

В этом примере элементы вычисляются только в случае изменения значения data .в противном случае он возвращает запомненную версию и ничего не пересчитывает.

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

const Counter = (props) => {
    const [value, setValue] = useState(0)
    return (
        <div>
            <p>{value}</p>
            <button onClick={() => setValue(value + 1)}>Increment</button>
            <button onClick={() => setValue(value - 1)}>Decrement</button>
        </div>
    )
}

Таким образом, всякий раз, когда мы вызываем setValue, компонент повторно визуализируется, и новое значение будет показано пользователю.

0 голосов
/ 20 февраля 2019

Я думаю, что вы ищете Чистые компоненты .Они используют shouldComponentUpdate для определения необходимости повторной визуализации компонента.В вашем случае, если реквизиты одинаковы, компонент не будет повторно визуализироваться, если вы используете Pure Component.

...