网站没有做的关键词有排名,wordpress播放器源码,wordpress怎么换log,重庆速代网络科技1. 前言React Hooks 是 React 16.8 引入的新特性#xff0c;允许我们在不使用 Class 的前提下使用 state 和其他特性。React Hooks 要解决的问题是状态共享#xff0c;是继 render-props 和 higher-order components 之后的第三种状态逻辑复用方案#xff0c;不会产生 JSX 嵌… 1. 前言React Hooks 是 React 16.8 引入的新特性允许我们在不使用 Class 的前提下使用 state 和其他特性。React Hooks 要解决的问题是状态共享是继 render-props 和 higher-order components 之后的第三种状态逻辑复用方案不会产生 JSX 嵌套地狱问题。2. 状态逻辑复用一般来说组件是 UI 和逻辑但是逻辑这一层面却很难复用。对用户而言组件就像一个黑盒我们应该拿来即用。但当组件的样式或者结构不满足需求的时候我们只能去重新实现这个组件。在我们开发 React 应用的时候经常会遇到类似下面这种场景你可能会有两个疑问Loading 是否可以复用Loading 该怎么复用这几个例子都指向了同一个问题那就是如何实现组件的逻辑复用2.1 render props将函数作为 props 传给父组件父组件中的状态共享通过参数传给函数实现渲染这就是 render props。使用 render prop 的库有 React Router、Downshift 以及 Formik。以下面这个 Toggle 组件为例子我们一般可以这样用可以看到控制 Modal 组件是否展示的状态被提取到了 Toggle 组件中这个 Toggle 组件还可以拿来多次复用到其他组件里面。那么这个 Toggle 是怎么实现的呢看到实现后你就会理解 render props 的原理关于 render props 的更多内容可以参考 React 中文网的相关章节Render Props2.2 higher-order componentshigher-order components 一般简称 hoc中文翻译为高阶组件。从名字上就可以看出来高阶组件肯定和高阶函数有什么千丝万缕的关系。高阶组件的本质是一个高阶函数它接收一个组件返回一个新的组件。在这个新的组件中的状态共享通过 props 传给原来的组件。以刚刚那个 Toggle 组件为例子高阶组件同样可以被多次复用常常可以配合装饰器一起使用。高阶组件的实现和 render props 也不太一样主要是一个高阶函数。2.3 render props 和高阶组件的弊端不管是 render props 还是高阶组件他们要做的都是实现状态逻辑的复用可这俩是完美的解决方案吗考虑一下如果我们依赖了多个需要复用的状态逻辑的时候该怎么写呢以 render props 为例看看这个代码你有没有一种似曾相识的感觉这一天我们终于想起被“回调地狱”支配的恐惧。不得不再次祭出这张图了。同样地高阶组件也会有这个问题但由于装饰器的简洁性没有 render props 看起来那么可怕。除此之外他们俩还有另一个问题那就是组件嵌套过深之后会给调试带来很大的麻烦。这个是 render props 中组件嵌套在 React 开发者工具中的表现。对于高阶组件来说如果你没有对组件手动设置 name/displayName就会遇到更严重的问题那就是一个个匿名组件嵌套。毕竟上面 render props 的嵌套至少能知道组件名。社区里面也已经有很多解决 render props 嵌套的方案其中 Epitath 提供了一种以 generator 的方法来解决嵌套问题利用 generator 实现了伪同步代码。更多细节可以参考黄子毅的这篇文章精读《Epitath 源码 - renderProps 新用法》2.4 React HooksReact Hooks 则可以完美解决上面的嵌套问题它拥有下面这几个特性。多个状态不会产生嵌套写法还是平铺的允许函数组件使用 state 和部分生命周期更容易将组件的 UI 与状态分离上面是一个结合了 useState 和 useEffect 两个 hook 方法的例子主要是在 resize 事件触发时获取到当前的 window.innerWidth。这个 useWindowWidth 方法可以拿来在多个地方使用。常用的 Hook 方法如下3. useState useRefuseState 是 React Hooks 中很基本的一个 API它的用法主要有这几种useState 接收一个初始值返回一个数组数组里面分别是当前值和修改这个值的方法(类似 state 和 setState)。useState 接收一个函数返回一个数组。setCount 可以接收新值也可以接收一个返回新值的函数。const [ count1, setCount1 ] useState(0);const [ count2, setCount2 ] useState(() 0);setCount1(1); // 修改 state3.1 和 class state 的区别虽然函数组件也有了 state但是 function state 和 class state 还是有一些差异function state 的粒度更细class state 过于无脑。function state 保存的是快照class state 保存的是最新值。引用类型的情况下class state 不需要传入新的引用而 function state 必须保证是个新的引用。3.2 快照(闭包) vs 最新值(引用)在开始前先抛出这么一个问题。在 1s 内频繁点击10次按钮下面代码的执行表现是什么如果是这段代码呢它又会是什么表现如果你能成功答对那么恭喜你你已经掌握了 useState 的用法。在第一个例子中连续点击十次页面上的数字会从0增长到10。而第二个例子中连续点击十次页面上的数字只会从0增长到1。这个是为什么呢其实这主要是引用和闭包的区别。class 组件里面可以通过 this.state 引用到 count所以每次 setTimeout 的时候都能通过引用拿到上一次的最新 count所以点击多少次最后就加了多少。在 function component 里面每次更新都是重新执行当前函数也就是说 setTimeout 里面读取到的 count 是通过闭包获取的而这个 count 实际上只是初始值并不是上次执行完成后的最新值所以最后只加了1次。3.3 快照和引用的转换如果我想让函数组件也是从0加到10那么该怎么来解决呢聪明的你一定会想到如果模仿类组件里面的 this.state我们用一个引用来保存 count 不就好了吗没错这样是可以解决只是这个引用该怎么写呢我在 state 里面设置一个对象好不好就像下面这样const [state, setState] useState({ count: 0 })答案是不行因为即使 state 是个对象但每次更新的时候要传一个新的引用进去这样的引用依然是没有意义。setState({ count: state.count 1})3.3 useRef想要解决这个问题那就涉及到另一个新的 Hook 方法 —— useRef。useRef 是一个对象它拥有一个 current 属性并且不管函数组件执行多少次而 useRef 返回的对象永远都是原来那一个。useRef 有下面这几个特点useRef 是一个只能用于函数组件的方法。useRef 是除字符串 ref、函数 ref、createRef 之外的第四种获取 ref 的方法。useRef 在渲染周期内永远不会变因此可以用来引用某些数据。修改 ref.current 不会引发组件重新渲染。useRef vs createRef两者都是获取 ref 的方式都有一个 current 属性。useRef 只能用于函数组件createRef 可以用在类组件中。useRef 在每次重新渲染后都保持不变而 createRef 每次都会发生变化。3.4 写需求遇到的坑之前在写需求的时候遇到过这样的一个坑。bankId 和 ref 都是从接口获取到的这里很自然就想到在 useCallback 里面指定依赖。但是呢这个 handlerReappear 方法需要在第一次进入页面的时候向 JS Bridge 注册的事件这就导致了一个问题不管后来 handlerReappear 如何变化registerHandler 里面依赖的 callback 都是第一次的这也是闭包导致的问题。当然你可能会说我在 useEffect 里面也指定了依赖不好吗但要注意这是个注册事件意味着每次我都要清除上一次的事件需要调用到 JS Bridge在性能上肯定不是个好办法。最终我选择使用 useRef 来保存 bankId 和 ref这样就可以通过引用来获取到最新的值。3.5 Vue3 Composition API在 vue3 里面提供了新的 Composition API之前知乎有个问题是 React Hooks 是否可以改为用类似 Vue 3 Composition API 的方式实现然后我写了一篇文章利用 Object.defineProperty 简单实现了 Composition API可以参考用 React Hooks 简单实现 Vue3 Composition API当然这个实现还有很多问题也比较简单可以参考工业聚写的完整实现react-use-setup4. useEffectuseEffect 是一个 Effect Hook常用于一些副作用的操作在一定程度上可以充当 componentDidMount、componentDidUpdate、componentWillUnmount 这三个生命周期。useEffect 是非常重要的一个方法可以说是 React Hooks 的灵魂它用法主要有这么几种useEffect 接收两个参数分别是要执行的回调函数、依赖数组。如果依赖数组为空数组那么回调函数会在第一次渲染结束后(componentDidMount)执行返回的函数会在组件卸载时(componentWillUnmount)执行。如果不传依赖数组那么回调函数会在每一次渲染结束后(componentDidMount 和 componentDidUpdate)执行。如果依赖数组不为空数组那么回调函数会在依赖值每次更新渲染结束后(componentDidUpdate)执行这个依赖值一般是 state 或者 props。useEffect 比较重要它主要有这几个作用代替部分生命周期如 componentDidMount、componentDidUpdate、componentWillUnmount。更加 reactive类似 mobx 的 reaction 和 vue 的 watch。从命令式变成声明式不需要再关注应该在哪一步做某些操作只需要关注依赖数据。通过 useEffect 和 useState 可以编写一系列自定义的 Hook。4.1 useEffect vs useLayoutEffectuseLayoutEffect 也是一个 Hook 方法从名字上看和 useEffect 差不多他俩用法也比较像。在90%的场景下我们都会用 useEffect然而在某些场景下却不得不用 useLayoutEffect。useEffect 和 useLayoutEffect 的区别是useEffect 不会 block 浏览器渲染而 useLayoutEffect 会。useEffect 会在浏览器渲染结束后执行useLayoutEffect 则是在 DOM 更新完成后浏览器绘制之前执行。这两句话该怎么来理解呢我们以一个移动的方块为例子在 useEffect 里面会让这个方块往后移动 600px 距离可以看到这个方块在移动过程中会闪一下。但如果换成了 useLayoutEffect 呢会发现方块不会再闪动而是直接出现在了 600px 的位置。原因是 useEffect 是在浏览器绘制之后执行的所以方块一开始就在最左边于是我们看到了方块移动的动画。然而 useLayoutEffect 是在绘制之前执行的会阻塞页面的绘制所以页面会在 useLayoutEffect 里面的代码执行结束后才去继续绘制于是方块就直接出现在了右边。那么这里的代码是怎么实现的呢以 preact 为例useEffect 在 options.commit 阶段执行而 useLayoutEffect 在 options.diffed 阶段执行。然而在实现 useEffect 的时候使用了 requestAnimationFramerequestAnimationFrame 可以控制 useEffect 里面的函数在浏览器重绘结束下次绘制之前执行。5. useMemouseMemo 的用法类似 useEffect常常用于缓存一些复杂计算的结果。useMemo 接收一个函数和依赖数组当数组中依赖项变化的时候这个函数就会执行返回新的值。const sum useMemo(() { // 一系列计算}, [count])举个例子会更加清楚 useMemo 的使用场景我们就以下面这个 DatePicker 组件的计算为例DatePicker 组件每次打开或者切换月份的时候都需要大量的计算来算出当前需要展示哪些日期。然后再将计算后的结果渲染到单元格里面这里可以使用 useMemo 来缓存只有当传入的日期变化时才去计算。6. useCallback和 useMemo 类似只不过 useCallback 是用来缓存函数。6.1 匿名函数导致不必要的渲染在我们编写 React 组件的时候经常会用到事件处理函数很多人都会简单粗暴的传一个箭头函数。class App extends Component { render() { return {}} }}这种箭头函数有个问题那就是在每一次组件重新渲染的时候都会生成一个重复的匿名箭头函数导致传给组件的参数发生了变化对性能造成一定的损耗。在函数组件里面同样会有这个传递新的匿名函数的问题。从下面这个例子来看每次点击 div就会引起 Counter 组件重新渲染。这次更新明显和 Input 组件无关但每次重新渲染之后都会创建新的 onChange 方法。这样相当于传给 Input 的 onChange 参数变化即使 Input 内部做过 shadowEqual 也没有意义了都会跟着重新渲染。原本只想更新 count 值的可 Input 组件 却做了不必要的渲染。这就是体现 useCallback 价值的地方了我们可以用 useCallback 指定依赖项。在无关更新之后通过 useCallback 取的还是上一次缓存起来的函数。因此useCallback 常常配合 React.memo 来一起使用用于进行性能优化。7. useReducer useContext7.1 useReduceruseReducer 和 useState 的用法很相似甚至在 preact 中两者实现都是一样的。useReducer 接收一个 reducer 函数和初始 state返回了 state 和 dispatch 函数常常用于管理一些复杂的状态适合 action 比较多的场景。7.2 useContext在上一节讲解 React16 新特性的时候我们讲过新版 Context API 的用法。新版 Context 常常有一个提供数据的生产者(Provider)和一个消费数据的消费者(Consumer)我们需要通过 Consumer 来以 render props 的形式获取到数据。如果从祖先组件传来了多个 Provider那最终就又陷入了 render props 嵌套地狱。useContext 允许我们以扁平化的形式获取到 Context 数据。即使有多个祖先组件使用多个 Context.Provider 传值我们也可以扁平化获取到每一个 Context 数据。7.3 实现一个简单的 Redux通过 useReducer 和 useContext我们完全可以实现一个小型的 Redux。reducer.jsContext.jsexport const Context createContext(null);App.js8. Custom Hooks对于 react 来说在函数组件中使用 state 固然有一些价值但最有价值的还是可以编写通用 custom hooks 的能力。想像一下一个单纯不依赖 UI 的业务逻辑 hook我们开箱即用。不仅可以在不同的项目中复用甚至还可以跨平台使用react、react native、react vr 等等。编写自定义 hook 也需要以 use 开头这样保证可以配合 eslint 插件使用。在 custom hooks 中也可以调用其他 hook当前的 hook 也可以被其他 hook 或者组件调用。以官网上这个获取好友状态的自定义 Hook 为例这个自定义 Hook 里面对好友的状态进行了监听每次状态更新的时候都会去更新 isOnline当组件卸载的时候会清除掉这个监听。这就是 React Hooks 最有用的地方它允许我们编写自定义 Hook然后这个自定义 Hook 可以复用给多个组件并且不会和 UI 耦合到一起。9. React Hooks 原理由于 preact hooks 的代码和原有的逻辑耦合度很小这里为了更加浅显易懂我选用了 preact hooks 的源码来解读。9.1 Hooks 执行流程在 React 中组件返回的 JSX 元素也会被转换为虚拟 DOM就是下方的 vnode每个 vnode 上面挂载了一个 _component 属性这个属性指向了组件实例。而在组件实例上面又挂载了一个 _hooks 属性这个 _hooks 属性里面保存了我们执行一个组件的时候里面所有 Hook 方法相关的信息。首先我们有一个全局的 currentIndex 变量当组件第一次渲染或者更新的时候它会在每次进入一个函数组件的时候都重置为0每次遇到一个 Hook 方法就会增加1同时将这个 Hook 方法的信息放到 _list 里面。当我们下次进来或者进入下一个组件的时候 currentIndex 又会被置为0。★组件渲染 currentIndex 重置 0 遇到 Hooks 方法放进 _list currentIndex 渲染结束”★组件更新 currentIndex 重置 0 遇到 Hooks 方法获取 _list[currentIndex] currentIndex 重复上面步骤 更新结束”这个时候就会从刚才的 _list 里面根据 currentIndex 来取出对应项所以我们每次进来执行 useState它依然能拿到上一次更新后的值因为这里是缓存了起来。通过上面的分析你就不难发现为什么 hooks 方法不能放在条件语句里面了。因为每次进入这个函数的时候都是要和 currentIndex 一一匹配的如果更新前后少了一个 Hook 方法那么就完全对不上了导致出现大问题。9.2 useState 和 useReducer这样你再来看下面 useState 和 useReducer 的源码就会更容易理解一些。很明显getHookState 是根据 currentIndex 来从 _list 里面取和当前 Hook 相关的一些信息。如果是初始化状态(即没有 hookState._component)这个属性的时候就会去初始化 useState 的两个返回值否则就会直接返回上一次缓存的结果。9.3 useEffectuseEffect 和 useState 差不多区别就在 useEffect 接收的函数会放到一个 _pendingEffects 里面而非 _list 里面。在 diff 结束之后会从 _pendingEffects 里面取出来函数一个个执行。afterPaint 里面使用了 requestAnimateFrame 这个方法所以传给 useEffect 里面的方法是在浏览器绘制结束之后才会执行的。9.4 总结最后这里对 React Hooks 的整个运行流程来进行一下总结和梳理。每个组件实例上挂载一个 _hooks 属性保证了组件之间不会影响。每当遇到一个 hooks 方法就将其 push 到 currentComponent._hooks._list 中且 currentIndex 加一。每次渲染进入一个组件的时候都会从将 currentIndex 重置为 0 。遇到 hooks 方法时currentIndex 重复第二步。这样可以把 currentIndex 和 currentComponent._hooks._list 中的对应项匹配起来直接取上次缓存的值。函数组件每次重新执行后useState 中还能保持上一次的值就是来自于步骤3中的缓存。由于依赖了 currentComponent 实例所以 hooks 不能用于普通函数中。10. React Hooks 实践得益于 react hooks 将业务逻辑从 ui 中抽离出来目前社区里面关于 react hooks 的实践大都是从功能点出发。从最简单的 api 封装例如 useDebounce、useThrottle、useImmerState 等等再到业务层面功能封装比较出名的库有 react-use、umijs/hooks 等等。举个栗子umijs/hooks 的表格在后台管理系统开发中表格是非常常见的场景将分页、查询、loading、排序等等功能打包封装成通用 Hook就能发挥很大的潜力。11. 推荐阅读Umi Hooks - 助力拥抱 React Hooks为什么 React 现在要推行函数式组件用 class 不好吗useRequest- 蚂蚁中台标准请求 Hooks最后如果你觉得这篇内容对你挺有启发我想邀请你帮我三个小忙点个「在看」让更多的人也能看到这篇内容(喜欢不点在看都是耍流氓 -_-)欢迎加我微信「qianyu443033099」拉你进技术群长期交流学习...关注公众号「前端下午茶」持续为你推送精选好文也可以加我为好友随时聊骚。点个在看支持我吧转发就更好了
