56日100日のSoftwcode:無駄な反応を使用して再レンダリングを避けてください.カスタマイズされたフックのメモ

はじめに

最近、反応フックを作りますuse-react-monitor . これは、指定された間隔のエンドポイントを監視し、変更時に間隔をリセットすることができます.

パッケージを最初のステップにインストールする必要があります

npm install use-react-monitor -S

我々は、我々がモニターしたいエンドポイントのためにフックを使うことができます

import React from 'react';
import useMonitor from 'use-react-monitor';

const Tester = () => {
    const interval = 3000;
    const {results, status, lastTimes} = useMonitor(
        { urls:['http://rem-rest-api.herokuapp.com/api/users',
                'http://rem-rest-api.herokuapp.com/api/users'],
          freshRate: interval});

    return (
        <>
            {<Results results = {results} status = {status}/>}
        </>
    )
}

const Results = ({ results, status}) => {
    const refCount = React.useRef(0);
    refCount.current++;
    return (
        <div>
        <p>
       {`render time: ${refCount.current}`}
        </p>
        {results && results.map((result, i) =>{
            return (
                <>
                    <div key={`status-${i}`}>Status: {status && status[i]}</div>
                    <ul key={i}>
                        {result.data.map((r, index) => {
                            return (<li key={index}>{r.id} {r.firstName} {r.lastName}</li>)
                        })}
                    </ul>
                </>)
        })}
     </div>
    );
};

export default Tester

その後、エンドポイントからリソースを取得するポーリングできます.
ここでは、取得した結果が変更されていなくても、子プロセスが再描画されたかどうかを確認するためにuserefを追加しました.

const Results = ({ results, status}) => {
    const refCount = React.useRef(0);
    refCount.current++;
    return (
        <div>
        <p>
       {`render time: ${refCount.current}`}
        </p>
        ...
    )
};

私たちは、子コンポーネントがいつでも再描画されるのを発見しましたuse-react-monitor 返り値しかし、私たちが期待するのは、子コンポーネントがuse-react-monitor 新しい値を返します.

2 .反応による無駄な再レンダリングを避ける。メモ

React.memo はアドホックです.子供のコンポーネントを比較関数で渡すことができます.メモは浅い比較を行います.
ラップされた子コンポーネントはuse-react-monitor 新しい値を返します.

機能比較

function monitoredPropsAreEqual(prevResults, nextResults){
    return JSON.stringify(prevResults) === JSON.stringify(nextResults);
}

Childコンポーネントをラップします。メモ

import React, {memo} from 'react';
const Tester = () => {
    const interval = 3000;
    const {results, status, lastTimes} = useMonitor(
        { urls:['http://rem-rest-api.herokuapp.com/api/users',
                'http://rem-rest-api.herokuapp.com/api/users'],
          freshRate: interval});

    return (
        <>
            {<MemorizedResults results = {results} status = {status}/>}
        </>
    )
}
const MemorizedResults = memo(Results, monitoredPropsAreEqual);

結果

それだ!

サイドプロジェクト

私の記事はいくつかあります.お気軽にチェックしてください!

My blog-posts for software developing

My web resume

Facebook page

Next.js website - Daily Learning

npm package - create-nrs-web

npm package - use-react-monitor

npm package - react-ui-gauge-component

参考文献

How to create a customized React hook package and publish it to npm?

如何錯誤地使用 React hooks useCallback 來保存相同的 function instance

React.memo()

一直以来 useCallback 的使用姿势都不对

Use React.memo() wisely

React Hooks 第一期：聊聊 useCallback