Tengo un componente de reacción, en el que estoy usando un selector de fecha . Según el valor de la fecha seleccionada, estoy enviando una solicitud ajax para obtener datos. No estoy usando ningún marco como redux o flux.
export default class MyComponent extends Component { constructor(props) { super(props); } componentDidMount() { // Initial fetch request based on the default date } onDateSelectionChanged(fromDate, toDate) { this.setState({ fromDate, toDate }); } render() { return ( <div className="row"> <DateRangePicker callBackParent = {this.onDateSelectionChanged}/> {/* other stuff */} </div> ); } } Ahora supongamos que cambié la fecha a otra fecha. ¿Cuál es la mejor manera de obtener los datos nuevamente? ¿Debería activar la solicitud nuevamente en onDateSelectionChanged o hay algún método de ciclo de vida?
Recomiendo encarecidamente desacoplar la lógica ajax de su componente. Recuerde que React simple se creó solo para simplificar la representación de las vistas y no para una lógica compleja como las llamadas Http.
Con Flux, puede crear rápidamente la infraestructura para manejar tanto la representación de la interfaz de usuario como cualquier otra lógica para su aplicación.
El tutorial completo está aquí , pero agregaré un resumen rápido para que pueda comenzar fácilmente.
Añade 4 clases que serán tu infraestructura:
SharedConstans: esta clase contendrá los nombres de eventos de su aplicación.
AppDispatcher: esta clase administrará el manejo de eventos de su aplicación.
Parece complejo, sin embargo, a partir de ahora, agregará fácilmente cualquier lógica a su aplicación mientras la mantiene desacoplada, legible y fácil de mantener. Lea más sobre Flux aquí .
Debe activar otra solicitud de red en onDateSelectionChanged , no hay un método de ciclo de vida para cuando cambia el estado.
Técnicamente hablando, podría hacer algo de lógica en componentWillUpdate (o peor aún, shouldComponentUpdate ) para realizar una solicitud cuando ese campo de estado cambie y funcione, pero no debería. Ambos métodos de ciclo de vida tienen propósitos bien definidos, hacer solicitudes de red haría que su código fuera menos claro y más difícil de mantener.
Si realmente insiste en enviar la solicitud desde el método de su componente, dispararla en onDateSelectionChanged es definitivamente el camino a seguir. Dado que responde a cada cambio de fecha , es naturalmente el único método capaz de satisfacer sus necesidades, y los métodos de ciclo de vida no conocen directamente el cambio de fecha ni el lugar adecuado para hacerlo. Implementar algo así en, por ejemplo componentWillUpdate o componentDidUpdate posiblemente puede conducir a una ejecución cíclica y eso no es algo que quiera enfrentar sin una buena razón.
Hablando de métodos de ciclo de vida, el único recomendado explícitamente para activar solicitudes es el método componentDidMount , donde tiene una buena oportunidad de realizar algunas operaciones de inicialización de ajax, como puede ver en docs , pero ninguna de ellas es adecuada para la obtención de datos ordinaria.
Por otro lado, le sugiero que realmente eche un vistazo a Flux , que es una arquitectura que resuelve muchos problemas, la separación de preocupaciones es una de ellas. Su problema aquí es que vincula su componente a la creación de solicitudes Ajax , lo que no promueve la reutilización y hace que su código sea más difícil de mantener. Piense en los componentes como herramientas para presentar contenido y capturar las entradas de los usuarios, no debería preocuparse por las solicitudes y respuestas o el procesamiento y almacenamiento de datos entrantes (al menos a mayor escala).
Por supuesto, puede separar los creadores de su solicitud para funciones externas, pero si tiende a escribir React frontend , tarde o temprano enfrentará problemas como entregar props a muchos componentes intermedios o propagar eventos a través de su jerarquía de componentes, lo cual es muy tedioso y desordenado. sin algún tipo de arquitectura, y Flux es la mejor solución para estos problemas y, por lo tanto, la tecnología número uno para aprender, si lo dice en serio con React .