React Hooks究竟是什么呢?
摘要: React Hooks原理解析。
我们大部分 React 类组件可以保存状态,而函数组件不能? 并且类组件具有生命周期,而函数组件却不能? React 早期版本,类组件可以通过继承 React 16.8 新出来的 类被会替代吗?
我能体会那种总有新东西要学的感觉有多痛苦,不会就感觉咱们总是落后一样。 Go Go来看看Hooks的例子,咱们先从最熟悉的开始:函数组件。 以下 OneTimeButton 是函数组件,所做的事情就是当我们点击的时候调用 import React from 'react'; import { render } from 'react-dom'; function OneTimeButton(props) { return ( <button onClick={props.onClick}> 点我点我 </button> ) } function sayHi() { console.log('yo') } render( <OneTimeButton onClick={sayHi}/>,document.querySelector('#root') ) 我们想让这个组件做的是,跟踪它是否被点击,如果被点击了,禁用按钮,就像一次性开关一样。 但它需要一个state,因为是一个函数,它不可能有状态(React 16.8之前),所以需要重构成类。 函数组件转换为类组件的过程中大概有5个阶段:
class OneTimeButton extends React.Component { state = { clicked: false } handleClick = () => { this.props.onClick(); // Ok,no more clicking. this.setState({ clicked: true }); } render() { return ( <button onClick={this.handleClick} disabled={this.state.clicked} > You Can Only Click Me Once </button> ); } } 这是相当多的代码,组件的结构也发生了很大的变化, 我们需要多个小的功能,就需要改写很多。 使用 Hook 轻松添加 State接下来,使用新的 import React,{ useState } from 'react' function OneTimeButton(props) { const [clicked,setClicked] = useState(false) function doClick() { props.onClick(); setClicked(true) } return ( <button onClick={clicked ? undefined : doClick} disabled={clicked} > 点我点我 </button> ) } 这段代码是如何工作的这段代码的大部分看起来像我们一分钟前写的普通函数组件,除了
类组件有一个大的state对象,一个函数 函数组件根本没有状态,但 由于 现在,你应该有很多疑问,如:
Hooks 的魔力将有状态信息存储在看似无状态的函数组件中,这是一个奇怪的悖论。这是第一个关于钩子的问题,咱们必须弄清楚它们是如何工作的。 原作者得的第一个猜测是某种编译器的在背后操众。搜索代码 然后再听说了调用顺序规则(它们每次必须以相同的顺序调用),这让我更加困惑。这就是它的工作原理。 React第一次渲染函数组件时,它同时会创建一个对象与之共存,该对象是该组件实例的定制对象,而不是全局对象。只要组件存在于DOM中,这个组件的对象就会一直存在。 使用该对象, 请记住,React组件甚至函数组件都从未进行过自渲染。它们不直接返回 React有能力在调用每个组件之前做一些设置,这就是它设置这个状态的时候。 其中做的一件事设置 Hooks 数组。 它开始是空的,每次调用一个 为什么顺序很重要假设咱们有以下这个组件: function AudioPlayer() { const [volume,setVolume] = useState(80); const [position,setPosition] = useState(0); const [isPlaying,setPlaying] = useState(false); ..... } 因为它调用 下次渲染时,同样的 这就是React能够在多个函数调用中创建和维护状态的方式,即使变量本身每次都超出作用域。 多个useState 调用示例让咱们更详细地看看这是如何实现的,第一次渲染:
现在,
就是这样了,知道了原理,看起来也就不那么神奇了, 但它确实依赖于一些规则,所以才有使用 Hooks 规则。 Hooks 的规则自定义 hooks 函数只需要遵守规则 3 :它们的名称必须以“use”为前缀。 例如,我们可以从 function AudioPlayer() { // Extract these 3 pieces of state: const [volume,setPlaying] = useState(false); // < beautiful audio player goes here > } 因此,咱们可以创建一个专门处理这些状态的新函数,并使用一些额外的方法返回一个对象,以便更容易启动和停止播放,例如: function usePlayerState(lengthOfClip) { const [volume,setPlaying] = useState(false); const stop = () => { setPlaying(false); setPosition(0); } const start = () => { setPlaying(true); } return { volume,position,isPlaying,setVolume,setPosition,start,stop }; } 像这样提取状态的一个好处是可以将相关的逻辑和行为组合在一起。可以提取一组状态和相关事件处理程序以及其他更新逻辑,这不仅可以清理组件代码,还可以使这些逻辑和行为可重用。 另外,通过在自定义 总结Hooks 提供了一种新的方式来处理React中的问题,其中的思想是很有意思且新奇的。 React团队整合了一组很棒的文档和一个常见问题解答,从是否需要重写所有的类组件到钩Hooks是否因为在渲染中创建函数而变慢? 以及两者之间的所有东西,所以一定要看看。 代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。 原文:https://daveceddia.com/intro-to-hooks/ 关于FundebugFundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了20亿+错误事件,付费客户有阳光保险、核桃编程、荔枝FM、掌门1对1、微脉、青团社等众多品牌企业。欢迎大家免费试用! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |