Вызвать render() только одного компонента

@vvshnik14 · Регистрация: 26.06.2016

Студворк — интернет-сервис помощи студентам

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React from 'react';
import First_module from './First_module';
import Second_module from './Second_module';
 
 
class App extends React.Component {
 
  render() {
    return (
      <div>
 
          <div><First_module /></div>
 
          <div><Second_module /></div>
 
      </div>
    );
  }
}
 
export default App;

Как при изменении состояния компонента App, вызвать рендер только Second_module, не трогая рендер First_module?

@Evgen1337 · 02.04.2019, 14:14

я нашел хуки очень крутыми %)

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
import React from 'react';
 
function ComponentA(props) {
  console.log('render ComponentA')
  return <div>ComponentA: {props.value}</div>
}
 
function ComponentB(props) {
  console.log('render ComponentB')
  return <div>ComponentB: {props.value}</div>
}
 
function App(props) {
  console.log('render App')
  const [a, setA] = React.useState(0)
  const [b, setB] = React.useState(0)
 
  const ComponentAMemo = React.useMemo(() => <ComponentA value={a} />, [a])
  const ComponentBMemo = React.useMemo(() => <ComponentB value={b} />, [b])
 
  return <React.Fragment>
    {ComponentAMemo}
    {ComponentBMemo}
    <button onClick={() => setA(a + 1)}>a+1</button>
    <button onClick={() => setB(b + 1)}>b+1</button>
  </React.Fragment>
}
 
export default App

@vvshnik14 · 02.04.2019, 16:32 **[ТС]**

а не используя хуки, возможно ли это

@Egor.S · 02.04.2019, 17:14

shouldComponentUpdate ?

@Evgen1337 · 02.04.2019, 17:16

можно:
shouldComponentUpdate
React.PureComponent
https://reactjs.org/docs/react... efromprops

только из твоего куцего примера не понятно ничего...

@svtslv · 02.04.2019, 17:26

JavaScript
1
{ this.state.isTrue ? <div>True</div> : <div>False</div> }

Добавлено через 5 минут
Не так понял. Вообще странный вопрос никогда о таком не задумывался.

@vvshnik14 · 02.04.2019, 19:02 **[ТС]**

Сообщение от Evgen1337

только из твоего куцего примера не понятно ничего...

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React from 'react';
import First_module from './First_module';
import Second_module from './Second_module';
 
 
class App extends React.Component {
 
  render() {
    return (
      <div>
 
          <div><First_module /></div> 
 
          <div><Second_module /></div>
 
      </div>
    );
  }
}
 
export default App;

First_module при первом рендеринге в методе componentDidMount() делает http запрос, на основе ответа на запрос рендерит чекбоксы.
На каждом чекбоксе весит событие клик, которое меняет состояние App, новое состояние App является источником для рендеринга Second_module. А вот вызывать повторно First_module componentDidMount() мне не надо, он вызывает проблемы.

Как нужно:

зарендерить чекбосы в First_module
кликнуть на чекбокс
выпонить http запрос и получить в ответе объект А
зарендерить Second_module используя объект А

Как вызвать рендер Second_module из First_module я не знаю.
Поэтому решил вызвать рендер Second_module из родителя(т.е. App), но при этом ререндериться First_module, а мне это не надо.

@Evgen1337 · 02.04.2019, 19:31

ну а как тогда чекбоксы в First_module отображают, включен ли чекбокс или нет? или состояние выбранных чекбоксов нигде не учитывается? ) просто когда рендеришь чекбокс, ты должен сказать вот value, вот onChange, или у тебя просто весит onClick ) и на состояние это никак не влияет, а просто проходит событие onClick и погнали? )

@vvshnik14 · 03.04.2019, 10:04 **[ТС]**

Сообщение от Evgen1337

ну а как тогда чекбоксы в First_module отображают, включен ли чекбокс или нет? или состояние выбранных чекбоксов нигде не учитывается? ) просто когда рендеришь чекбокс, ты должен сказать вот value, вот onChange, или у тебя просто весит onClick ) и на состояние это никак не влияет, а просто проходит событие onClick и погнали? )

С логикой того как должны работать чекбоксы(событие состояние колбэки) у меня всё в порядке. Зачем вам знать как работают чекбоксы и остальные частности приложения. Я лишь описываю общие функциональные моменты проекта не углубляясь в частности. Конкретно в этом посте меня интересовало как могут взаимодействуют между собой компоненты реакт. А именно:

Может ли один компонент напрямую повлиять на другой, не через общего родителя. Если да то как?

@Evgen1337 · 04.04.2019, 16:03

ага контекст называется https://reactjs.org/docs/context.html
или Redux, или Mobx или %)...

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@vvshnik14 6 / 6 / 0 Регистрация: 26.06.2016 Сообщений: 68
	02.04.2019, 16:32 [ТС]
	а не используя хуки, возможно ли это 0

@Egor.S 215 / 180 / 79 Регистрация: 02.10.2011 Сообщений: 651
	02.04.2019, 17:14
	shouldComponentUpdate ? 0

@Evgen1337 249 / 162 / 68 Регистрация: 10.12.2017 Сообщений: 558
	02.04.2019, 17:16
	можно: shouldComponentUpdate React.PureComponent https://reactjs.org/docs/react... efromprops только из твоего куцего примера не понятно ничего... 0

@Evgen1337 249 / 162 / 68 Регистрация: 10.12.2017 Сообщений: 558
	02.04.2019, 19:31
	ну а как тогда чекбоксы в First_module отображают, включен ли чекбокс или нет? или состояние выбранных чекбоксов нигде не учитывается? ) просто когда рендеришь чекбокс, ты должен сказать вот value, вот onChange, или у тебя просто весит onClick ) и на состояние это никак не влияет, а просто проходит событие onClick и погнали? ) 0

@Evgen1337 249 / 162 / 68 Регистрация: 10.12.2017 Сообщений: 558
	04.04.2019, 16:03
	ага контекст называется https://reactjs.org/docs/context.html или Redux, или Mobx или %)... 0