Javascript 未在CSS上应用ReactJS重新渲染_Javascript_Css_Reactjs

Javascript 未在CSS上应用ReactJS重新渲染

javascript css reactjs

Javascript 未在CSS上应用ReactJS重新渲染,javascript,css,reactjs,Javascript,Css,Reactjs,我想知道如果调用componentDidUpdate，ReactJS不强制对子组件事件重新应用CSS的原因是什么。我做了一个小演示，添加新的盒子不会改变现有盒子的颜色，尽管数字会改变我如何才能强制更新它谢谢我为您的项目制作了一个分支，向您展示如何使用key属性强制元素重新排序 class App extends React.Component { state = { data: [1, 2, 3] }; handler = () => { this.set

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

我如何才能强制更新它

谢谢

我为您的项目制作了一个分支，向您展示如何使用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函数在每次渲染时创建一个随机的新关键点。对于大多数用例来说，这可能不是最好的方法，这只是说明性的

我为您的项目做了一个分支，向您展示如何使用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函数在每次渲染时创建一个随机的新关键点。对于大多数用例来说，这可能不是最好的方法，这只是说明性的

ReactJS背后的核心原则是只更新DOM中已更改的对象。这种模块化为您提供了各种各样的速度、简单性和抽象性优势——即使您的站点包含数千个组件

在您的示例中，您向DOM添加了一个新框，而其他框均未更改，ReactJS会在每次渲染时自动对此进行检查

因此，你的问题的答案相对简单：如果你想让其他框重新招标，你需要以某种方式改变它们。否则，ReactJS将无法理解其他框需要重新招标。实现这一点的最简单方法是使用key属性：

键有助于识别哪些项已更改、已添加或已删除远离的。应该为数组中的元素提供键，以便这些元素具有稳定的特性：

现在，如果在向DOM中添加新项时更改键，则对象将重新呈现，因为通过更改键，ReactJS知道该对象需要重新呈现。也可以更改其他属性以重新渲染对象，但更改关键点是最直接的方法

此外，您还可以调用forceUpdate，但仍需要更改标记：

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

调用forceUpdate将导致在组件，跳过shouldComponentUpdate。这将触发子组件的正常生命周期方法，包括每个子级的shouldComponentUpdate方法。反应仍然只是如果标记发生更改，请更新DOM

通常情况下，您应该尽量避免forceUpdate的所有使用，并且仅限于读取渲染中的this.props和this.state

ReactJS背后的核心原则是只更新DOM中已更改的对象。这种模块化为您提供了各种各样的速度、简单性和抽象性优势——即使您的站点包含数千个组件

在您的示例中，您向DOM添加了一个新框，而其他框均未更改，ReactJS会在每次渲染时自动对此进行检查

键有助于识别哪些项已更改、已添加或已删除远离的。应该为数组中的元素提供键，以便这些元素具有稳定的特性：

此外，您还可以调用forceUpdate，但仍需要更改标记：

通常情况下，您应该尽量避免forceUpdate的所有使用，并且仅限于读取渲染中的this.props和this.state

原因是实际的dom元素没有被删除和重新创建，您只是在更改它的内部结构。元素上的css动画不会因为更改了元素的内部文本而重新启动，原因是实际的dom

元素没有被删除和重新创建，您只是在更改它的内部结构。元素上的css动画不会因为您更改了元素的内部文本而重新启动哦，非常感谢，现在一切都清楚了。更新基于对象。是否有任何第三方样式库或预印本用于此目的？事实上，动态CSS变化看起来有点细微的差别。请回答我的回答，如果它回答了你的问题哦，非常感谢，现在一切都清楚了。更新基于对象。是否有任何第三方样式库或预印本用于此目的？实际上，动态CSS变化看起来有点细微的差别。如果回答了你的问题，请考虑接受我的回答。