javascript - 为什么 javascript 会渲染移除的组件

Question

伙计们，我现在正在开发一个项目，我有一个由 antd Menu 项返回的组件。它有 4 个组件:Home、Username、Login 和 Register:

const items = [
        {
          label: <Link to='/'>Home </Link>, //- {JSON.stringify(user)}
          key: 'home',
          icon: <AppstoreOutlined />,
        },
        {
          label: 'Username',
          key: 'SubMenu',
          icon: <SettingOutlined />,
          children: [
            {
              label: 'Option 1',
              key: 'setting:1',
            },
            {
              label: 'Option 2',
              key: 'setting:2',
            },
            {
              label: <item onClick={logout}>Logout</item>,
              key: 'setting:3',
              icon: <LogoutOutlined />
            },
          ],
        },
        {
          label: <Link to='/register'>Register</Link>,
          key: 'register',
          icon: <UserAddOutlined />,
          style: { marginLeft: 1030},   // problem: hard-coded margin
        },
        {
          label: <Link to='/login'>Login</Link>,
          key: 'login',
          icon: <UserOutlined />,
          style: { marginLeft: 'auto'},
        },      
      ];
    
    useEffect(() => {
      if (user) {  // "user" is an object returned by userSelector
        items.splice(2, 2);
      }
    }, [user]);
    console.log(items);
    
    return <Menu  onClick={handleClick} selectedKeys={[current]} mode="horizontal" items={items} />;

如您所见，我在这里使用了 useEffect Hook 。如果用户没有登录(所以user === null)，那么useEffect中的if语句将不会被执行；否则数组 items 中的 Login 和 Register 组件将被删除并隐藏，只剩下前 2 个。

从console.log(items);我们可以看到items当前是什么样的。当用户登录时，它只有两个组件:

但是，在这种情况下我们仍然可以看到Login和Register存在:

那么为什么 JS 和 React 会渲染移除的组件呢？

Answer 1

如果您需要重新渲染。您可以将数组存储在某种状态中。如果将数组存储在普通的 javascript 变量中。 React 不会重新渲染组件。尝试像我下面给出的那样，

const [items, setItems] = useState([
        {
          label: <Link to='/'>Home </Link>, //- {JSON.stringify(user)}
          key: 'home',
          icon: <AppstoreOutlined />,
        },
        {
          label: 'Username',
          key: 'SubMenu',
          icon: <SettingOutlined />,
          children: [
            {
              label: 'Option 1',
              key: 'setting:1',
            },
            {
              label: 'Option 2',
              key: 'setting:2',
            },
            {
              label: <item onClick={logout}>Logout</item>,
              key: 'setting:3',
              icon: <LogoutOutlined />
          },
          ],
        },
        {
          label: <Link to='/register'>Register</Link>,
          key: 'register',
          icon: <UserAddOutlined />,
          style: { marginLeft: 1030},   // problem: hard-coded margin
        },
        {
          label: <Link to='/login'>Login</Link>,
          key: 'login',
          icon: <UserOutlined />,
          style: { marginLeft: 'auto'},
        },      
      ]);
    
    useEffect(() => {
      if (user) {  // "user" is an object returned by userSelector
        setItems(items.splice(2, 2));
      }
    }, [user]);
    console.log(items);
  
    return <Menu  onClick={handleClick} selectedKeys={[current]} mode="horizontal" items={items} />;