0
102
Visualizaçõesomitir volver a renderizar usando shouldComponentUpdate y nextState
Actualmente tengo una select desplegable para filtrar algunos gráficos después de 'Aplicar'. Funciona bien. (Vea la captura de pantalla a continuación). 
El problema es que cuando se selecciona otro período de tiempo, React vuelve a renderizar todos los gráficos antes de hacer clic en el botón 'Aplicar'.
Quiero evitar este renderizado innecesario implementando shouldComponentUpdate , pero no sé cómo.
Debajo de lo que probé pero no funcionó (todavía una nueva representación):
shouldComponentUpdate(nextState) { if (this.state.timespanState !== nextState.timespanState) { return true; } return false; } Pero siempre devuelve true , porque nextState.timespanState no está undefined . ¿Por qué?
Selección desplegable
<Select value={this.state.timespanState} onChange={this.handleTimeSpanChange}> handleTimeSpanChange = (event) => { this.setState({ timespanState: event.target.value }); }; constructor(props) { super(props); this.state = { timespanState: 'Today'}; this.handleTimeSpanChange = this.handleTimeSpanChange.bind(this); }2 Respostas
Responde à pergunta0
Está en el camino correcto con el uso de shouldComponentUpdate , es solo que el primer parámetro es nextProps y el segundo es nextState , por lo que en su caso, el valor undefined es en realidad nextProps con el nombre incorrecto.
Cambia tu código a esto,
shouldComponentUpdate(nextProps,nextState) { // <-- tweak this line if (this.state.timespanState !== nextState.timespanState) { return true; } return false; }0
Finalmente, resuelvo el problema separando el cuadro de selección desplegable y los gráficos en dos componentes separados e hice el componente desplegable como un componente secundario de su componente principal, los componentes de gráficos. La razón es la siguiente declaración.
Los componentes de React se vuelven a renderizar automáticamente cada vez que hay un cambio en su estado o accesorios.
Por lo tanto, React volverá a renderizar todo en el método render() de este componente. Por lo tanto, mantenerlos en dos componentes separados les permitirá volver a renderizar sin efectos secundarios. En mi caso, cualquier cambio de estado en el menú desplegable u otros estados en el componente Filtro, solo provocará una nueva representación dentro de este componente. Luego, pasar los estados actualizados al componente de gráficos con una función de devolución de llamada.
Algo como a continuación:
Componente hijo
export class Filter extends Component { handleApplyChanges = () => { this.props.renderPieChart(data); } render(){ return ( ... <Button onClick={this.handleApplyChanges} /> ); } }Componente principal
export class Charts extends Component{ constructor(props){ this.state = { dataForPieChart: []}; this.renderPieChart = this.renderPieChart.bind(this); } renderPieChart = (data) => { this.setState({ dataForPieChart: data }); } render(){ return ( <Filter renderPieChart={this.renderPieChart} /> <Chart> ...data={this.state.dataForPieChart} </Chart> ); } }Si todavía tiene alguna pregunta, desacuerdo o sugerencia, por favor hágamelo saber :)