Ответы пользователя по тегу React
  • Стоит ли переходить на React.PureComponent по-умолчанию?

    PQR
    @PQR
    React.PureComponent реализует метод shouldComponentUpdate таким образом, что он делает поверхностное сравнение props и state (не глубокое). Вот собственно код:
    https://github.com/facebook/react/blob/c8fbdac2271...
    shouldUpdate =
                !shallowEqual(prevProps, nextProps) ||
                !shallowEqual(inst.state, nextState);


    Что такое shallowEqual? Это по сути сравнение оператором === каждого элемента из prevProps с каждым элементом из nextProps. На всякий случай дам ссылку на реализацию для полного понимания: https://github.com/facebook/react/blob/6963ea4bfcd...

    В итоге всё зависит от структуры ваших props. Если в props вы передаёте объекты которые иногда мутируются, т.е. по ссылке они равны ===, но внутри какие-то данные поменялись (что само по себе выглядит странно в экосистеме redux + reselect, но вполне возможно технически), тогда использование PureComponent вам всё поломает, т.к. на экране какие-то компоненты перестанут перересовываться!

    Если же у вас всё по уму, данные которые передаются через props являются скалярными типами (string, int, float, bool) или immutable объектами, тогда смело используйте PureComponent - в некоторых случаях он поможет избавиться от лишних вызовов render.

    Важное замечание: PureComponent нужно использовать только для так называемых presentational components, т.е. для тех компонент, которые НЕ обёрнуты в вызов redux connect().

    Для container components (т.е. тех компонент, которые обёрнуты в redux connect()) нет смысла наследоваться от PureComponent, т.к. метод connect() оборачивает ваш компонент своей реализацией shouldComponentUpdate, которая также использует shallowEqual. Если вы по недосмотру унаследуете container component от PureComponent - ошибок не будет, но это не имеет никакого смыла, т.к. ваш код по сути будет дважды делать shallowEqual, а зачем делать лишнюю работу?

    Подводя итог, рецепт такой:
    - presentational components наследуем от React.PureComponent
    - container components (которые обёрнуты в redux connect()) наследуем от старого доброго React.Component
    Ответ написан
  • Можно ли в Redux использовать EventEmitter?

    PQR
    @PQR
    Ведь придется подписываться на нажатие клавиатуры и тд. Менять состояние часто. В общем, не очень привлекательная затея.


    На самом деле в React всё так и делают - каждое нажатие клавиатуры, каждый клик - всё это генерирует события onChange или onClick. А если используем Redux, то как следствие на каждое нажатие клавиатуры или клик куда-нибудь у нас будут генерироваться action, например такое:
    dispatch({type: TEXTAREA_CHANGE, value: newValue})
    Ответ написан
  • Как правильно сделать размонтирование элемента (блока) в react.js?

    PQR
    @PQR
    Допустим сначала вы создали компонент и отрендрили его на странице так:
    React.render(<MyComponent />, document.getElementById('container'));


    Позже, вы можете удалить его из DOM дерева, плюс React сам почистит все обработчики событий так:
    React.unmountComponentAtNode(document.getElementById('container'));


    facebook.github.io/react/docs/top-level-api.html#r...
    Ответ написан
  • Как в react.js правильно сделать ajax общение с сервером?

    PQR
    @PQR
    Пробовал использовать аякс от jquery, но он почему то не работает без beforeSend в котором должно быть прописано обращение к DOM через jquery (я не знаю, что это за магия, но когда прописываешь типа $(“.class”).after(“блок html”); то обращение с сервером проходит, если этого нет или да же нет всего объекта beforeSend, то он сваливается в error).

    Это какая-то невиданная фигня, так не должно быть.
    1. beforeSend не является обязательным для работы с ajax функциями в jQuery
    2. работа с DOM (где бы она ни была - в beforeSend или ещё где-то) никак не влияет на на ajax функциональность в jQuery
    3. использование react.js также никак не влияет на на ajax функциональность в jQuery

    В общем, вы куда-то не туда капаете в поисках причины ошибки.

    Покажите что-ли текст ошибки или фрагмент кода, в котором вы отправляете ajax запрос на сервер?
    Ответ написан