![](/img/trans.png)
[英]React - prevent re-rendering component if redux state is changed
[英]Prevent component from re-rendering when property not used in render function React Redux
我正在為重新渲染的組件而苦苦掙扎。
我正在使用 Redux 來管理我的狀態。 在一個組件中,除了渲染 function 之外,我在我的組件(類)的某些方法中使用了我的 state 中的屬性(isPlaying:bool)和 mapStateToProps,並且我使用一些動作創建者來調度isPlaying的更改。 順便說一句,我正在使用連接(react-redux)在另一個子組件(音樂播放器)中使用isPlaying 。
這就是我所期待的:
當isPlaying更改時,父組件不會重新渲染,音樂欄會重新渲染,我繼續在父組件的方法中使用isPlaying 。
有什么問題:
即使我沒有在渲染方法中使用isPlaying ,父組件也會重新渲染。
抱歉,如果我在閱讀時確實讓您感到困惑,我不是以英語為母語的人。
提前致謝。
編輯:添加代碼的簡化版本。
我最初的 state:
export default {
// Some Irrelevant Properties
...
playlist: {
isPlaying: false,
playingTrack: null,
nextTrack: null,
prevTrack: null,
views: null,
totalListens: null,
tracks: []
}
};
這是我的父組件。 (應用程序.js)
import ...
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
widgets: [],
links: [],
clickedTrack: null
}
this.musicBarRef = React.createRef()
this._isMounted = false;
// Binding this to the methods used in this Component
...
}
// All my methods here
// Example of one function
playTrack() {
let {isPlaying} = this.props
if (isPlaying) {
// Pause
} else {
// Play
}
}
render() {
<>
// Some irrelevant components (don't use isPlaying)
<TracksPlaylist tracks={this.props.tracks} and some the methods created above />
<MusicBar ref={this.musicBarRef} and some methods created above />
// Example of one irrelevant component that re-renders
<Footer />
</>
}
}
const mapStateToProps = (state) => {
return {
isPlaying: state.playlist.isPlaying,
selectedTrack: state.playlist.playingTrack,
nextTrack: state.playlist.nextTrack,
prevTrack: state.playlist.prevTrack,
tracks: state.playlist.tracks,
}
}
const mapDispatchToProps = {
setPlaying: startPlaying, // Set isPlaying: true
setNotPlaying: stopPlaying, // Set isPlaying: false
// Some Irrelevent Action Creators
...
}
export default connect(mapStateToProps, mapDispatchToProps)(App)
這是我的減速機
import * as types from "../actions/actionTypes";
import initialState from "./initialState";
export default function musicPlayerReducer(state = initialState.playlist, action) {
switch (action.type) {
// Some irrelevant cases
...
case types.STOP_PLAYING:
return {...state, isPlaying: false}
case types.START_PLAYING:
return {...state, isPlaying: true}
case types.NEXT_TRACK_FOUND:
return {...state, nextTrack: action.track}
case types.PREV_TRACK_FOUND:
return {...state, prevTrack: action.track}
case types.CURRENT_TRACK_FOUND:
return {...state, playingTrack: action.track}
default:
return state
}
}
App.js 中提到的 TracksPlaylist
import ...
class TracksPlaylist extends React.Component {
constructor(props) {
super(props)
}
render() {
let {tracks, onPlayClick ... and other methods from App.js} = this.props
return (
<div className="songs">
{
Object.values(tracks).length > 0 ?
Object.values(tracks).map((item, index) => {
return <Track onPlayClick={onPlayClick} key={index} item={item} />
}) :
''
}
</div>
)
}
}
const mapStateToProps = (state) => {
return {
tracks: state.playlist.tracks,
}
}
const mapDispatchToProps = {
setPlaying: startPlaying,
setNotPlaying: stopPlaying,
// Some irrelevant functions
...
}
export default connect(mapStateToProps, mapDispatchToProps)(Tracks)
軌道組件
import ...
class Track extends React.Component {
constructor(props) {
super(props)
}
hasInteraction(interactionType, trackId) {
return false
}
render() {
let {onPlayClick, item} = this.props
return (
<div key={item.track_id} className="track" id={item.track_id} data-category={item.category_name}>
// A lot of irrelevant JSX :)
<TrackAction onPlayClick={onPlayClick} item={item} />
</div>
</div>
)
}
}
export default Track
這是 TrackAction(它使用 isPlaying):
import ...
function TrackAction({item, isPlaying, playingTrack, onPlayClick}) {
return (
<div className="status action play-track" onClick={onPlayClick}>
<i id={item.track_id} className={isPlaying && playingTrack.track_id === item.track_id ? 'fas fa-pause' : 'fas fa-play'} />
</div>
)
}
const mapStateToProps = (state) => {
return {
isPlaying: state.playlist.isPlaying,
playingTrack: state.playlist.playingTrack
}
}
export default connect(mapStateToProps)(TrackAction)
我確實使用了 TrackAction 來重新渲染這個組件,因為 isPlaying 發生了變化,並且它被注冊到這個組件並在它的 render() 中使用。
再次感謝。
盡管您沒有在render
方法中使用isPlaying
,但由於mapStateToProps
綁定,您仍在訂閱更改。
每當State || Props
State || Props
更改,React 只會重新渲染新更新的state || props
只是淺比較的state || props
。
這就是為什么你的父母被重新渲染的原因。
一種可能的解決方案是覆蓋shouldcomponentupdate
https://reactjs.org/docs/react-component.html#shouldcomponentupdate
使用 shouldComponentUpdate() 讓 React 知道組件的 output 是否不受 state 或 props 的當前更改的影響。 默認行為是在每個 state 更改時重新渲染。
默認為真。 如果覆蓋並返回 false,則不會調用 UNSAFE_componentWillUpdate()、render() 和 componentDidUpdate()。
示例代碼:
shouldComponentUpdate(nextProps, nextState) {
return <enter_your_condition_to_be_true>; // else false
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.