Комментарии 11
мне вот не нравится это с функциональными компонентами — слишком много лишнего кода. у класса это 4 лишних буквы, а у функций лишний вызов и скобки до/после
можно попробовать подкрутить сам реакт, чтоб он все функции мемоизировал
можно попробовать подкрутить сам реакт, чтоб он все функции мемоизировал
0
не нравится мне движение реакта. от классов и методов мы все ближе и ближе к бесконечному количеству переменных в скоупе, которые хрен потом прочтешь. от extend мы все ближе и ближе к бесконечному количеству hoc.
будущее ужасно…
будущее ужасно…
0
Когда свойства и состояние компонента меняются, React сравнивает предыдущие и текущие свойства и состояния компонента. И только если они неидентичны, компонент-функция перерисовывается.Думаю стоило бы добавить в стутью это раз уже дело пошло по сути о переводе официальной документации а то те кто «учится» только по подобным статьям упустят важные детали reactjs.org/docs/react-api.html#reactmemo:
By default it will only shallowly compare complex objects in the props object. If you want control over the comparison, you can also provide a custom comparison function as the second argument.
function MyComponent(props) {
/* render using props */
}
function areEqual(prevProps, nextProps) {
/*
return true if passing nextProps to render would return
the same result as passing prevProps to render,
otherwise return false
*/
}
export default React.memo(MyComponent, areEqual);
Мое мнение что проще почитать здесь кому нужно на русском ru.reactjs.org/docs/react-api.html#reactmemo
PS React постепенно добавляет то что в Angular было сделано изначально, видимо Virtual DOM штуковина не стала серебрянной пулей как некоторые почему-то предполагали.
0
const Funcomponent = () => {
return (
<div>
Hiya!! I am a Funtional component
</div>
)
}
export default React.memo(FunComponent)
Значит стоит обворачивать все функции при export? Есть ли в этом решении какие либо минусы?
0
Минусы есть. Я очень не люблю когда используются default экспорты, даже иногда просто ненавижу, и многие придерживаются такого же мнения. default экспорты нужно перманентно забанить везде и навсегда.
export const Funcomponent = React.memo(() => {
return <div>Hiya!! I am a Funtional component</div>;
});
0
Ты забыл упомянуть, что React.memo вторым аргументом принимает функцию, в которой можно также, как и в sCU сравнивать prevProps и nextProps, возвращать при этом уже true, если перерисовка не нужна
+1
Я прошу прощения. Но после
желание читать дальше отпало совсем.
Хотя бы:
if (this.state.count === nextState.count) {
return false
}
return true
желание читать дальше отпало совсем.
Хотя бы:
return this.state.count !== nextState.count
0
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Повышаем производительность в компонентах-функциях React с помощью React.memo ()