我应该在组件中使用一个还是多个useEffect?

时间:2019-01-02 07:38:14

标签: reactjs react-hooks

我有一些副作用,我想如何组织它们:

  • 单次使用效果
  • 或多个useEffects

在性能和体系结构上哪个更好?

3 个答案:

答案 0 :(得分:7)

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

首先,您可能遇到以下情况:在初始安装期间需要添加事件侦听器,并在卸载时对其进行清理,而在另一种情况下,则需要清理并重新添加特定的侦听器道具变更。在这种情况下,使用两个不同的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])

答案 1 :(得分:3)

拥有多个 useEffect 是完美的 fine

这是我的一个设置的样子:

/*
 * 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]);

答案 2 :(得分:1)

您应该使用多种效果来分离Reactjs.org建议的关注点  https://reactjs.org/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns