大家好，我卡颂。
稍微深入了解过useState的同学都知道 —— useState其实是预置了reducer的useReducer。具体来讲，他预置的reducer实现如下：
function basicStateReducer(state, action) {
// $FlowFixMe: Flow doesn't like mixed types
return typeof action === 'function' ? action(state) : action;
}那按理来说，useState与useReducer性能应该完全一致才对。但实际上，他们的性能并不一样。本文就来聊聊他们的细微差别。
在v18之前，特定场景下，useReducer存在一个严重的bug。假设我们要挂载如下App组件：
bug复现地址[1]
function App() {
const [disabled, setDisabled] = React.useState(false);
return (
<>
<button onClick={() => setDisabled((prev) => !prev)}>Disable</button>
<div>{`Disabled? ${disabled}`}</div>
<CounterReducer disabled={disabled} />
</>
);
}通过点击按钮，可以切换disabled状态，并将disabled作为props传递给CounterReducer组件。
CounterReducer组件的实现如下：
function CounterReducer({ disabled }) {
const [count, dispatch] = useReducer((state) => {
if (disabled) {
return state;
}
return state + 1;
}, 0);
return (
<>
<button onClick={dispatch}>reducer + 1</button>
<div>{`Count ${count}`}</div>
</>
);
}count状态初始为0，当disabled props为true时，点击「reducer + 1按钮」后count不会变化。
disabled为true时，多次点击后count仍显示0
当disabled props为false时，点击「reducer + 1按钮」后count会加1。
disabled为false时，点击后count加1
现在问题来了，当disabled props为true时（此时count为0），我们点击「reducer + 1按钮」5次，然后再点击「Disable按钮」（disabled props会变为false），此时count为多少呢？
按照代码逻辑，改变disabled对count不会造成影响，所以他应该保持原始状态不变（即为0）。
但在v18之前，他会变成5。
但是，如果我们用useState实现同样逻辑的useReducer：
function CounterState({ disabled }) {
const [count, dispatch] = useState(0);
function dispatchAction() {
dispatch((state) => {
if (disabled) {
return state;
}
return state + 1;
});
}
return (
<>
<button onClick={dispatchAction}>state + 1</button>
<div>{`Count ${count}`}</div>
</>
);
}就能取得符合预期的效果。
所以说，useReducer的实现在特殊场景下是有bug的（v18之前）。
产生这个bug的原因在于React内部的一种被称为eager state的性能优化策略。
简单的说，对于类似如下这样的，即使多次触发更新，但状态的最终结果不变的情况（在如下例子中count始终为0）：
function App() {
const [count, dispatch] = useState(0);
return <button onClick={() => dispatch(0)}>点击</button>;
}App组件是没有必要render的。这就省去了render的性能开销。
要命中eager state，有个严格的前提 —— 状态更新前后不变。
我们知道，React中有两种更新状态的方式：
// 定义状态
const [count, dispatch] = useState(0);
// 更新状态
dispatch(100)// 定义状态
const [count, dispatch] = useState(0);
// 更新状态
dispatch(oldState => oldState + 100)那么，对于方式1，要保证状态不变很简单，只需要全等比较变化前后的状态，如果他们一致就能进入eager state策略。
对于方式2，就略微复杂点，需要同时满足2个条件：
比如，下述代码就同时满足2个条件，但如果将change放到App内就不满足条件1（App组件每次render时都会创建新的change函数）：
// 状态更新函数本身不变
function change(oldState) {
// 新状态也不变
return oldState;
}
function App() {
const [count, dispatch] = useState(0);
// 状态更新函数每次render都会变化
// function change(oldState) {
// 新状态不变
// return oldState;
// }
return <button onClick={() => dispatch(change)}>点击</button>;
}类似的情况，在useState的实现中，虽然他是预置了reducer的useReducer，但他预置的reducer的引用是不变的，所以用他实现的文章开篇的例子可以命中优化策略。
useReducer在特定场景下的bug就与此相关。并不是说bug产生的原因是useReducer一定没命中优化策略，而是说相比于useState，他命中优化策略很不稳定。
既然bug来源于不稳定的性能优化策略，在没有完美的解决方案之前，React是如何在v18中修复这个bug的呢？
答案是 —— 移除useReducer的eager state策略。也就是说，在任何情况下，useReducer都不再有useState存在的这个性能优化策略了。
这就导致在特定场景下，useReducer的性能弱于useState。
比如在这个v18在线示例[2]中，同样的逻辑用useState实现，不会有冗余的render，而useReducer会有。
在考虑性能优化时，如果useState与useReducer都能满足需要，或许useState是更好的选择。
[1]bug复现地址:https://codesandbox.io/s/vigorous-dhawan-mqv463。
[2]v18在线示例:https://codesandbox.io/s/blazing-cdn-pzcpz6?file=/src/App.js:509-519。
请帮助我理解范围运算符...和..之间的区别，作为Ruby中使用的“触发器”。这是PragmaticProgrammersguidetoRuby中的一个示例:a=(11..20).collect{|i|(i%4==0)..(i%3==0)?i:nil}返回:[nil,12,nil,nil,nil,16,17,18,nil,20]还有:a=(11..20).collect{|i|(i%4==0)...(i%3==0)?i:nil}返回:[nil,12,13,14,15,16,17,18,nil,20] 最佳答案 触发器(又名f/f)是
我正在检查一个Rails项目。在ERubyHTML模板页面上，我看到了这样几行:我不明白为什么不这样写:在这种情况下，||=和ifnil?有什么区别？ 最佳答案 在这种特殊情况下没有区别，但可能是出于习惯。每当我看到nil?被使用时，它几乎总是使用不当。在Ruby中，很少有东西在逻辑上是假的，只有文字false和nil是。这意味着像if(!x.nil?)这样的代码几乎总是更好地表示为if(x)除非期望x可能是文字false。我会将其切换为||=false，因为它具有相同的结果，但这在很大程度上取决于偏好。唯一的缺点是赋值会在每次运行
我正在阅读一本关于Ruby的书，作者在编写类初始化定义时使用的形式与他在本书前几节中使用的形式略有不同。它看起来像这样:classTicketattr_accessor:venue,:datedefinitialize(venue,date)self.venue=venueself.date=dateendend在本书的前几节中，它的定义如下:classTicketattr_accessor:venue,:datedefinitialize(venue,date)@venue=venue@date=dateendend在第一个示例中使用setter方法与在第二个示例中使用实例变量之间是
转自:spring.profiles.active和spring.profiles.include的使用及区别说明下文笔者讲述spring.profiles.active和spring.profiles.include的区别简介说明,如下所示我们都知道，在日常开发中,开发|测试|生产环境都拥有不同的配置信息如：jdbc地址、ip、端口等此时为了避免每次都修改全部信息，我们则可以采用以上的属性处理此类异常spring.profiles.active属性例：配置文件,可使用以下方式定义application-${profile}.properties开发环境配置文件:application-dev
打印1:defsum(i)i=i+[2]end$x=[1]sum($x)print$x打印12:defsum(i)i.push(2)end$x=[1]sum($x)print$x后者是修改全局变量$x。为什么它在第二个例子中被修改而不是在第一个例子中？类Array的任何方法(不仅是push)都会发生这种情况吗？ 最佳答案 变量范围在这里无关紧要。在第一段代码中，您仅使用赋值运算符=为变量i赋值，而在第二段代码中，您正在修改$x(也称为i)使用破坏性方法push。赋值从不修改任何对象。它只是提供一个名称来引用一个对象。方法要么是破坏性
Ruby中的Fixnum方法.next和.succ有什么区别？看起来它的工作原理是一样的:1.next=>21.succ=>2如果有什么不同，为什么有两种方法做同样的事情？ 最佳答案 它们是等价的。Fixnum#succ只是Fixnum#next的同义词。他们甚至在thereferencemanual中共享同一block. 关于ruby-Ruby中.next和.succ的区别，我们在StackOverflow上找到一个类似的问题： https://stacko
我明白了defa(&block)block.call(self)end和defa()yieldselfend导致相同的结果，如果我假设有这样一个blocka{}。我的问题是-因为我偶然发现了一些这样的代码，它是否有任何区别或者是否有任何优势(如果我不使用变量/引用block):defa(&block)yieldselfend这是一个我不理解&block用法的具体案例:defrule(code,name,&block)@rules=[]if@rules.nil?@rules 最佳答案 我能想到的唯一优点就是自省(introspecti
由于匿名block和散列block看起来大致相同。我正在玩它。我做了一些严肃的观察，如下所示:{}.class#=>Hash好的，这很酷。空block被视为Hash。print{}.class#=>NilClassputs{}.class#=>NilClass为什么上面的代码和NilClass一样，下面的代码又显示了Hash？puts({}.class)#Hash#=>nilprint({}.class)#Hash=>nil谁能帮我理解上面发生了什么？我完全不同意@Lindydancer的观点你如何解释下面几行:print{}.class#NilClassprint[].class#A
在Ruby中，我试图理解to_enum和enum_for方法。在我提出问题之前，我提供了一些示例代码和两个示例来帮助理解上下文。示例代码:#replicatesgroup_bymethodonArrayclassclassArraydefgroup_by2(&input_block)returnself.enum_for(:group_by2)unlessblock_given?hash=Hash.new{|h,k|h[k]=[]}self.each{|e|hash[input_block.call(e)]示例#1:irb(main)>puts[1,2,3].group_by2.ins
关于SSHkit-Github它说:Allbackendssupporttheexecute(*args),test(*args)&capture(*args)来自SSHkit-Rubydoc,我明白execute实际上是test的别名？test之间有什么区别？,execute,capture在Capistrano/SSHKit中我应该什么时候使用？ 最佳答案 执行只是执行命令。使用非0退出引发错误。测试方法的行为与execute完全相同，但是它返回bool值(true如果命令以0退出，而false否则)。它通常用于控制任务中的流程