Reactjs 当整个组件的属性发生变化时，对其进行反应 我们考虑下面的样本： import React，{Component}来自'React'； 类扩展组件{ render（）{ log（`Render运行时使用${this.props.paramA}`）； 返回（{this.props.paramA}）； } } 类应用程序扩展组件{ 构造函数（）{ 超级（）； this.state={paramA:'asd'}； } 手变（活动）{ this.setState（{paramA:event.target.value}）； } render（）{ 返回( this.handleChange（e）}/> ); } }

它是如何工作的

如果您注意到，为了更新来自属性的更改，react需要评估“render”方法。这会导致整个组件更新，而不是真正更改的小部分（检查gif，chrome developer tools中的div元素闪烁）：

TL；DR根据react理念，应用程序的编写方式应尽可能多地包含组件。这意味着我们有时必须将属性向下传递几级（其他时间我们可以使用redux），这导致了很多

渲染
方法，每次顶级组件的属性更改时都会进行评估。尽管如此，我经常在现实生活的react应用程序中看到，当用户在输入中键入某些内容时，整个
root
div会闪烁。即使是浏览器“滞后”，我也不太喜欢react在组件只需要更新其一小部分时重新评估所有组件（意味着运行其渲染方法）

问题：
我做错什么了吗？有没有一种方法可以实现react组件，使它们只更新已更改的内容？
听起来您在寻找生命周期挂钩

非常不言自明；如果组件只应在特定的属性/状态更改下重新渲染，则可以在此挂钩中指定这些属性，否则返回false。
在这种情况下，React不是重新渲染整个组件，而是重新渲染组件动态部分的第一个父级。在本例中，
是父项（以及整个组件，因此您是对的），但在这个将
{this.props.paramA}
包裹在段落标记内的小提琴中，
不是直接父项，因此只需重新加载
标记和
就不需要更新


B类扩展了React.Component{
render（）{
log（`Render运行时使用${this.props.paramA}`）；
返回（{this.props.paramA}
）；
}
}
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
this.state={paramA:'asd'}；
}
手变（活动）{
this.setState（{paramA:event.target.value}）；
}
render（）{
返回(
this.handleChange.bind（this）（e）}/>
);
}
};
ReactDOM.render(
,
document.getElementById（'容器'）
);

是的，我知道。首先，我想说的是，人们是懒惰的，我的意思是，你会在工作中喝一杯茶，还是实施一些钩子并在那里加入逻辑，这绝对不会带来任何效果，只会节省一些性能？我想框架应该处理这个问题。其次，在上面的示例中，当组件的属性发生变化时，组件应该始终更新，但它只需要更新
文本
部分，而不是整个div！老实说，我认为你在过度设计，在不存在问题的地方发现问题。React在管理渲染生命周期方面的速度非常快，它会比较props/state中的原语以及缓存渲染方法的结果以优化自身。如果你真的想在应用程序范围内实施一些东西，你可以使用immutable.js让react更快地比较新旧道具，并更频繁地重复使用过去的渲染。但即使这样，也可能是杀伤力过大。我会反驳这一点。检查这一点，我只是按下输入上的
D
键<代码>看起来像材质ui？我以前在他们的库中看到过这个问题，但我认为这是特定于这些组件的结果，而不是广泛的反应。过去，我在他们的库中添加了“我想你误解了chrome开发工具中闪烁的含义”来解决这个问题；这并不一定意味着div正在被销毁和重新创建；在JS控制台中手动修改元素的
innerText
，会产生相同的结果effect@Hamms好吧，这是一个糟糕的例子，我将很快提供另一个带有编辑的例子，但要点保持不变，react确实会更新整个组件（不总是tho，我的意思是循环的一些
if
语句会起作用）.这取决于“更新”的确切含义；React会尝试并确保它只在绝对必要时接触DOM本身。这意味着，是的，大量的
render
调用正在发生，但它们实际上并不像您认为的那样昂贵。请注意，更具选择性的更新的一种非常常见的方法是使用类似于管理您的状态的东西，而不是通过一组中间组件传递更改。这是我正在讨论的另一个示例。我会尽量减少它，并尽快提供一个代码库。