Обновление отрисованного элемента в React: Руководство с Примерами

Использование состояний (state)

import React, { useState } from 'react';

const MyComponent = () => {
  const [counter, setCounter] = useState(0);

  const incrementCounter = () => {
    setCounter(counter + 1);
  };

  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={incrementCounter}>Increment</button>
    </div>
  );
};

export default MyComponent;

В приведенном выше примере MyComponent содержит состояние counter, которое изменяется при нажатии на кнопку. Функция setCounter обновляет состояние, и React автоматически перерисовывает компонент, отображая новое значение counter.

Использование свойств (props)

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

const MyComponent = (props) => {
  const [data, setData] = useState([]);

  useEffect(() => {
    // Логика загрузки данных с использованием props.someData
    setData(/* Новые данные */);
  }, [props.someData]);

  return (
    <div>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default MyComponent;

В этом примере MyComponent использует свойство someData. Когда someData изменяется, компонент обновляет свое состояние и перерисовывается с новыми данными.

Оба примера демонстрируют принципы обновления

Комментарии

Коментарии отсутствуют, будьте первым(ой) кто напишет под этим постом!

Написать коментарий