LINUX.ORG.RU

React App RLT

 


1

1

Не так давно начал колупать React и нужен совет старожилов. Датчик с показанием RLT. В голове сидит идея получения всех данных одним jsn-om в корневом компоненте. Off Doc настойчиво рекомендует все хранить в state, и как тогда быть? Заливать в State новый json, и получать render? Буду рад откровениям.

Заливать в State новый json, и получать render?

React только так и работает, как бы.

Суть в том, что ты не вызываешь рендер сам, а меняешь состояние. Реакт сам разбирается, что и когда нужно перерисовать.

Deleted
()
Последнее исправление: Bizun (всего исправлений: 1)
Ответ на: комментарий от Deleted

Корневой компонент вмещает в себе структуру приложения. При вызове render-a корневого - получаем вызов всего. С проходом почти всего жизненного цикла каждого компонента. Так и работает?

Espressso
() автор топика
Ответ на: комментарий от Espressso

При вызове render-a корневого - получаем вызов всего.

Так как ты его вызывать будешь?

Если ты просто изменишь стейт, то перерисуется только то, что изменилось.

Допустим, у тебя есть Root-компонент, у него есть стейт. Есть дочерние компоненты Child1, Child2, Child3. Ты им передаешь стейт рута, но они выводят данные по разному. Перерисуется только тот дочерний компонент, для которого изменения были критичными.

Deleted
()
Ответ на: комментарий от Deleted

Под вызовом имел ввиду, не шаманский обряд по «призыву». А сам факт, вызов функции render-a. Да, я понимаю, что только только Props-зависимые данные будут меняться. Вот только, когда структура не из будет уходить вниз, а мы как вызывали компоненты не зависимы от state, так и вызываем дальше. И так в каждом дочернем компоненте каждой ветки.

Espressso
() автор топика
Ответ на: комментарий от Deleted

Т.е. ставить заглушки на ReceiveProps и ShouldCompUpd-ом закрывать render при отсутствии изменений на новые props? Звучит просто, как костыль.

Espressso
() автор топика
Ответ на: комментарий от Espressso

Метод render, само собой, будет вызываться всегда. Но это не проблема, т.к. вызвать метод - это быстро (а если не быстро, то да, юзай ShouldCompUpd), и это не проблема.

Долго - создавать и удалять DOM-элементы. После вызова render, будет сгенерирован ShadowDOM, если он не совпадает с текущим, то будет перерисовка, с дерганьем реального DOM'a.

По идее, как-то так это все работает.

Deleted
()
Последнее исправление: Bizun (всего исправлений: 1)
Ответ на: комментарий от bvn13

Я предпочитаю передавать все необходимое props/callback-ами. Но, если есть обьективные аргументы в его пользу, желаю выслушать.

Espressso
() автор топика
Ответ на: комментарий от Espressso

ну, например, по Flux-у ты сделаешь проверку статуса датчика по таймеру, положишь состояние в store, и вызовешь евент. А дальше - уже кто подписан (UI), тот заберет новые значения из этого store и перерендерится. Это тренд, modern-way и, можно сказать, наиболее правильный вариант не запутаться в пробросе prop-ов.

bvn13 ★★★★★
()

Заливать в State новый json, и получать render? Буду рад откровениям.

Как уже советовали - Redux. В componentDidMount компонента, который рисует показания датчика вызов «API» по таймеру, полученый json загоняешь экшеном в store на который подписан этот компонент, всё отрендерится «само».

А в componentWillUnmount прибиваешь таймер.

vvn_black ★★★★★
()

В голове сидит идея получения всех данных одним jsn-om в корневом компоненте.

А если от этого отказаться, то можно и без редукса, прям как в доке:

class Widget extends Component {

  constructor = props => {
    super(props);
    this.state = {value: {}};
  }

  componentDidMount = () => {
    this.timerID = setInterval(
      fetch('http://192.168.0.10/get/temperature')
        .then(response => response.json())
        .then(json => this.setState({value: json})
        .catch(error => console.log(error)),
      5000);
  };

  componentWillUnmount = () => {
    clearInterval(this.timerID);
  };


  render() {
    return (
      <div>{this.state.value.temperature}</div>
    )
  }
}
vvn_black ★★★★★
()
Последнее исправление: vvn_black (всего исправлений: 1)

Всем большое спасибо :). Немного оффтоп :D, но столкнулся с проблемой, когда обновляю обьект в state:

 constructor(props){
    super(props);
    this.state = {
      Object: {
        A:0
      }
    }
    this.CallBack = this.CallBack.bind(this)
  }

CallBack(a){
   let ob = this.state.Object;
   ob.A = a; 
   this.setState({
      Object: ob
    })
  }


Я получаю то, что теряю доступ ко всем prev/nextState состояний функций жизненного цикла. Чем это можно пофиксить? 
Espressso
() автор топика
Ответ на: комментарий от Espressso

Так нельзя делать. Нужен новый экземпляр объекта. Например, так:

CallBack(a){
   this.setState({
      Object: Object.assign({}, this.state.Object, { A: a });
   })
}

Обрати внимание, что Object.assign — это статический метод стандартного класса Object, который к this.state.Object никак не относится. А всё потому, что у тебя говнокод. Пиши поля и названия функций со строчной буквы.

static_lab ★★★★★
()
Ответ на: комментарий от static_lab

Спасибо большое! Нужно будет более детально в этом разобраться. А код да... Нужно с колен подымать D;

Espressso
() автор топика

react в качестве обработчика данных в json-формате

this.setState перерисовывает компоненту. Можно хранить данные для отображения в переменных компоненты, а перерисовку делать через this.forceUpdate. Хотя редаксофилы будут против. К Off Doc относись спокойно, посмотри

https://plot.ly/products/dash/

http://sova.online

Все данные поступают в json, react этот json парсит и отрисовывает

aon24
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.