Как сделать рендер на реакте при первой загрузке?

Question

[pavel pavlov]

Только начал изучать реакт, не понял одну важную вещь. Данные для компонентов как правило берем в виде json, которые с легкостью получаем в переменную после запросов ajax, но никак не могу нагуглить как же получить json для компонента при первой загрузке страницы, например если бекенд на php то echo json_encode() все равно сначала выведет на страницу а потом уже уже подхватится реактом, подскажите, как организовать вывод данных с сервера, чтобы реакт уже знал с какиеми данными ему работать, может быть echo "script var data ={test: 'yes'} /script" или это изварщение? спасибо заранее

Comments

[Александр]

Сделайте свой поток мысли удобочитаемым.

Заголовок действительно должен быть вопросом.

Answer 1

[Kirill Mager]

Для этого в React есть хук useEffect (https://ru.reactjs.org/docs/hooks-effect.html)

Чтобы получить JSON при первой загрузке страницы нужно импортировать хук useEffect. У этого хука (хук = функция) есть 2 обязательных параметра - первый это функция (callback) и второй массив зависимостей (если его оставить пустым, хук сработает всего один раз, как Вам и требуется в задании).

Предлагаю пример кода ниже:
С помощью fetch делаем get запрос за данными, сервер вернет данные и после мы из них получаем json с помощью соответствуюего метода и затем выводим в консоль

import React, { useEffect } from 'react';

const Page = () => {
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(json => console.log(json))
  }, []);

export default Page;

Comments

[pavel pavlov]

да, спасибо) это я читал, получается страница загружется и делается запрос ajax? просто у меня бекенд на php и думал что делать аякс после загрузки страницы это плохо

[Kirill Mager]

Нет, это не плохо, а правильно.

Идельно когда так:
1 шаг - реакт рисует компонент без Ваших данных. То есть useEffect отправил запрос за данным и ждет и и иы показываем пользователю заглушку (например вместо данных надпись "загрузка данных с сервера" или анимация загрузки
2 шаг - когда данные загружены нужно скрыть наш текст "загрузка данных с сервера" или анимацию загрузки и отрисовать эти данные.

Для этого предлагаю использовать второй хук - useState. (https://ru.reactjs.org/docs/hooks-state.html#whats...).
и по-дефолту в него устанавливаем null, a когда данные с сервера придут - null изменить на эти данные с сервера.

и в условии отображения этих данных с помощью условного рендеринга (https://ru.reactjs.org/docs/conditional-rendering....) по этой перменной (null = это falsy value, а массив с данным уже true) отрисовать данные

import React, { useEffect, useState } from 'react';

const Page = () => {
  const [data, setData] = useState(null) // объявляем переменную data (по умолчанию null) и функцию по изменения переменной data - setData()

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(json => setData(json)) // вот здесь в переменную data установится json, который пришел с сервера
  }, []);

export default Page;

[pavel pavlov]

magerrrr, понял, спасибо))

[Kirill Mager]

pavel pavlov, пожалуйста :)

Answer 2

[Kirill Makarov]

Гугли useEffect, либо если без хуков componentDidMount или как то так)) жизненый цикл компонента в общем