react hook有用的用法和技能剖析

2024年5月27日 275次阅读 来源: 前端spark

react hook宣布也已有几个月了，置信有部份人已开始运用了，另有些人在犹疑要不要用，能够更多人安于现状，没有要用的盘算，以至另有许多公司的react版本是15或以下的，迫于晋级的难度没有运用。以我个人的看法，要不要运用react hook呢？

发起用的的人

  1. 项目react版本已是react16了
  2. 新建的项目
  3. 一向对新技术坚持关注，摩拳擦掌的人
  4. 对函数式编程兴趣的人
  5. 对react的componentDidMount，componentWillReceiverProps，componentDidUpdate讨厌，以至由于从新衬着成天在头疼的人

不发起用的人

  1. 对react hook极为讨厌，对react生命周期编程黑白兴趣的人。
  2. 只需你想，没有不发起用的人，包含第一类人。

这只是我个人的发起，我现在用的周期也不长，我们的项目是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 <div>{data.name}</div>
}

这是依据id猎取数据显现name的组件。
由于这个id是外部传入的，在之前你须要再didMount，willReceiverProps内里去推断是不是传入的和当前的不一样，然后去猎取数据，然则这里就不必了。直接集成在useEffect内里。最症结的是第二个参数[id]。这个参数的意义是id变了才进入内里的要领实行，方然第一次必实行。固然我说的不周全，大抵是这个意义，另有更庞杂的场景，横竖这类体式格局类似于监听id，id变了就实行，这不就是我们的终究目标吗？react之前分那末多周期实在就是处置惩罚这一件事变

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

这个就不必多说了吧

function heihei() {
    const [count, setCount] = useState(0);
    return (
        <div>
            {count}
            <button onClick={() => setCount(count + 1)}>增添count</button>
        </div>
    )
}

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 => (
        <div key={e.key}><b>{e.label}</b>：
            {curSubject[e.key]}
        </div>
    ));
}, [curSubject]);

当curSubject稳定，当你用这个组件的时刻一向不会再次衬着。

4. 一定另有我没挖掘的长处

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

    原文作者：前端spark
    原文地址: https://segmentfault.com/a/1190000019035606
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞