sar*_*ata 5 reactjs eslint react-hooks eslint-plugin-react-hooks
当您调用“内置”钩子之一时,该react-hooks/exhaustive-deps规则足够智能,可以识别出 React 保证某些返回值是不变的。useState这是由和钩子返回的状态更新器和调度器的情况useReducer。
在第一个示例中,调用useCallback不需要将状态设置器列为依赖项:
export const Example1 = () => {
const [date, setDate] = useState(new Date())
const resetDate = useCallback(() => {
setDate(new Date())
}, []) // No need to list any dependency here. No eslint warning.
return (
<>
Date: {date.toISOString()} <button onClick={resetDate}>Reset</button>
</>
)
}
Run Code Online (Sandbox Code Playgroud)
但在第二个示例中,setter 由自定义挂钩返回,这是必需的。
const useDateState = (initialValue: Date) => {
return useState(initialValue)
}
export const Example2 = () => {
const [date, setDate] = useDateState(new Date())
const resetDate = useCallback(() => {
setDate(new Date())
}, []) // ESLint complains: React Hook useCallback has a missing dependency: 'setDate'. Either include it or remove the dependency array.
return (
<>
Date: {date.toISOString()} <button onClick={resetDate}>Reset</button>
</>
)
}
Run Code Online (Sandbox Code Playgroud)
有没有办法告诉 eslint 规则,我的自定义挂钩返回的 setter 不会更改,并且不需要将其列为依赖项?这将有助于删除一些代码。
注意:我已经阅读了React FAQ和StackOverflow 问题,并且我知道添加不会改变的依赖项不会带来性能成本。
但由于内置挂钩可以实现此行为,因此我想知道是否有办法为自定义挂钩提供相同的效果。
| 归档时间: |
|
| 查看次数: |
635 次 |
| 最近记录: |