React 在 JavaScript UI 框架中保持领先地位。React 正在进行大量开发,但过去几年最重要的变化是向功能组件的转变。函数式组件的大部分功能都依赖于钩子。最常见的钩子是 useState,但还有更多。
介绍 8 个不太为人所知的有用的 React hooks。
使用Reducer
useState 是一个大家都知道的钩子。这是因为用于状态存储的成员变量是基于类的组件的基本功能,被函数变量取代。useReducer 钩子具有类似的功能,但适用于更复杂的场景,其中状态转换涉及许多元素,并且显式转换对应用程序有利。useReducer 钩子是受 Redux 的 reducer 启发的钩子。可以看作是介于 useState 的简单性和 Redux 等状态管理系统的复杂性之间。
<示例 1> 展示了如何处理 useReducer 钩子
<示例 1> 从输入框中获 台湾电话号码资料 取文本,并让用户单击按钮以全大写或全小写显示该文本。该代码使用 const [state,dispatch] = useReducer(reducer,initialState); 声明一个新的减速器。useReducer 接收一个reducer 函数和initialstate 并返回一个数组。将此数组解构为状态和调度变量。
reducer 本身定义为 const reducer = (state, action) => 并提供两个参数的函数。每当在代码中调用调度函数时,它都会传递一个具有当前状态的操作对象。这里,动作对象有一个类型字段,我们用它来确定如何转换状态。在中等复杂的应用程序中,useReducer 可以帮助管理复杂性,并且还可以使用上下文在应用程序之间共享。如果由于应用程序的复杂性而管理 useState 很困难,则 useReducer 挂钩可以提供帮助。
使用回调useCallback 钩子是一个性能钩子它 采用一个函数并
确保仅返回一个版本并 欧洲邮件 由所有调用者重用。如果您的函数很昂贵并且被循环或子组件重复调用,则可以使用 useCallback 挂钩获得显着的性能提升。这种类型的优化称为记忆函数。在<示例2>中,useCallback用于在列表中的多个项目中使用相同的函数。还有 一个实时的 JSFiddle 示例。