В последнее время появилось так много новых вещей, которые помогают разработчикам писать лучший код в React. Но, как и во всем, «серебряной пули» не существует. Все имеет свою цену, и нам нужно более разумно оценивать инструменты, которые мы используем.
Итак, давайте начнем…….!!!!!
Компонент высокого порядка
Техника HOC для повторного использования логики компонента в реакции, и в основном HOC — это функция, которая принимает компонент и возвращает новый компонент.
и это очень полезно для повторного использования логики компонента и захвата рендеринга, давайте проверим, например.
const nameHoC = WrappedComponent => { return class extends React.Component { constructor(props) { super(props); this.state = { name: "" }; } componentDidMount() { this.setState({name: "Chirag"}); } render() { const {name} = this.state; return( <div> <WrappedComponent{...this.props} name={name}/> </div> ) } } }; export default nameHoC;
Здесь nameHoC — это функция, которая принимает WrappedComponent в качестве аргумента и возвращает совершенно новый компонент, добавляя некоторые новые функции в WrappedComponent. Мы передаем имя в качестве свойства WrappedComponent.
const WishMe ({ name }) => {<h1>Hello {name}! Good morning</h1>} export default nameHoC(WishMe);
Как вы можете видеть здесь, мы импортировали nameHoC и обернули в него компонент WishMe, nameHoC(WishMe). В WishMe мы используем данные из реквизита, чтобы получить имя человека, которому нужно пожелать.
Что хорошего в компонентах более высокого порядка, так это то, что вы можете видеть данные, поступающие в компонент, как свойство. Это больше не волшебство, как с миксинами.
Однако есть проблемы. Основные проблемы с компонентами более высокого порядка включают:
- Они сложны в настройке.
- Вы не можете отличить данные, поступающие от HOC, и данные, которые были переданы компоненту.
- HOC является внешним по отношению к компоненту, но компонент остается зависимым от HOC. Удалите HOC, и компонент не всегда будет работать, если он зависит от данных HOC.
- Вы можете получить огромные деревья рендеринга, поскольку компоненты поведения содержат компоненты рендеринга.
React.памятка
React.memo() похож на компонент Pure в том, что он помогает нам контролировать повторный рендеринг наших компонентов.
Основной синтаксис
const wishMeComponent = React.memo(function MyComponent(props) { // only renders if props have changed });
Это действительно помогает нам сократить количество повторных рендеров, но React.memo имеет высокую стоимость инициализации и требует некоторых сравнений пропсов при каждом рендеринге. Это, в меру, не проблема, но затраты могут составить что-то значительное.
использоватьОбратный звонок
const memoizedCallback = useCallback( () => { doSomething(a, b); }, [a, b], );
Согласно официальному веб-сайту реагирования, useCallback вернет запомненную версию обратного вызова, которая изменится только в случае изменения одной из зависимостей. Это полезно при передаче обратных вызовов оптимизированным дочерним компонентам, которые полагаются на равенство ссылок, чтобы предотвратить ненужную визуализацию (например, shouldComponentUpdate).
useCallback(fn, deps) эквивалентно useMemo(() => fn, deps).
В приведенном выше примере, если a и b изменяются каждый раз, когда usecallback должен генерировать новую ссылку для функции это накладные расходы, так как нам нужно сравнить предыдущее и следующее значение a и b
Таким образом, в случаях, когда функция либо не вызывает повторную визуализацию, либо всегда вызывает -render (зависит от всех реквизитов), избегайте обертывания вашей функции с помощью `useCallback`.
useMemo
Здесь применимы те же идеи, что и в `useCallback`. Мемоизация может иметь небольшую стоимость, поэтому ее использование в ситуациях, когда зависимости меняются слишком часто, может навредить вам больше, чем вы можете оправдать.
Итак, что мы узнаем из этого?
Смысл этого поста определенно не в том, что все эти функции в чем-то плохи. Суть в том, что не прыгайте вслепую на каждый скоростной поезд, который видите. Потратьте некоторое время, чтобы понять, как работают ваши инструменты и как они могут вам навредить.
Разработать. Мера. Оптимизировать.
Как однажды сказал Дональд Кнут.
«Преждевременная оптимизация — корень всех зол»
Ссылки
https://reactjs.org
https://medium.com/@sgobinda007/using-reactjs-hoc-pattern-be-aware-of -побочные эффекты-f52beae77703