javascript - 为什么 React 组件会在每次 useEffect 依赖项更改时卸载？

Question

我正在尝试通过构建 Web 应用程序来学习 React。因为我想一步一步地学习它，所以现在我不使用 Redux，我只使用 React 状态，但我遇到了一个问题。

这是我的组件架构:

           App.js
             |
    _________|_________
   |                   |
Main.js              Side.js
   |                   |
Game.js              Moves.js

如您所见，我有一个名为 App.js 的主文件，在左侧我们有 Main.js 这是应用程序的中心部分其中包含 Game.js 我的游戏实际上正在发生。右侧有 Side.js，这是我想要显示每个玩家在游戏中所做的 Action 的侧边栏。它们将显示在 Moves.js 中。

为了更清楚地思考国际象棋游戏。在左侧部分，您实际玩游戏，右侧部分将列出您的 Action 。

现在我将向您展示我的代码并解释问题所在。

// App.js

const App = React.memo(props => {     
    let [moveList, setMovesList] = useState([]);

    return (
        <React.Fragment>  
            <div className="col-8">                                            
                <Main setMovesList={setMovesList} />                        
            </div>
            <div className="col-4">  
                <Side moveList={moveList} />
            </div>    
        </React.Fragment>
    );
});

// Main.js

const Main = React.memo(props => { 
    return (
        <React.Fragment>                
            <Game setMovesList={props.setMovesList} />
        </React.Fragment>
    );
});

// Game.js

const Game= React.memo(props => { 
    useEffect(() => {
        function executeMove(e) {
            props.setMovesList(e.target);
        }

        document.getElementById('board').addEventListener('click', executeMove, false);    

        return () => {            
            document.getElementById('board').removeEventListener('click', executeMove, false);              
        };
    }) 
    
    return (
        // render the game board
    );
});

// Side.js

const Side= React.memo(props => { 
    return (
        <React.Fragment>                
            <Moves moveList={props.moveList} />
        </React.Fragment>
    );
});

// Moves.js

const Moves= React.memo(props => { 
    let [listItems, setListItems] = useState([]);

    useEffect(() => {
        let items = [];                    

        for (let i = 0; i < props.moveList.length; i++) {
            items.push(<div key={i+1}><div>{i+1}</div><div>{props.moveList[i]}</div></div>)                                          
        }

        setListItems(items);

        return () => { 
            console.log('why this is being triggered on each move?') 
        }; 

    }, [props.moveList]);

    return (
        <React.Fragment>                
            {listItems}  
        </React.Fragment>
    );
});

正如您在我的代码中看到的，我已在 App.js 中定义了状态。在左侧，我传递了根据玩家所做的 Action 更新状态的函数。在右侧，我传递状态以更新 View 。

我的问题是，在 Game.js 内的每个点击事件中，组件 Moves.js 都会卸载，并且 console.log 正在被触发我没想到它会这样。我预计只有当我将 View 更改为另一个 View 时它才会卸载。

知道为什么会发生这种情况吗？如果我写的内容没有意义，请随时问我。

Answer 1

感谢您很好地解释了您的问题 - 非常容易理解。

现在，问题是，您的组件实际上并未卸载。您已将 props.movesList 作为 usEffect 的依赖项传递。现在，第一次触发 useEffect 时，它将设置 return 语句。下次 useEffect 由于 props.movesList 的更改而被触发时，return 语句将被执行。

如果您打算在卸载组件时执行某些操作 - 将其转移到另一个具有空依赖项数组的 useEffect。