Hooks:尽享React特性 ,重塑开发体验

这篇具有很好参考价值的文章主要介绍了Hooks:尽享React特性 ,重塑开发体验。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

🎼 React 16.8 版本引入了 Hooks ,可以在不使用 Class 的情况下使用 React 特性。

Hooks 允许从函数组件 “hook into” React 状态和生命周期特性。

function Counter () {
  const [count, setCount] = useState(0);
  
  return (<>
  	<p>{count}</p>
    <button onClick={() => setCount(count + 1)}> +1 </button>
  </>)
}

为什么引入 Hooks ?

一个新的方案引入,一定是为了解决现存的问题。对于 Hooks 来说,就是为解决 Class 的诟病。

  • 组件之间复用状态逻辑异常困难,存在“回调地狱”的风险 ==> render props 和 Hoc 高阶组件都需要重新构造组件。
  • 复杂的组件难以理解及维护(状态逻辑及副作用堆积)==> 常见的,每个生命周期方法中包含了一组不相关的逻辑。
  • 基于 Class 的组件,比较难以理解,且不能很好的控制范围,对于热更新不友好,优化路径不佳。

因此,引入了 Hooks:

  • 使用 Hooks 可以从组件中提取有状态逻辑,这样就可以独立地对其进行测试并复用。其允许在不改变组件层次结构的情况下复用有状态逻辑。这样可以很容易在许多组件之间或与社区共享 Hook。
  • 使用 Hooks 可以将一个组件拆分为更小的函数,而不是强制基于生命周期方法进行拆分。也可以选择使用 reduce 来管理组件的本地状态,以使其更可预测。
  • Hooks 允许在不使用类的情况下更多地使用 React 的特性。从概念上讲,React 组件总是更接近于函数,不需要学习复杂的功能或响应式编程技术。

Hooks 是否可以完全取代 render props 和 Hoc 组件?1

答:不能,例如虚拟滚动组件需要具有 renderItem prop,以及可视化容器组件可能具有自己的DOM结构。

✔️ Hooks 让我们根据代码所做的,而不是生命周期方法名称来分割代码。React 组件一直更像是函数,而 Hooks 则拥抱了函数。

Hooks 使用规则(调用位置有限制)

✅ 在函数组件的顶层调用 Hooks
✅ 在 React 的函数组件或自定义Hooks中调用 Hook

下述以 useState(React 内置钩子) 为例:

// ✅ 在函数组件的顶层调用
function Counter () {
  const [count, setCount] = useState(0);
}

// ✅ 在自定义Hooks的顶层调用
function useWindowWidth () {
  const [width, setWidth] = useState(window.innerWidth);
}

不要在循环、条件、嵌套函数 或 try/catch/finally 块中调用。这样可以做到各个 Hook 在每一次渲染中,调用的顺序是一致的。

const [count, setCount] = useState(0);

数组结构语法允许我们为状态变量赋予不同的名称。这些名称不是 useState API 的一部分。

替代生命周期

  • constructor: 函数组件不需要 constructor,可以通过 useState 初始化(如果数据复杂,可以传入函数);
  • getDerivedStateFromProps:渲染过程更新
  • shouldComponentUpdate:使用 React.memo
  • componentDidMount, componentDidUpdate, componentWillUnmount:Effect Hooks 可以替代

示例:Class 形式:

class FriendStatusWithCounter extends React.Component {
  constructor(props) {
    super(props);
  }
  
  // 初始化:订阅
  componentDidMount() {
    ChatAPI.subscribeToFriendStatus(...);
  }

  // DOM更新:先取消再重新订阅
  componentDidUpdate(prevProps) {
    ChatAPI.unsubscribeFromFriendStatus(...);
    ChatAPI.subscribeToFriendStatus(...);
  }

  // 卸载:取消订阅
  componentWillUnmount() {
    ChatAPI.unsubscribeFromFriendStatus(...);
  }
}

Hooks 形式:

function FriendStatus(props) {
  useEffect(() => {
    // 订阅
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      // 取消
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    }
	})
}

如何获取 previous props 或 state ?

useEffect(() => {
  ChatAPI.subscribeToFriendStatus(props.friend.id);
  return () => ChatAPI.unsubscribeFromFriendStatus(props.friend.id);
}, [props.userId]);

在上面的示例中,如果 Id 从 3 => 4,ChatAPI.unsubscribeFromFriendStatus(3) 将首先运行,然后 ChatAPI.subscribeToFriendStatus(4) 将运行。不需要获取 “previous Id”,因为 clean up 函数将在闭包中捕获它。

➰或者可以将以前的 state 或 props 存储。

function ScrollView({row}) {
  const [isScrollingDown, setIsScrollingDown] = useState(false);
  // 存储之前值
  const [prevRow, setPrevRow] = useState(null);

  if (row !== prevRow) {
    // 自上次渲染后更改
    setIsScrollingDown(prevRow !== null && row > prevRow);
    setPrevRow(row);
  }

  return `Scrolling down: ${isScrollingDown}`;
}

内置 Hooks

State Hook2

可以用于记住用户输入的信息。

  • 使用 useState 声明可以直接更新的状态变量。
  • 使用 useReducer 在 reducer 函数 中声明带有更新逻辑的 state 变量。
Context Hook

从祖先组件接收信息,而无需将其作为 props 传递。

  • 使用 useContext 读取订阅上下文。
// ① 创建context
const ThemeContext = createContext(null);

export default () => {
    const [color, setColor] = useState('red');
    return (<>
        {/* ② 使用 context provider 进行包裹 */}    
        <ThemeContext.Provider value={color}>
            <MyText />
        </ThemeContext.Provider>
    </>)
}

function MyText() {
  	// ③ 使用
    const color = useContext(ThemeContext);
    return (<>
        <div>{color}</div>
    </>)
}
Ref Hook 3

保存一些不用于渲染的信息,比如 DOM 节点或 timeout ID。

  • 使用 useRef 声明 ref。你可以在其中保存任何值,但最常用于保存 DOM 节点。
  • 使用 useImperativeHandle 自定义从组件中暴露的 ref,但是很少使用。
Effect Hook 4

连接到外部系统并与之同步。这包括处理网络、浏览器、DOM、动画、使用不同 UI 库编写的小部件以及其他非 React 代码。

  • 使用 useEffect 将组件连接到外部系统。
  • useLayoutEffect 在浏览器重新绘制屏幕前执行,可以在此处测量布局。
  • useInsertionEffect 在 React 对 DOM 进行更改之前触发,库可以在此处插入动态 CSS。
性能 Hook

优化重新渲染性能的一种常见方法是跳过不必要的工作。例如,可以告诉 React 重用缓存的计算结果,或者如果数据自上次渲染以来没有更改,则跳过重新渲染:

  • 使用 useMemo 缓存计算代价昂贵的计算结果。
  • 使用 useCallback 将函数传递给优化组件之前缓存函数定义。

将必须同步的阻塞更新(比如使用输入法输入内容)与不需要阻塞用户界面的非阻塞更新(比如更新图表)分离以提高性能:

  • useTransition 允许将状态转换标记为非阻塞,并允许其他更新中断它。
  • useDeferredValue 允许延迟更新 UI 的非关键部分,以让其他部分先更新。
其他 Hook
  • 使用 useDebugValue 自定义 React 开发者工具为自定义 Hook 添加的标签。
  • 使用 useId 将唯一的 ID 与组件相关联,其通常与可访问性 API 一起使用。
  • 使用 useSyncExternalStore 订阅外部 store。

  1. https://legacy.reactjs.org/docs/hooks-faq.html#which-versions-of-react-include-hooks react hook FAQ ↩︎

  2. https://blog.csdn.net/ligang2585116/article/details/136458885 总结:React 中的 state 状态 ↩︎

  3. https://blog.csdn.net/ligang2585116/article/details/136626405 脱围:使用 ref 保存值及操作DOM ↩︎

  4. https://blog.csdn.net/ligang2585116/article/details/136880009?spm=1001.2014.3001.5501 Effect:由渲染本身引起的副作用 ↩︎文章来源地址https://www.toymoban.com/news/detail-847913.html

到了这里,关于Hooks:尽享React特性 ,重塑开发体验的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【前端知识】React 基础巩固(四十四)——其他Hooks(useContext、useReducer、useCallback)

    在类组件开发时,我们通过 类名.contextType = MyContext 的方式,在类中获取context,多个Context或者在函数式组件中通过 MyContext.Consumer 方式共享context: 可以看到,当我们需要使用多个Context时,存在大量繁琐的嵌套代码;而Context Hook能够让我们通过Hook直接获取某个Context的值,如

    2024年02月14日
    浏览(47)
  • ahooks.js:一款强大的React Hooks库及其API使用教程(一)

    ahooks是一款由阿里巴巴开发团队设计的React Hooks库,提供了一系列实用的React Hooks,以便开发者更好地使用React的功能。ahooks的设计原则是“最小API,最大自由”,旨在提供最小的、最易于理解和使用的API,同时保留最大的使用自由度。 使用npm或yarn安装ahooks: 1. useRequest useR

    2024年02月12日
    浏览(33)
  • ahooks.js:一款强大的React Hooks库及其API使用教程(四)

    ahooks是一款由阿里巴巴开发团队设计的React Hooks库,提供了一系列实用的React Hooks,以便开发者更好地使用React的功能。ahooks的设计原则是“最小API,最大自由”,旨在提供最小的、最易于理解和使用的API,同时保留最大的使用自由度。 使用npm或yarn安装ahooks: API介绍合集:

    2024年02月11日
    浏览(36)
  • ahooks.js:一款强大的React Hooks库及其API使用教程(二)

    ahooks是一款由阿里巴巴开发团队设计的React Hooks库,提供了一系列实用的React Hooks,以便开发者更好地使用React的功能。ahooks的设计原则是“最小API,最大自由”,旨在提供最小的、最易于理解和使用的API,同时保留最大的使用自由度。 使用npm或yarn安装ahooks: 前面的API:aho

    2024年02月12日
    浏览(31)
  • 前端基本功 用 React Hooks + Antd 实现一个 Todo-List

    To-do list(待办事项列表)是用来记录和管理要完成的任务、活动或项目的列表。它是一种简单而常见的工具,用于帮助人们组织和安排日常生活中的任务。每当您有一项任务需要完成或者要记住某些事情时,您可以将它添加到待办事项列表中。 学习前端的一些新知识时,经

    2024年02月17日
    浏览(37)
  • 【《React Hooks实战》——指导你使用hook开发性能优秀可复用性高的React组件】

    使用React Hooks后,你很快就会发现,代码变得更具有组织性且更易于维护。React Hooks是旨在为用户提供跨组件的重用功能和共享功能的JavaScript函数。利用React Hooks, 可以将组件分成多个函数、管理状态和副作用,并且不必声明类即可调用React内置的功能。而且,上述所有的操作

    2024年02月14日
    浏览(36)
  • 【React】React Hooks解析

    React 16.8 + 为什么需要Hook? Hook是 React 16.8 的新增特性,它可以让我们在不编写class的情况下使用state以及其他的React特性(比如生命周期) 我们先来思考一下class组件相对于函数式组件有什么优势?比较常见的是下面的优势: class组件可以 定义自己的state ,用来 保存组件自己内

    2024年02月11日
    浏览(55)
  • 鸿蒙应用开发,比 React 体验更好

    一直以来,使用 HTML + CSS 来表达 UI 结构,都有一个若隐若现的痛点。痛点来源主要体现在 DOM 结构的 语义表现力 不足。 例如这样一段代码,我们能够很清晰的知道 DOM 结构是怎么样的,但是其具体的布局结构方式和特性就不知道了。 尽管 HTML 也新增了许多语义化标签来弥补

    2024年02月22日
    浏览(46)
  • React Hooks ——性能优化Hooks

    Hooks从语法上来说是一些函数。这些函数可以用于在函数组件中引入状态管理和生命周期方法。 简洁 从语法上来说,写的代码少了 上手非常简单 基于函数式编程理念,只需要掌握一些JavaScript基础知识 与生命周期相关的知识不用学,react Hooks使用全新的理念来管理组件的运作

    2024年02月06日
    浏览(44)
  • React的hooks---自定义hooks

    通过自定义 Hook,可以将组件逻辑提取到可重用的函数中,在 Hook 特性之前,React 中有两种流行的方式来共享组件之间的状态逻辑: render props 和 高阶组件 ,但此类解决方案会导致组件树的层级冗余等问题。而自定义 Hook 的使用可以很好的解决此类问题 自定义 Hook 是一个函数

    2024年02月15日
    浏览(32)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包