Есть ли разница между рендерингом функционального компонента с хуками и без них? - PullRequest
Новая
       7

Есть ли разница между рендерингом функционального компонента с хуками и без них?

1 голос
/ 05 апреля 2019

Только что попробовал несколько реактивных хуков и получил несколько вопросов.

Рассмотрим этот функциональный компонент с реагирующими крючками: 

const Counter = (props) => {
  console.log("Counter component");

  const [count, setCount] = useState(0);

  const handleIncrease = () => {
    setCount(count + 1);
  }

  const handleDecrease = () => {
    setCount(count - 1);
  }

  return (
    <div>
      <button onClick={handleIncrease}>+</button>
      <button onClick={handleDecrease}>-</button>
      <p>{count}</p>
    </div>
  )
}

Он регистрировался каждый раз, когда я нажимал «+» или «-».

Означает ли это, что каждый обработчик внутри этого компонента (или, скажем, функция) повторно объявлен и переназначен переменной? Если это так, не вызовет ли это проблем с производительностью?

Мне функциональный компонент с хуками кажется огромным методом рендеринга классического компонента, подобного этому: 

class Counter extends React.Component {
  state = {
    count: 0,
  }

  render() {
    const handleIncrease = () => {
      this.setState({ count: this.state.count + 1 });
    }

    const handleDecrease = () => {
      this.setState({ count: this.state.count - 1 });
    }

    return (
      <div>
        <button onClick={handleIncrease}>+</button>
        <button onClick={handleDecrease}>-</button>
        <p>{count}</p>
      </div>
    )
  }
}

который, я думаю, никто не сделает.

У меня были неправильные представления о механизме рендеринга React или это просто не лучшая практика при использовании функционального компонента с реакционными хуками?

1 Ответ

1 голос
/ 05 апреля 2019

Хотя в функциональных компонентах функции воссоздаются при каждом рендеринге, затраты на его производительность намного меньше по сравнению с преимуществами.

Вы можете обратиться к этому сообщению за более подробной информацией: Потеря производительности при создании обработчиков на каждом рендере

Однако вы все равно можете оптимизировать, чтобы функции не воссоздались при каждом рендере, используя useCallback или useReducer(depending on whether your updates are complex or not)

const Counter = (props) => {
  console.log("Counter component");

  const [count, setCount] = useState(0);

  const handleIncrease = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, [])

  const handleDecrease = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, [])

  return (
    <div>
      <button onClick={handleIncrease}>+</button>
      <button onClick={handleDecrease}>-</button>
      <p>{count}</p>
    </div>
  )
}

В приведенном выше примере функции воссоздаются только при начальном рендеринге, и с помощью обратного вызова обновления состояния мы можем обновить состояние и избежать проблем с закрытием

...