Эксперт Python
5418 / 3842 / 1214
Регистрация: 28.10.2013
Сообщений: 9,554
Записей в блоге: 1
1

Обновление свойств компонентов на обновление состояния родителя

29.08.2018, 16:58. Показов 1836. Ответов 2

Author24 — интернет-сервис помощи студентам
Компонент Clock
Обновление свойств компонентов на обновление состояния родителя

отрисовывается 500 раз. Внутри тикает таймер и когда компонент один - все ОК.
Но когда их 500 (по всем временным зонам из либы moment-timezone) - все плохо (страница сильно грузит процессор). Таймер нужно вынести в отдельный компонент, а всем Clocks просто передавать изменения state родителя.
Но я не понимаю как это сделать в React. Есть здесь что-то вроде подписки на события? Или тут как раз redux (пока не изучал) понадобится?

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import React, {Component} from 'react';
 
class Clock extends Component {
    
    constructor(props) {
        super(props)
        this.state = {
            date: new Date()
        } 
    }
    // когда компонент будет создан
    componentDidMount() {
        this.timerID = setInterval(
            () => this.tick(),
            1000)
    }
    // когда компонент будет удален
    componentWillUnmount() {
        clearInterval(this.timerID)
 
    }
 
 
 
    tick() {
        this.setState({
            date: new Date()
        })
 
    }
    
    
    render() {
        let date = this.state.date
        
        date.setHours(
            date.getUTCHours() + parseInt(this.props.offset,10)
           
        )
        return ( <div className="clock"> 
                {this.props.place}
                <hr/>
                <time>{date.toLocaleTimeString()}</time>
            </div>
        )
    }
}
 
 
export default Clock;
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
29.08.2018, 16:58
Ответы с готовыми решениями:

Обновление всех переменных и свойств компонентов формы
Вобщем такое дело. Вот например на форме меняю button1.Enabled на false. И как сделать что бы при...

Обновление состояния ExpandableListView
Есть кнопка при нажатии на которою в БД добавляется запись. Все записи с БД отображаются в...

Обновление состояния панели прокрутки
Здравствуйте. Столкнулся с такой проблемой: Есть фрейм на нем JScrollPane, на ней JPanel, на...

Сохранение и обновление состояния checkbox в MySQL
Привет всем! Вопрос: Как сохранить чекбокс в БД? Есть скрипт: &lt;?php mysql_query(&quot;SET NAMES...

2
Эксперт Python
5418 / 3842 / 1214
Регистрация: 28.10.2013
Сообщений: 9,554
Записей в блоге: 1
29.08.2018, 17:43  [ТС] 2
Вопрос решил: созданием компонентов Clock внутри компонента Timer и передачей состояния последнего через свойства всем Clock.

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import React, {Component} from 'react';
import Clock from './Clock';
import moment from 'moment-timezone';
 
class Timer extends Component {
    
    constructor(props) {
        super(props)
        this.state = {
            date: new Date()
        } 
    }
    // когда компонент будет создан
    componentDidMount() {
        this.timerID = setInterval(
            () => this.tick(),
            1000)
    }
    // когда компонент будет удален
    componentWillUnmount() {
        clearInterval(this.timerID)
 
    }
 
 
    tick() {
        this.setState({
            date: new Date()
        })
 
    }
    
    render() {
          const tz_names = moment.tz.names();
          const listClocks = tz_names.map((item, idx) => {
                     return (
                        <Clock
                            key={idx} 
                            place={item} 
                            offset={moment.tz(item).format("Z").split(":")[0]}
                            date={this.state.date}
                        ></Clock>
                       )
                    }
                )
                
          return  listClocks;     
    }      
}
export default Timer;
... P.S. Маленький вопрос вдогонку: я так понял React пересоздает только изменившийся текст (в моем случае - время), а заголовок с названием временной зоны (props.place) заново не должен заново отрисовываться?
0
249 / 162 / 68
Регистрация: 10.12.2017
Сообщений: 558
30.08.2018, 15:34 3
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
import React from 'react'
 
const TimeContext = React.createContext({
  date: {},
  update: () => { },
  locations: []
})
 
class TimerCaption extends React.PureComponent {
 
  // Если React.Component
 
  // state = {
  //   caption: this.props.caption
  // }
 
  // static getDerivedStateFromProps(props, state) {
  //   return props.caption != state.caption ? { caption } : state
  // }
 
  // shouldComponentUpdate(nextProps, nextState) {
  //   return nextProps.caption !== nextState.caption
  // }
 
  // render() {
  //   console.log('render?')
  //   return <div>{this.state.caption}</div>
  // }
 
  render() {
    const { caption } = this.props
    console.log(`render: ${caption}`)
    return <div>{caption}</div>
  }
}
 
class Timer extends React.Component {
  render() {
    return <TimeContext.Consumer>
      {({ date, update }) => {
        return <React.Fragment>
          <TimerCaption caption={this.props.caption} />
          {date.toString()}
          <button onClick={update}>manual update context value from child</button>
        </React.Fragment>
      }}
    </TimeContext.Consumer>
  }
}
 
export default class Test extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      date: new Date(),
      update: this._update,
      timer: null,
      locations: [{ caption: 'Moscow' }, { caption: 'NeMoscow' }]
    }
  }
 
  _update = () => {
    this.setState({ date: new Date() })
  }
 
  componentDidMount() {
    this.setState({ timer: setInterval(() => this._update(), 5000) })
  }
 
  componentWillUnmount() {
    clearInterval(this.state.timer)
  }
 
  render() {
    return <TimeContext.Provider value={this.state}>
      {this.state.locations.map(l => <Timer key={l.caption} caption={l.caption} />)}
    </TimeContext.Provider>
  }
}
1
30.08.2018, 15:34
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
30.08.2018, 15:34
Помогаю со студенческими работами здесь

Разрешить обновление состояния и дат незавершенных задач
в настройках Календаря есть возможность выполнить следующее: Чтобы отобразить задачи в...

Обновление состояний checkBox при изменении состояния соответствующего comboBox
Доброго времени суток, возник вопрос: Как при смене значения comboBox изменять состояния checkBox?...

React Thunk и обновление компонентов
Здравтсвуйте! Разбираюсь в redux-thunk. export const someAction = () =&gt; { return dispatch...

Обновление/отрисовка компонентов в Runtime
Доброго времени суток! Имеется такая задачка: на форме лежит панель pBlocks, на ней - несколько...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru