Ответы пользователя по тегу React
  • Как постепенно перенести большой проект на React?

    dimakrsna
    @dimakrsna Автор вопроса
    Front-end develorer
    Афанасий Захаров Ввиду особенности проекта пришлось сделать по другому. Повесили все react приложение на отдельный путь который прописан в коде ruby. Неудобство такого подхода что каждый раз когда нужно показать обновления, необходимо билдить react и вручную обновлять ссылки в фале ruby. Наверняка есть какой-то вариант автоматизации но я с ним не знаком. Но с другой стороны это мелочь по сравнению с вниканием в тонкости легаси фреймворка или переписывания под react on rails или что-то подобное
    Ответ написан
    Комментировать
  • Как безопасно размонтировать компонент в React?

    dimakrsna
    @dimakrsna
    Front-end develorer
    Правильнее это делать так:
    // componentA.jsx
    class ComponentA extends React.PureComponent {
        state = {
            mounted: false
        }
    
        removeB = () => {
            this.setState({ mounted: !this.state.mounted })
        }
    
        render() {
            let { mounted } = this.state
            return <div>
                {
                    (mounted) ? <ComponentB /> : <ComponentC onClick={this.removeB} />
                }
            </div>
        }
    }
    
    
    // componentB.jsx
    class ComponentB extends React.PureComponent {
        render() {
            return <div>ComponentB</div>
        }
    }
    
    // componentC.jsx
    class ComponentC extends React.PureComponent {
        render() {
            return <button onClick={this.props.onClick}>ComponentC click me</button>
        }
    }
    Ответ написан
    1 комментарий
  • Почему теряется this?

    dimakrsna
    @dimakrsna
    Front-end develorer
    Тут хороший ответ на вопрос почему теряется this: https://stackoverflow.com/questions/24785238/this-...

    Чтобы заработало, нужно сохранить контекст старым способом: var self = this
    и потом при вызове setState обращаться к self

    Рабочий код выглядит так:
    componentDidMount() {
            const myHeaders = new Headers({
                "Content-Type": "application/json",
                Accept: "application/json"
            })
    
            var self = this
    
            fetch("https://jsonplaceholder.typicode.com/todos/1", { // ваш URL
                headers: myHeaders,
            }).then(response => {
                return response.json();
            }).then(data => {
                self.setState({ data });
            })
        }
    Ответ написан
    Комментировать
  • Клонирование часть state до update?

    dimakrsna
    @dimakrsna
    Front-end develorer
    Попробуйте посмотреть в сторону shouldComponentUpdate(nextProps, nextState). Также в некоторых случаях подойдет и redux в одном компоненте.
    Ответ написан
    Комментировать
  • Как узнать что данные из сервера изменились если я в другом компоненте?

    dimakrsna
    @dimakrsna
    Front-end develorer
    Можно проверять данные из сервера, и сопостовлять с текущим стором (частью стора), и если они не равны диспатчить нужный экшен
    store.dispatch(someAction(data))
    Чтобы смотреть за обновлением стора, можно подписаться на него:
    store.subscribe(() => {
           console.log(...)
        })

    или еще лучше, использовать расширение для хрома 'redux'
    Ответ написан
    Комментировать