美文网首页
React hook ---如何使useEffect 在渲染时不

React hook ---如何使useEffect 在渲染时不

作者: nomooo | 来源:发表于2020-06-02 16:57 被阅读0次

    在看这个之前,可以先去了解useEffect的原理和执行机制https://zh-hans.reactjs.org/docs/hooks-effect.html

    需求是:用户点击搜索按钮查询后,这个表格显示出来,表格的页数大小或者当前页发生改变时重新去请求数据,
    但是这个不是mounted事件,而且触发事件,用户不点击不执行,所以使用useEffect时,要禁止在页面初次渲染时去执行

    有试过把执行方法放到return中去执行,想利用useEffect的清除机制去执行获取函数方法

        useEffect(() => {
                console.log('第一次执行')
                retuen () => {
                  getSearchResult()
                }
    
        }, [pageIndex, currentPageSize]);
    

    失败
    原因是useEffect在每次执行的时候都会生成形成一个快照并保留下来(相当于Render),因此当状态变更而 Rerender 时,就形成了 N 个 Render 状态,而每个 Render 状态都拥有自己固定不变的 Props 与 State。
    用清除机制去执行的话,总会去执行上一个快照保存的值(用户翻页到了第三页,但是获取的数据相当于用户翻页到了第二页的数据)

    附上useEffect的清除机制,看注释就好,详情点击→(https://zh-hans.reactjs.org/docs/hooks-effect.html#explanation-why-effects-run-on-each-update)

    // Mount with { friend: { id: 100 } } props
    ChatAPI.subscribeToFriendStatus(100, handleStatusChange);     // 运行第一个 effect
    
    // Update with { friend: { id: 200 } } props
    ChatAPI.unsubscribeFromFriendStatus(100, handleStatusChange); // 清除上一个 effect
    ChatAPI.subscribeToFriendStatus(200, handleStatusChange);     // 运行下一个 effect
    
    // Update with { friend: { id: 300 } } props
    ChatAPI.unsubscribeFromFriendStatus(200, handleStatusChange); // 清除上一个 effect
    ChatAPI.subscribeToFriendStatus(300, handleStatusChange);     // 运行下一个 effect
    
    // Unmount
    ChatAPI.unsubscribeFromFriendStatus(300, handleStatusChange); // 清除最后一个 effect
    

    由于没有找到好的方法,只能做个限制

        // 刷新数据
        const [isInit, setInit] = useState(true)
        useEffect(() => {
            if (isInit) {
                setInit(false);
            } else {
                getSearchResult()
            }
        }, [pageIndex, currentPageSize]);
    

    设置初始值isInit为true,当页面初次渲染时,isInit赋值为false,之后每次判断isInit的值就可以了

    目前为止还算体面的解决方案吧,如果有更好的解决方法,告我一声,感激不尽


    谢谢

    相关文章

      网友评论

          本文标题:React hook ---如何使useEffect 在渲染时不

          本文链接:https://www.haomeiwen.com/subject/huouzhtx.html