35

私は現在、新しい React Hooks API の使用例と、それを使って何ができるかについて非常に驚いています。

実験中に出てきた質問は、useCallback.

この例を考えると：

const MyCounter = ({initial}) => {
    const [count, setCount] = useState(initial);

    const increase = useCallback(() => setCount(count => count + 1), [setCount]);
    const decrease = useCallback(() => setCount(count => count > 0 ? count - 1 : 0), [setCount]);

    return (
        <div className="counter">
            <p>The count is {count}.</p>
            <button onClick={decrease} disabled={count === 0}> - </button>
            <button onClick={increase}> + </button>
        </div>
    );
};

useCallbackインライン矢印関数をレンダリングするたびに新しいハンドラーを渡さないように、ハンドラーを にラップしていますが、ほとんどの場合、破棄するためだけに作成する必要があります。

少数のコンポーネントのみをレンダリングする場合は、おそらく大したことではありません。しかし、それを何千回も行った場合、パフォーマンスへの影響はどの程度になるでしょうか? 顕著なパフォーマンスの低下はありますか? そして、それを回避する方法は何でしょうか? おそらく、新しいハンドラーを作成する必要がある場合にのみ呼び出される静的ハンドラー ファクトリですか?

4

5 に答える 5

-2

大規模なアプリケーションでは、これによりパフォーマンスの問題が発生する可能性があります。コンポーネントに渡す前にハンドラーをバインドすると、子コンポーネントが余分な再レンダリングを行う可能性が回避されます。

<button onClick={(e) => this.handleClick(e)}>click me!</button>
<button onClick={this.handleClick.bind(this)}>click me!</button>

どちらも同等です。React イベントを表す e 引数。アロー関数では明示的に渡す必要がありますが、bind ではすべての引数が自動的に転送されます。

于 2018-11-16T10:39:45.243 に答える