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

2024年3月12日 225次阅读 来源: 前端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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞