一般来说，在单个组件中使用一个或多个 useEffect 挂钩更好吗？

Question

我有一些副作用要应用到我的 React 组件中，想知道如何组织它们：

单次使用效果
或多个useEffects

性能和架构哪个更好？

Answer 1

您需要遵循的模式取决于您的用例。

首先：您可能遇到一种情况，您需要在初始挂载期间添加事件侦听器并在卸载时清理它们，另一种情况是需要清理特定的侦听器向上并重新添加道具更改。

在这种情况下，使用两个不同的 useEffect 可以更好地将相关逻辑保持在一起并具有性能优势

useEffect(() => {
   // adding event listeners on mount here
   return () => {
       // cleaning up the listeners here
   }
}, []);

useEffect(() => {
   // adding listeners everytime props.x changes
   return () => {
       // removing the listener when props.x changes
   }
}, [props.x])

其次： 当任何状态或道具从定义的集合发生变化时，您需要触发一个 API 调用或其他一些副作用。在这种情况下，一个 useEffect 具有要监视的相关依赖项会更好

useEffect(() => {
    // side effect here on change of any of props.x or stateY
}, [props.x, stateY])

第三：你需要对不同的变化集有单独的副作用。在这种情况下，将相关的副作用分成不同的 useEffects

useEffect(() => {
   // some side-effect on change of props.x
}, [props.x])

useEffect(() => {
   // another side-effect on change of stateX or stateY 
}, [stateX, stateY])

Answer 2

您应该使用多种效果 separate concerns as suggested by reactjs.org。

Answer 3

完美fine有多个useEffect。

这是我的设置之一：

/*
 * Backend tags list have changed add the changes if needed
 */
useEffect(() => {
    setTagsList(setTagsAdded);
}, [setTagsAdded]);

/*
 * Backend files have changed add the changes if needed
 */
useEffect(() => {
    for (let i = 0; i < changedFilesMeta.length; i += 1) {
        // Is the list item value changed
        if (changedFilesMeta[i].id === currentEditableFile.id) {
            unstable_batchedUpdates(() => {
                setTags(changedFilesMeta[i].tags ? changedFilesMeta[i].tags : []);
            });
        }
    }
}, [changedFilesMeta]);

/*
 * Reset when user select new files using the filepicker
 */
useEffect(() => {
    if (setNewFiles.length > 0) {
        unstable_batchedUpdates(() => {
            setCurrentFile(null);
            setDescription('');
            setTitle('');
            setTags([]);
        });
    }
}, [setNewFiles]);

/*
 * User selecet to edit a file, change to that file
 */
useEffect(() => {
    // When user select a file to edit it
    if (currentEditableFile && currentEditableFile !== theCurrentFile) {
        setCurrentFile(currentEditableFile);
        unstable_batchedUpdates(() => {
            setDescription(currentEditableFile.description);
            setTitle(currentEditableFile.title);
            setTags(currentEditableFile.tags);
        });
    }
}, [currentEditableFile]);

一般来说，在单个组件中使用一个或多个 useEffect 挂钩更好吗？

In general is it better to use one or many useEffect hooks in a single component?

architecture

performance

reactjs

react-hooks

use-effect