ReactJS повторная визуализация не применяется к CSS

Question

Интересно, в чем причина ReactJS не заставляет повторно применять CSS к событию дочернего компонента, если вызывается componentDidUpdate(). Я сделал небольшую демонстрацию, и добавление нового ящика не меняет цвет для существующих ящиков, хотя номера меняются.

Демонстрация добавления ящиков

И как я могу заставить его обновить.

Спасибо

Answer 1

Основной принцип ReactJS заключается в том, что только измененные объекты в DOM обновляются. Эта модульность дает вам все преимущества скорости, простоты и абстрактности - даже если ваш сайт содержит тысячи компонентов.

В вашем примере вы добавляете новый блок в DOM, и ни один из других блоков не изменяется, ReactJS проверяет это автоматически на каждом render().

Таким образом, ответ на ваш вопрос относительно прост: если вы хотите, чтобы другие ящики были перерисованы, вам нужно как-то изменить их. В противном случае ReactJS не поймет, что другие ячейки необходимо изменить. Самый простой способ добиться этого - использовать свойство key, , см. Документацию :

Клавиши помогают React определить, какие элементы были изменены, добавлены или удалены. Необходимо дать ключи элементам в массиве, чтобы дать элементам устойчивую идентичность:

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

Теперь, если вы измените ключи при добавлении нового элемента в DOM, объекты будут переопределяется, потому что при изменении key ReactJS понимает, что этот объект необходимо перерисовать. Вы также можете изменить другие атрибуты для повторного отображения объекта, но изменение key является наиболее прямым способом.

Кроме того, вы также можете вызвать forceUpdate(), , см. Документацию , но вам все равно нужно изменить разметку:

По умолчанию, когда состояние вашего компонента или реквизит изменяются, ваш компонент будет повторно визуализироваться. Если ваш метод render () зависит от некоторых других данных, вы можете указать React, что компонент нуждается в повторном рендеринге, вызвав forceUpdate ().

Вызов forceUpdate () вызовет render () для компонента , пропуская shouldComponentUpdate (). Это вызовет обычные методы жизненного цикла для дочерних компонентов, включая метод shouldComponentUpdate () каждого дочернего компонента. React все равно будет обновлять DOM, только если разметка изменится .

Обычно вы должны стараться избегать любого использования forceUpdate () и читать только из this.props и this.state в render ( ).

Answer 2

Я сделал развилку вашего проекта, чтобы показать вам, как вы можете использовать свойство key для принудительной перерисовки элементов

class App extends React.Component {
  state = {
    data: [1, 2, 3]
  };

  handler = () => {
    this.setState({ data: this.state.data.concat(this.state.data.length + 1) });
  };

  render() {
    return (
      <div>
        <button onClick={this.handler}>Add</button>
        {this.state.data.map(box => {
          return (
            <Box
              key={makeid(5)}
              click={this.handler}
              val={Math.floor(Math.random() * 10) + 1}
            />
          );
        })}
      </div>
    );
  }
}

function makeid(length) {
  var result = "";
  var characters =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  var charactersLength = characters.length;
  for (var i = 0; i < length; i++) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength));
  }
  return result;
}

Я использую функцию makeId для создания случайного нового ключа при каждом рендеринге , Это, вероятно, НЕ лучший способ сделать это для большинства случаев использования, это просто иллюстративно

https://codesandbox.io/s/angry-wu-8h6km