我想构建一个具有两种状态的应用程序；暂停和活跃。例如，我想禁用所有子/拥有组件的事件，如 onClick、onChange、onKeyDown 等。
我曾想过isActive=false通过它的所有子/拥有的组件提供道具，并检查isActive事件处理程序的属性。如果isActive属性是虚假的，事件处理程序将什么也不做。我可以通过一个简单的辅助函数使这个机制变得更容易。但我担心的是，当我将应用程序状态更改为暂停时，所有子组件都需要重新渲染。
我正在寻找一种绕过所有事件处理程序（不是自定义事件处理程序）而不重新渲染所有组件的方法。
更新：我在 chrome 端观看渲染矩形，它不会重新渲染孩子。但是，如果有更好的反应方式来做到这一点，我想学习它。
解决这个问题的一种方法是使用简单的保护抽象。它是这样工作的：
var sayHi = guard("enabled", function(){
alert("hi");
});
guard.deactivate("enabled");
sayHi(); // nothing happens
guard.activate("enabled");
sayHi(); // shows the alert
将其用于事件处理程序是类似的：
handleChange: guard("something", function(e){
// if 'something' is deactivated, the input won't change
this.setState({value: e.target.value});
})
// or
return <div onClick={guard("something", this.handleClick)}>click me!</div>
这是一个守卫的实现
var guard = function(key, fn){
return function(){
if (guard.flags[key]) {
return fn.apply(this, arguments);
}
};
};
guard.flags = {};
guard.activate = function(key){ guard.flags[key] = true };
guard.deactivate = function(key){ guard.flags[key] = false };
设置pointerEvents='none'在容器 div 的样式中。它会禁用所有的孩子。我从 React Native 知道它，但它似乎也适用于 React.js。