反应级联渲染答案

【问题标题】：React cascade rendering反应级联渲染
【发布时间】：2018-12-11 12:21:22
【问题描述】：

我的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 状态更改而重新呈现，然后它也重新呈现，因为我在成功/错误 api 调用上显示 toast。

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 为 toast 发送新消息到 redux 状态。是否有可能在显示 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)

【问题讨论】：

Toast 对状态的更改不应影响其他元素。您能否展示如何将 UsersAdmin 连接到 redux 存储，包括您的选择器？
@eronisko 看看问题的编辑部分:)
"它也重新渲染" 什么也重新渲染？你能显示你不想重新渲染的子组件吗？如果可能，在codesandbox.io/s/new 上创建stackoverflow.com/help/mcve。
是重新渲染还是重新挂载？

标签： javascript reactjs redux react-redux

【解决方案1】：

我真的不明白你为什么在App.js 中添加了所有的祝酒词登录

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

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

现在调用你刚刚导入的 toast：

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>;
    }
}

【讨论】：