javascript - react 级联渲染

Question

我的 App.js 组件中有 react-toastify 元素是这样实现的:

class App extends Component {
  componentDidUpdate(prevProps) {
    const { toast } = this.props
    if(toast.id !== prevProps.toast.id) {
      this.notify(toast)
    }
  }

  notify = (data) => {
    switch(data.type) {
      case TOAST.TYPE.ERROR:
        ...
        return toast.show()
    }
  }

  render() {
    return (
      <BrowserRouter> 
        <div className="app">
          <Switch>
            <Route path={ getRoutePath('password.set') } component={ PasswordSet } />
            <Route path={ getRoutePath('password.reset') } component={ PasswordReset } />
            <Route path={ getRoutePath('login') } component={ LoginSection } />
            <Route path={ getRoutePath('home') } component={ AuthenticatedSection } />
          </Switch>
          <ToastContainer 
            className="custom-toastify" 
            autoClose={ 5000 } 
            hideProgressBar={ true }
            closeButton={ <CloseButton /> } 
          />
        </div>
      </BrowserRouter>
    )
  }
}

function mapStateToProps({ toast }) {
  return { toast }
}

现在考虑以下场景:我在 AuthenticatedSection 中有一个 UsersAdmin PureComponent，您可以在其中启用/禁用用户。当您单击启用/禁用按钮时，UsersAdmin 组件会因为 users redux 状态更改而重新呈现，然后它也会重新呈现，因为我正在显示 toast 成功/错误 api 调用。

toggleUsersDisabled = (user) => () => {
        const { modifyUser, showToast } = this.props
        modifyUser(user.id, {
            disabled: user.disabled === 0 ? 1 : 0
        }).then((response) => {
            showToast(`${response.value.name} has been ${response.value.disabled ? 'disabled' : 'enabled'}`)
        }).catch(_noop)
    }

showToast 将新消息分派(dispatch)到 redux 状态以进行 toast 。是否有可能以某种方式防止在显示 toast 时重新渲染子组件？

编辑:添加了 UsersAdmin redux 连接，包括选择器

// users selector
import { createSelector } from 'reselect'

const getUsers = state => state.users.get('data')
const getIsFulfilled = state => state.users.get('isFulfilled')

export const getFulfilledUsers = createSelector(
    [getUsers, getIsFulfilled],
    users => users
)

// UsersAdmin
const mapStateToProps = (state) => {
    return {
        users: getFulfilledUsers(state)
    }
}


UsersAdmin.propTypes = {
    users: PropTypes.object.isRequired,
    fetchUsersList: PropTypes.func.isRequired,
    modifyUser: PropTypes.func.isRequired,
    deleteUser: PropTypes.func.isRequired,
    showToast: PropTypes.func.isRequired
}

export default connect(mapStateToProps, { fetchUsersList, modifyUser, deleteUser, showToast })(UsersAdmin)

Answer 1

我真的不明白为什么你在 App.js 中添加了所有的 toasts 登录信息

如果您查看以下文档: https://github.com/fkhadra/react-toastify#installation

您唯一需要做的就是添加 <ToastContainer />到你的应用程序，你就完成了，就像你在你的例子中所做的那样。

现在调用您刚刚导入的 toasts:

import { toast } from 'react-toastify';

进入系统中您喜欢的任何组件，现在您只需运行 toast函数，你为自己干杯。

即:

import { Component } from 'react';
import { toast } from 'react-toastify';

class SomeComponent extends Component {
    showToast() {
        toast('you now see a toast');
    }

    render() {
        return <button onClick={()=>this.showToast()}>toast it</button>;
    }
}