Блог

Главная - Вопросы по программированию - обновить значение с помощью innerHTML

обновить значение с помощью innerHTML

#javascript #html #reactjs

#javascript #HTML #reactjs

Вопрос:

Я создал приложение counter, которое представляет собой две кнопки для увеличения и уменьшения числа и поля для отображения числа, я создал двумя способами, сначала с помощью html и js и добавить прослушиватель событий для обновления значения с помощью innerHTML, второй с помощью react. ванильный javascritp-код :

 <!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <h1>Counter App</h1>
      <h6>Result</h6>
      <div class="result" id="number">0</div>
      <button class="btn" id="incr"> </button>
      <button class="btn" id="decr">-</button>
    </div>
  </body>
  <script>
    const incr = document.querySelector('#incr');
    const decr = document.querySelector('#decr');
    const result = document.querySelector('#number');
    let number = 0;
    incr.addEventListener('click', () => {
      number = number   1;
      result.innerHTML = number;
    });
    decr.addEventListener('click', () => {
      number = number - 1;
      result.innerHTML = number;
    });
  </script>
</html>

И здесь тот же код с реактом :

 import React, { useState } from 'react';
import ReactDom from 'react-dom';
import './index.css';
import Result from './components/Result';

function Button({ number, increment }) {
  return (
    <button className='btn' onClick={() => increment(number)}>
       
    </button>
  );
}


function BtnContainer({ increment, decrement, number, restHandler }) {
  return (
    <div className='btn-container'>
      <Button number={number} increment={increment} />
      <button className='btn' onClick={() => decrement(number)}>
        -
      </button>
      <button onClick={() => restHandler(number)}>Rest</button>
    </div>
  );
}

function App() {
  const [number, setNumber] = useState(0);

  function increment(n) {
    setNumber(n   1);
  }

  function decrement(n) {
    if (n <= 0) return;
    setNumber(n - 1);
  }

  function restHandler(n) {
    setNumber(0);
  }
  return (
    <div className='container'>
      <h1>Counter App</h1>
      <h6>Result</h6>
      {/* Props */}
      <Result result={number} />
      <BtnContainer
        increment={increment}
        decrement={decrement}
        number={number}
        restHandler={restHandler}
      />
    </div>
  );
}
ReactDom.render(<App />, document.getElementById('root'));

Итак, мне интересно, в чем разница? и что не так при обновлении значения с помощью innerHTML?
заранее спасибо.

Комментарии:

1. Оба кода работают нормально. В чем именно проблема?

2. нет проблем, я просто спрашиваю, в чем преимущество одностороннего потока данных в react?

3. Инструмент должен соответствовать задаче. Тот факт, что вам не нужно программное обеспечение для машинного обучения, чтобы суммировать 2 и 2, не обязательно означает, что одно бесполезно. Если у вас будет много элементов, подобных тому, который вы реализовали выше, на разных страницах вашего приложения, не хотели бы вы использовать его в качестве повторно используемого компонента и попытаться извлечь выгоду из виртуального DOM или вы бы предпочли копировать-вставлять это вручную повсюду?

4. @abdulrahmanAbdullah Суть в том, чтобы иметь единый источник истины для ваших состояний без ненужных мутаций.