React|React 新特性Hooks快速上手 React新特性Hooks快速上手

文章图片
Hooks 【React|React 新特性Hooks快速上手】最近看到Kent.C.Dodds大神在博客和视频教程频中繁提到react16.8新特性Hooks，于是想动手体验一下Hooks到底有何神奇之处。
首先什么是Hooks? 详细的介绍可以参考官方doc。经过一些尝试后,我感受大体上比之前的开发有一下几点提升。

React 组件如果要维护状态需要基于class写组件，class 有一个不好理解的地方就是this，程序一不小心就会有bug。Hooks 用function也可以用组件状态，可以有效避免this这个大坑。
有经验的react开发者都知道业务逻辑的重用原来都是用HOC,或者Render props模式。但这带来了调试的问题，组件被层层嵌套就是所谓的：包装地狱 Wrap hell。
class组件无论对于机器和人都比function组件更难理解。

既然有那么多优势，接下来用一个实际例子来演示一下。
假设我们要做一个N秒钟后自动消失的组件。

import React, { useState, useEffect } from "react"; import ReactDOM from "react-dom"; import "./styles.css"; function useExpire(expireDate) { const [shouldRender, setshouldRender] = useState(true); useEffect( () => { console.log(expireDate - Date.now()) const timeoutId = setTimeout(() => { setshouldRender(false); }, expireDate - Date.now()); return () => { clearTimeout(timeoutId); }; }, [expireDate] ); return shouldRender; }const One = ({ expireDate }) => { return useExpire(expireDate) ? 1秒后消息 : null; }const Two = ({ expireDate }) => { return useExpire(expireDate) ? 2秒后消息 : null; } const App =( )=> {return (Hello Hooks ); }const rootElement = document.getElementById("root"); ReactDOM.render(, rootElement);

codesandbox演示地址: https://codesandbox.io/s/wkw4k757rk
另外，笔者发现前端社区对hooks已经快速跟进，出现了大量的hooks库如react apollo hooks等。
有兴趣可以查阅 hooks react 库集合网站： https://nikgraf.github.io/react-hooks/
参考：https://daveceddia.com/useeffect-hook-examples/