ReactJS 重新渲染不适用于 CSS

Question

I wonder what is the reason behind of ReactJS does not force to reapply CSS to child component event if componentDidUpdate() is called. I did little demo and adding new box does not change color for existing boxes although numbers are changed.

Adding Boxes Demo

And how can I force to update it.

Thanks

Answer 1

The core principle behind ReactJS is that only changed objects in the DOM are updated. This modularity gives you all kinds of speed, simplicity and abstractness advantages - even if your site contains thousands of components.

In your example, you add a new box to the DOM and none of the other boxes are changed, ReactJS checks this automatically on every render() .

So the answer to your question is relatively simple: if you want to other boxes to be rerendered, you need to somehow change them. Otherwise ReactJS will not understand that the other boxes need to be rerendered. The simplest way to achieve this is to use the key property, see the documentation :

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity:

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

Now if you change the keys when you add a new item to the DOM, the objects will be rerendered because by changing the key ReactJS understands that that object needs to be rerendered. You can also change other attributes to rerender the object, but changing the key is the most direct way.

Additionally, you could also call forceUpdate() , see the documentation , but you'll still need to change the markup:

By default, when your component's state or props change, your component will re-render. If your render() method depends on some other data, you can tell React that the component needs re-rendering by calling forceUpdate().

Calling forceUpdate() will cause render() to be called on the component, skipping shouldComponentUpdate(). This will trigger the normal lifecycle methods for child components, including the shouldComponentUpdate() method of each child. React will still only update the DOM if the markup changes .

Normally you should try to avoid all uses of forceUpdate() and only read from this.props and this.state in render().

Answer 2

I made a fork of your project to show you how you can use the key property to force rerendering of elements

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;
}

I use the makeId function to create a random new key every I render. This is probably NOT the best way to do it for most use cases, this is just illustrative

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