时间戳

首页 > 解决方案 > ReactJS 重新渲染不适用于 CSS

javascript - ReactJS 重新渲染不适用于 CSS

问题描述

我想知道如果被调用，ReactJS 不会强制将 CSS 重新应用于子组件事件的原因是什么 componentDidUpdate()。我做了一点演示，添加新盒子不会改变现有盒子的颜色，尽管数字会改变。

添加盒子演示

以及如何强制更新它。

谢谢

标签： javascriptcssreactjs

解决方案

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 添加新项目时更改键，则将重新呈现对象，因为通过更改keyReactJS 了解该对象需要重新呈现。您还可以更改其他属性以重新渲染对象，但更改key是最直接的方法。

此外，您也可以调用forceUpdate()，查看文档，但您仍然需要更改标记：

默认情况下，当您的组件的状态或道具发生变化时，您的组件将重新渲染。如果你的 render() 方法依赖于其他数据，你可以通过调用 forceUpdate() 告诉 React 组件需要重新渲染。

调用 forceUpdate() 将导致在组件上调用 render()，跳过 shouldComponentUpdate()。这将触发子组件的正常生命周期方法，包括每个子组件的 shouldComponentUpdate() 方法。如果标记发生变化，React 仍然只会更新 DOM。

通常你应该尽量避免使用 forceUpdate() 并且只在 render() 中读取 this.props 和 this.state。

推荐阅读