javascript - example - react vs angular

¿Cuál es el propósito de tener funciones como componentWillMount en React.js?

Question

He estado escribiendo componentes en React.js recientemente. Nunca he tenido que usar métodos como componentWillMount y componentDidMount .

render es indispensable. getInitialState y otros métodos de ayuda que escribí también son útiles. Pero no los dos métodos de ciclo de vida antes mencionados.

Mi conjetura actual es que se utilizan para la depuración? Puedo consolarme.loguear dentro de ellos:

componentWillMount: function() {
  console.log(''component currently mounting'');
},

componentDidMount: function() {
  console.log(''component has mounted'');
} 

¿Existen otros usos?

Answer 1

¿Por qué reaccionar con los métodos del ciclo de vida?

Intentar usar una biblioteca de terceros (Ex D3.js) con React Component

class Example extends React.component{
  constructor(){
    // init state
    // will be called only once
  }  
  componentWillMount(){
    // will be called only once
    // will not be triggered when re-rendering
    // usually will fetch data that is needed in order 
    // to render properly from other API
  }
  shouldComponentUpdate(){
      return false
      // will not re-render itself after componentDidMount(){}
  }
  render(){
    return (
      <div id="chart"></div>
    )
  }
  componentDidMount(){
    d3.select(".chart")
      .selectAll("p")
      // d3.js ........
      // d3.js ........
      // Usually, this will trigger React to re-render itself,
      // but this time will not because we have set 
      // shouldComponentUpdate to false
  }
}

¿Por qué React quiere hacer esto?

Dado que la representación de DOM es una operación costosa, React usa la capa de DOM virtual para actualizar solo los DOM / DOM que son / son diferentes del estado anterior.

Answer 2

En mi proyecto, que es una herramienta de tablero, he usado componentDidMount ().

En la página de inicio, los paneles guardados anteriormente aparecen en la barra lateral. Realizo una llamada ajax dentro de componentDidMount () de la página de inicio de representación de componentes, para obtener una lista de cuadros de mandos de forma asíncrona después de que la página se haya procesado.

Answer 3

Este es un ejemplo de una aplicación web isomorfa que utiliza componentWillMount : https://github.com/coodoo/react-redux-isomorphic-example

Sin embargo, estoy 99% seguro de que ejecuta el código dentro de componentWillMount sin ninguna razón en el lado del servidor (creo que usar componentDidMount para garantizar que solo se ejecutaría en el lado del cliente tendría más sentido) ya que el código que garantiza que las promesas de recuperación son cumplido antes de renderizar la página está en server.js no dentro de los componentes individuales.

Hay una discusión sobre la búsqueda asíncrona por componente aquí: https://github.com/facebook/react/issues/1739 Por lo que puedo decir, no hay un buen caso de uso para componentWillMount en lo que respecta al isomorfismo al menos .

Answer 4

componentDidMount es útil si desea usar algunos complementos de JavaScript que no son React. Por ejemplo, hay una falta de un buen selector de fecha en React. Pickaday es hermoso y simplemente funciona de la caja. Así que mi componente DateRangeInput ahora está usando Pickaday para la entrada de fecha de inicio y finalización y lo conecté así:

  componentDidMount: function() {
    new Pikaday({
      field: React.findDOMNode(this.refs.start),
      format: ''MM/DD/YYYY'',
      onSelect: this.onChangeStart
    });

    new Pikaday({
      field: React.findDOMNode(this.refs.end),
      format: ''MM/DD/YYYY'',
      onSelect: this.onChangeEnd
    });
  },

El DOM necesita ser procesado para que Pikaday se conecte a él y el enlace componentDidMount permite conectarse a ese evento exacto.

componentWillMount es útil cuando quiere hacer algo programáticamente justo antes de que el componente se monte. Un ejemplo en una base de código en la que estoy trabajando es una mezcla que tiene un montón de código que de otra manera se duplicaría en varios componentes del menú. componentWillMount se utiliza para establecer el estado de un atributo compartido específico. Otra forma en componentWillMount podría utilizar componentWillMount es establecer un comportamiento de la bifurcación de componentes por prop (s):

  componentWillMount() {
    let mode;
    if (this.props.age > 70) {
      mode = ''old'';
    } else if (this.props.age < 18) {
      mode = ''young'';
    } else {
      mode = ''middle'';
    }
    this.setState({ mode });
  }

Answer 5

componentDidMount solo se ejecuta una vez y en el lado del cliente. Esto es importante, especialmente si está escribiendo una aplicación isomórfica (se ejecuta tanto en el cliente como en el servidor). Puede usar componentDidMount para realizar tareas que requieren que tenga acceso a la ventana o al DOM.

De la página de Facebook de React

If you want to integrate with other JavaScript frameworks, set timers using setTimeout or setInterval, or send AJAX requests, perform those operations in this method.

componentWillMount tiene menos casos de uso (realmente no lo uso), pero se diferencia en que se ejecuta tanto en el lado del cliente como en el del servidor. Probablemente no quiera poner escuchas de eventos o manipulaciones de DOM aquí, ya que intentará ejecutarse en el servidor sin ninguna razón.