反应避免重新渲染
React avoid re-render
对于一个项目,我们希望通知在应用程序的所有视图中都可见。
侧边栏菜单允许用户在视图之间移动,与通知组件和 websocket 组件处于同一级别react-stomp。路由器用于根据所选菜单项更改下一级的视图。
我们的问题是,如果有新消息到达,我们需要将其作为 props 传递给视图,当然这会触发整个组件的重新渲染。
有没有办法避免这种重新渲染?
我们希望避免使用 redux,尽管我们知道这是一个可能的解决方案。
您是否尝试过 React 生命周期事件挂钩?
如果你想避免使用像 Redux 或 MobX 这样的状态管理器,你可以使用 REACT CONTEXT
API
默认情况下,如果道具发生变化,反应将触发重新渲染。如果你想避免渲染一个组件,你可以使用钩子 shouldComponentUpdate(nextProps, nextState)
引用 React 的文档:
Use shouldComponentUpdate() to let React know if a component’s output is not affected by the current change in state or props. The default behavior is to re-render on every state change, and in the vast majority of cases you should rely on the default behavior.
如需进一步阅读,请访问 their docs
对于一个项目,我们希望通知在应用程序的所有视图中都可见。
侧边栏菜单允许用户在视图之间移动,与通知组件和 websocket 组件处于同一级别react-stomp。路由器用于根据所选菜单项更改下一级的视图。
我们的问题是,如果有新消息到达,我们需要将其作为 props 传递给视图,当然这会触发整个组件的重新渲染。
有没有办法避免这种重新渲染?
我们希望避免使用 redux,尽管我们知道这是一个可能的解决方案。
您是否尝试过 React 生命周期事件挂钩?
如果你想避免使用像 Redux 或 MobX 这样的状态管理器,你可以使用 REACT CONTEXT
API
默认情况下,如果道具发生变化,反应将触发重新渲染。如果你想避免渲染一个组件,你可以使用钩子 shouldComponentUpdate(nextProps, nextState)
引用 React 的文档:
Use shouldComponentUpdate() to let React know if a component’s output is not affected by the current change in state or props. The default behavior is to re-render on every state change, and in the vast majority of cases you should rely on the default behavior.
如需进一步阅读,请访问 their docs