react hook实用的用法和技巧分析

CntChen 发布于2019-08-23 17:14 / 1316人阅读

摘要：以我个人的观点，要不要使用呢建议用的的人项目版本已经是了新建的项目一直对新技术保持关注，跃跃欲试的人对函数式编程爱好的人对的，，厌烦，甚至因为重新渲染整天在头疼的人不建议用的人对极其厌恶，对生命周期编程是非爱好的人。

react hook发布也已经有几个月了，相信有部分人已经开始使用了，还有些人在犹豫要不要用，可能更多人安于现状，没有要用的打算，甚至还有很多公司的react版本是15或以下的，迫于升级的难度没有使用。以我个人的观点，要不要使用react hook呢？

建议用的的人

项目react版本已经是react16了

新建的项目

一直对新技术保持关注，跃跃欲试的人

对函数式编程爱好的人

对react的componentDidMount，componentWillReceiverProps，componentDidUpdate厌烦，甚至因为重新渲染整天在头疼的人

不建议用的人

对react hook极其厌恶，对react生命周期编程是非爱好的人。

只要你想，没有不建议用的人，包括第一类人。

这只是我个人的建议，我现在用的周期也不长，我们的项目是react 16的，并且团队里只有我自己在写ract hook。幸好react hook和生命周期编程方式是完全兼容的。

那么其实react hook的特点和优点其实也显露出来了。

1. 没有了显性的生命周期，所有渲染后的执行方法都在useEffect里面统一管理
2. 函数式编程，你不需要定义constructor，render，定义class
3. 某一个组件，方法需不需要渲染，重新执行完全取决于你，而且十分方便管理
4. 肯定还有我没发掘的优点

针对以上的特点优点我逐一说明，对于特别基础的用法我就不大篇长论了，建议参考官网的说明文档：
react官网

1. 没有了显性的生命周期，所有渲染后的执行方法都在useEffect里面统一管理

上代码(伪)：

function getData(id) {
    const [data, setData] = useState({});
    useEffect(() => {
        const data = api.getData(id);
        setData(data);
    }, [id]);
    return {data.name}
}

这是根据id获取数据显示name的组件。
因为这个id是外部传入的，在以前你需要再didMount，willReceiverProps里面去判断是否传入的和当前的不一样，然后去获取数据，但是这里就不用了。直接集成在useEffect里面。最关键的是第二个参数[id]。这个参数的意思是id变了才进入里面的方法执行，方然第一次必执行。当然我说的不全面，大致是这个意思，还有更复杂的场景，反正这种方式类似于监听id，id变了就执行，这不就是我们的最终目的吗？react以前分那么多周期其实就是处理这一件事情

2. 函数式编程，你不需要定义constructor，render，定义class

这个就不用多说了吧

function heihei() {
    const [count, setCount] = useState(0);
    return (
        
            {count}
            
        
    )
}

no生命周期，no class，一切都是函数式编程

3. 某一个组件，方法需不需要渲染，重新执行完全取决于你，而且十分方便管理

这里主要讲两个方法，useMemo和useCallback
先看useCallback
之前如果我们在render中定义了一个方法：

render() {
    const {data} = this.state;
    const filter = data.filter(e => e.id !== 5);
    ...
}

那么我们知道每次render都会执行filter这个方法，其实你是不是觉得当data没变这个方法只要执行一次就好了，看看react hook怎么做的

function demo() {
    ...
    const filter = useCallback(() => {
        data.filter(e => e.id !== 5)
    }, [data])
    ...
}

看懂了吗？这个完全就是我之前提出来的思路啊，它把这个方法执行的结果缓存起来了！！！后面的[data]就是当data不变，也不会多执行。
同样的道理，对于一个组件，用useMemo就好啦

const mainInfoMemo = useMemo(() => {
    return MAIN_INFO.map(e => (
        {e.label}：
            {curSubject[e.key]}
        
    ));
}, [curSubject]);

当curSubject不变，当你用这个组件的时候一直不会再次渲染。

4. 肯定还有我没发掘的优点

纸上得来终觉浅，绝知此事要躬行
用了才能发掘更多东西，理解下前端的发展方向，改变以前react的编程习惯
记得收藏哦^^

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104018.html

将函数式进行到底，用 Hooks 武装组件 - TXD 前端月刊 201905 期

摘要：一个合格的中级前端工程师必须要掌握的个技巧对在毕业季还在找工作的同学，可以说很实用的，如果能全部掌握这些技巧，拿到几个应该是没有问题的，当然要注意平时的积累，能力要全面。而且该托管服务是完全免费的。 showImg(https://segmentfault.com/img/remote/1460000019376228?w=1790&h=898); 【阿里云 TXD 前端月刊】- 热门...

xi4oh4o 2019-08-23 17:56 评论0 收藏0
Hooks + Context：状态管理的新选择

摘要：用户点击改变全局状态崔然渲染整颗组件树有没有解决方案呢当然有创建一个只接收的新组件，并将组件中的逻辑都移到组件中。最终的示例使用全局状态和生成全局状态和崔然完整示例见结论在和出现之前，缺乏自带的全局状态管理能力。 React 16.3 版本，正式推了出官方推荐的 context API —— 一种跨层级的数据传递方法。React 16.8 版本，推出了全新的 hooks 功能，将原本只...

tommego 2019-08-23 18:31 评论0 收藏0
React Hooks 解析（下）：进阶

摘要：第一次了解这项特性的时候，真的有一种豁然开朗，发现新大陆的感觉。在绝大多数情况下，是更好的选择。唯一例外的就是需要根据新的来进行操作的场景。会保证在页面渲染前执行，也就是说页面渲染出来的是最终的效果。上面条规则都是为了保证调用顺序的稳定性。欢迎关注我的公众号睿Talk，获取我最新的文章：showImg(https://segmentfault.com/img/bVbmYjo); 一、...

APICloud 2019-08-23 17:04 评论0 收藏0
21个让React 开发更高效更有趣的工具

摘要：是一个面向开发人员和设计人员的原型工具。这是开发中最常见的扩展插件，并且是开发人员可以用来调试其应用程序的最有用的工具之一。这可能是开发工具包中最重要的工具。为了保证的可读性，本文采用意译而非直译。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！下列工具中的重要性与排序无关。 1.Webpack Bundle Analyzer 有没有想过你的应用程序的哪些包或...

Soarkey 2019-08-26 10:43 评论0 收藏0