- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我写了一个 UI 元素作为函数组件,它使用 React 的 userReducer
钩子(Hook),它似乎运行没有错误。
useReducer
引用我写的一个函数(想象中称为 reducer
):
const [state, dispatch] = React.useReducer(reducer, inputData,
(inputData) => initialState(inputData));
有state
由reducer函数输入和输出的数据;并且有依赖于 state
的“托管”UI 元素, 像...
return (
<div>
<div>
{state.elements.map(getElement)}
</div>
<ShowHints hints={state.hints} inputValue={state.inputValue} />
</div>
);
...这是正常的。
我担心的是 reducer
功能不纯。
副作用是有一个 <input>
状态由以下之一控制的元素:
const inputRef = React.createRef<HTMLInputElement>();
<input>
控制只是半管理的,像这样:
<input type="text" ref={inputRef} onKeyDown={handleKeyDown} onChange={handleChange}
onKeyDown
和 onChange
事件是发送给 reducer 的 Action (这很好)但是 reducer 被传递给了 HTMLInputElement
实例(即 inputRef.current
值)作为输入参数,reducer 设置该 HTMLInputElement
的属性改变它的状态——而不是 <input>
作为一个完全托管的组件,其内容由 reducer 输出的状态定义。
<input>
的原因element isn't fully-managed 是我需要控制 start
内的选择范围(即 end
和 <input>
)而不仅仅是它的文本值。
问题:
inputRef.current
属性)并返回新的 state
值(value)start
和 end
<input type="text">
的属性元素,例如一种定义 <input>
的方法元素使得它的 start
和 end
值由他控制 state
由 reducer 返回?(我认为 @Fyodor's answer below 回答了第二个问题,我仍然不确定第一个问题)。
什么决定了要在 HTML 元素上设置的值?使用信息是否传入或包含逻辑?
组件的设计和源代码是shown here ,而且很长。
这是一个复杂的“组件”,使用多个元素实现——两个 <div>
s,几个<span>
s,一些可点击的 <svg>
s 和 <input>
元素。
reducer 是给定的,作为它的输入参数:
<input>
实例(它可以从中读取 <input>
的当前状态)几个事件处理程序或操作中的两个是 onKeyDown
和 onChange
<input>
的事件所以 <input>
的当前状态当有一个事件改变了 <input>
的状态时,它被传递给 reducer .
最佳答案
从技术上讲,reducer 可能会产生不同的副作用。我不认为这是一个好的做法,至少是因为关注点分离不好(预计 reducer 只根据 Action 产生新状态,而不是改变其他东西)。 (很抱歉提出我自己的意见,似乎使用了 useReducer
中的副作用,例如 here )。同样在 Redux 中,所有副作用都移到了 action creators。 .
对于您的具体问题,我可能会建议将 inputRef
突变移动到单独的 useEffect
Hook ,这反过来又取决于如下状态
useEffect (() => {
inputRef.currect // do work with inputRef
}, [state]); // make dependent from state
这里是 sample使 useEffect
依赖于 state
您还可以将 useEffect
移动到 custom hook使代码像下面一样可重用(未经测试,用作提示)
function mutateRef (inputRef: React.RefObject<HTMLInputElement>, state: /* type of state */) {
useEffect (() => {
inputRef.currect // do work with inputRef
}, [state, inputRef]);
}
关于reactjs - React reducer 必须是纯函数吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57142137/
C语言sscanf()函数:从字符串中读取指定格式的数据 头文件: ?
最近,我有一个关于工作预评估的问题,即使查询了每个功能的工作原理,我也不知道如何解决。这是一个伪代码。 下面是一个名为foo()的函数,该函数将被传递一个值并返回一个值。如果将以下值传递给foo函数,
CStr 函数 返回表达式,该表达式已被转换为 String 子类型的 Variant。 CStr(expression) expression 参数是任意有效的表达式。 说明 通常,可以
CSng 函数 返回表达式,该表达式已被转换为 Single 子类型的 Variant。 CSng(expression) expression 参数是任意有效的表达式。 说明 通常,可
CreateObject 函数 创建并返回对 Automation 对象的引用。 CreateObject(servername.typename [, location]) 参数 serv
Cos 函数 返回某个角的余弦值。 Cos(number) number 参数可以是任何将某个角表示为弧度的有效数值表达式。 说明 Cos 函数取某个角并返回直角三角形两边的比值。此比值是
CLng 函数 返回表达式,此表达式已被转换为 Long 子类型的 Variant。 CLng(expression) expression 参数是任意有效的表达式。 说明 通常,您可以使
CInt 函数 返回表达式,此表达式已被转换为 Integer 子类型的 Variant。 CInt(expression) expression 参数是任意有效的表达式。 说明 通常,可
Chr 函数 返回与指定的 ANSI 字符代码相对应的字符。 Chr(charcode) charcode 参数是可以标识字符的数字。 说明 从 0 到 31 的数字表示标准的不可打印的
CDbl 函数 返回表达式,此表达式已被转换为 Double 子类型的 Variant。 CDbl(expression) expression 参数是任意有效的表达式。 说明 通常,您可
CDate 函数 返回表达式,此表达式已被转换为 Date 子类型的 Variant。 CDate(date) date 参数是任意有效的日期表达式。 说明 IsDate 函数用于判断 d
CCur 函数 返回表达式,此表达式已被转换为 Currency 子类型的 Variant。 CCur(expression) expression 参数是任意有效的表达式。 说明 通常,
CByte 函数 返回表达式,此表达式已被转换为 Byte 子类型的 Variant。 CByte(expression) expression 参数是任意有效的表达式。 说明 通常,可以
CBool 函数 返回表达式,此表达式已转换为 Boolean 子类型的 Variant。 CBool(expression) expression 是任意有效的表达式。 说明 如果 ex
Atn 函数 返回数值的反正切值。 Atn(number) number 参数可以是任意有效的数值表达式。 说明 Atn 函数计算直角三角形两个边的比值 (number) 并返回对应角的弧
Asc 函数 返回与字符串的第一个字母对应的 ANSI 字符代码。 Asc(string) string 参数是任意有效的字符串表达式。如果 string 参数未包含字符,则将发生运行时错误。
Array 函数 返回包含数组的 Variant。 Array(arglist) arglist 参数是赋给包含在 Variant 中的数组元素的值的列表(用逗号分隔)。如果没有指定此参数,则
Abs 函数 返回数字的绝对值。 Abs(number) number 参数可以是任意有效的数值表达式。如果 number 包含 Null,则返回 Null;如果是未初始化变量,则返回 0。
FormatPercent 函数 返回表达式,此表达式已被格式化为尾随有 % 符号的百分比(乘以 100 )。 FormatPercent(expression[,NumDigitsAfterD
FormatNumber 函数 返回表达式,此表达式已被格式化为数值。 FormatNumber( expression [,NumDigitsAfterDecimal [,Inc
我是一名优秀的程序员,十分优秀!