использовал уже кто-то material-ui@next в своих проектах? У меня при обновлении состояния (redux) жуткие тормаза наблюдаются. Думал что что-то с обновлением, но поставил redux-dev-tools онипоказывают что все нормально,  два не затратных обновления  всего стора. Начал профилировать вбраузере и оказалось, что наравне с рендером самого реакта withStyles  занимает столько же времени. Но не силен в профилировании и поэтомуоднозначно результаты трактовать не могу. Отсюда и решил поинтересоваться,  сталкивался ли кто-то с подобным?

Народ, прежде всего хочу поблагодарить Вас что такая группа появилась !
Спасите чайникову душу:
Почему этот код не работает, как пофиксить?
https://github.com/vyacheslavv44/music-react-app/blob/master/src/pages/Tracks/Tracks.js

Спинным мозгом чую 7 и 8 строчку надо сделать Реакт-компонентом!
Но как ?
Можете для бестолочи кусочек кода оформить эти долбанные 7 и 8 строчку?
Заранее благодарен!

На проекте, где я сейчас работаю используется material-ui, но я еще не занимался вопросами производительности.
Насколько мне известно, withStyles оборачивает каждый компонент в библиотеке, может быть, с этим как-то связано?

Ну Вы  получаете элементы в компонента и естественно что намомент выборки их ещё нет в домдереве. Вам нужно в самом компоненте их получить в методе  componentDidMount при помощи ref

7Ariy7  вышеответил

А хоть какой то пример - не найдётся ? По туториалам в Ютубе дошел до этого места - и застрял ?
Или ссылочку на кокой нибудь туториал который поможет решить этот трабл ?

7Ariy7

приблизительно вот так

class Tracks extends Component {
    constructor(props){
        super(props);

        this.trackInputElement = null;
        this.addTrackElement = null;

        this.trackInputRef = element => this.trackInputElement = element;
        this.addTrackRef = element => this.addTrackElement = element;
    }

    handleClick() {
        //console.log('this is:', this);
        const trackName = this.trackInputElement.value;
    }
    render() {
        return (
            <div className="Tracks">
                <h1>Песни</h1>

                <input ref={this.trackInputRef} type="text" placeholder="введите трэк" required class="trackInput" />


                <button ref={this.addTrackRef} class="addTrack" onClick={(e) => this.handleClick(e)}>Добавить</button>
                <ul class="list">

                </ul>





            </div>
        );
    }
}

Сделал патч.

Так на работе делаем.

этот пример показывает только как ref использовать

Дай Бог здоровья и успехов !
И на этом Благодарю !

😊 Спасибо.

Юр !
А что значит патч?
Очень извиняюсь, но у меня с Реакт знакомства - неделя:-(

Это для гитхаба. Исправление

В смысле "починил моё позорище" ? Этот "кошмар"  щас работает ?

Да. Проверь, пожалуйста: писал по памяти, код не запускал.

Закончил описание, кидайтесь палками
https://github.com/artalar/coach-stm/blob/master/MOTIVATION.ru.md

Афиигеееееть!
Ооооой, добрый человек, щас зайду с компа !
Если правда работает - буду должен как земля колхозу!
Дай Бог тебе всех благ и успехов! Прямо душу спас !

7Ariy7:
Афиигеееееть!
Ооооой, добрый человек, щас зайду с компа !
Если правда работает - буду должен как земля колхозу!
Дай Бог тебе всех благ и успехов! Прямо душу спас !