Tengo un objeto externo (al componente) observable en el que quiero escuchar los cambios. Cuando el objeto se actualiza, emite eventos de cambio, y luego quiero volver a procesar el componente cuando se detecta cualquier cambio.

Con un nivel superior React.renderesto ha sido posible, pero dentro de un componente no funciona (lo cual tiene sentido ya que el rendermétodo solo devuelve un objeto).

Aquí hay un ejemplo de código:

export default class MyComponent extends React.Component {

  handleButtonClick() {
    this.render();
  }

  render() {
    return (
      <div>
        {Math.random()}
        <button onClick={this.handleButtonClick.bind(this)}>
          Click me
        </button>
      </div>
    )
  }
}

Al hacer clic internamente en el botón se llama this.render(), pero eso no es lo que realmente hace que se produzca la representación (puede ver esto en acción porque el texto creado por {Math.random()}no cambia). Sin embargo, si simplemente llamo en this.setState()lugar de this.render(), funciona bien.

Entonces, supongo que mi pregunta es: ¿los componentes React deben tener un estado para volver a reproducir? ¿Hay alguna forma de obligar al componente a actualizarse a demanda sin cambiar el estado?

En su componente, puede llamar this.forceUpdate()para forzar una rendición.

Documentación: https://facebook.github.io/react/docs/component-api.html

forceUpdatedebe evitarse porque se desvía de una mentalidad React. Los documentos de React citan un ejemplo de cuándo forceUpdatepodría usarse:

Por defecto, cuando el estado o los accesorios de su componente cambian, su componente se volverá a representar. Sin embargo, si estos cambian implícitamente (por ejemplo: los datos profundos dentro de un objeto cambian sin cambiar el objeto mismo) o si su método render () depende de otros datos, puede decirle a React que necesita volver a ejecutar render () llamando forceUpdate ().

Sin embargo, me gustaría proponer la idea de que incluso con objetos profundamente anidados, forceUpdatees innecesario. Al usar una fuente de datos inmutable, los cambios de seguimiento se vuelven baratos; un cambio siempre dará como resultado un nuevo objeto, por lo que solo necesitamos verificar si la referencia al objeto ha cambiado. Puede usar la biblioteca Immutable JS para implementar objetos de datos inmutables en su aplicación.

Normalmente, debe intentar evitar todos los usos de forceUpdate () y solo leer de this.props y this.state en render (). Esto hace que su componente sea "puro" y que su aplicación sea mucho más simple y eficiente. forceUpdate ()

Cambiar la clave del elemento que desea volver a representar funcionará. Establezca la clave de apoyo en su elemento a través del estado y luego cuando desee actualizar el estado establecido para tener una nueva clave.

<Element key={this.state.key} /> 

Luego se produce un cambio y restablece la clave

this.setState({ key: Math.random() });

Quiero señalar que esto reemplazará el elemento en el que está cambiando la clave. Un ejemplo de dónde esto podría ser útil es cuando tiene un campo de entrada de archivo que desea restablecer después de cargar una imagen.

Si bien la verdadera respuesta a la pregunta del OP sería forceUpdate()que he encontrado esta solución útil en diferentes situaciones. También quiero señalar que si te encuentras usando forceUpdatees posible que desees revisar tu código y ver si hay otra forma de hacer las cosas.

NOTA 1-9-2019:

Lo anterior (cambiando la clave) reemplazará completamente el elemento. Si te encuentras actualizando la clave para que los cambios sucedan, probablemente tengas un problema en otro lugar de tu código. Usar Math.random()in key recreará el elemento con cada render. NO recomendaría actualizar la clave de esta manera, ya que react utiliza la clave para determinar la mejor manera de volver a representar las cosas.

En realidad, forceUpdate()es la única solución correcta, ya que setState()podría no desencadenar una nueva representación si se implementa una lógica adicional shouldComponentUpdate()o simplemente cuando regresa false.

forceUpdate ()

Llamar forceUpdate()hará render()que se llame al componente, omitiendo shouldComponentUpdate(). más...

setState ()

setState()siempre activará una nueva representación a menos que se implemente una lógica de representación condicional shouldComponentUpdate(). más...

Ganchos: ¿Cómo puedo forzar que el componente se vuelva a renderizar con ganchos en React?

Por cierto: ¿estás mutando o tus propiedades anidadas no se propagan?

• Cómo actualizar las propiedades de estado anidado en React
• Salvadera

Evité forceUpdatehaciendo lo siguiente

CAMINO INCORRECTO : no utilice el índice como clave

this.state.rows.map((item, index) =>
   <MyComponent cell={item} key={index} />
)

MANERA CORRECTA : use la identificación de datos como clave, puede ser una guía, etc.

this.state.rows.map((item) =>
   <MyComponent item={item} key={item.id} />
)

entonces, al hacer tal mejora de código, su componente será ÚNICO y se renderizará naturalmente

Cuando desee que se comuniquen dos componentes React, que no están vinculados por una relación (padre-hijo), es recomendable utilizar Flux o arquitecturas similares.

Lo que desea hacer es escuchar los cambios del almacén de componentes observables , que contiene el modelo y su interfaz, y guardar los datos que hacen que el render cambie como stateen MyComponent. Cuando la tienda envía los nuevos datos, cambia el estado de su componente, lo que activa automáticamente el renderizado.

Normalmente debes tratar de evitar el uso forceUpdate(). De la documentación:

Normalmente, debe intentar evitar todos los usos de forceUpdate () y solo leer de this.props y this.state en render (). Esto hace que su aplicación sea mucho más simple y eficiente

use ganchos o HOC elija

Usando ganchos o el patrón HOC (componente de orden superior) , puede tener actualizaciones automáticas cuando cambian sus tiendas. Este es un enfoque muy ligero sin un marco.

useStore Hooks forma de manejar las actualizaciones de la tienda

interface ISimpleStore {
  on: (ev: string, fn: () => void) => void;
  off: (ev: string, fn: () => void) => void;
}

export default function useStore<T extends ISimpleStore>(store: T) {
  const [storeState, setStoreState] = useState({store});
  useEffect(() => {
    const onChange = () => {
      setStoreState({store});
    }
    store.on('change', onChange);
    return () => {
      store.off('change', onChange);
    }
  }, []);
  return storeState.store;
}

withStores HOC maneja las actualizaciones de la tienda

export default function (...stores: SimpleStore[]) {
  return function (WrappedComponent: React.ComponentType<any>) {
    return class WithStore extends PureComponent<{}, {lastUpdated: number}> {
      constructor(props: React.ComponentProps<any>) {
        super(props);
        this.state = {
          lastUpdated: Date.now(),
        };
        this.stores = stores;
      }

      private stores?: SimpleStore[];

      private onChange = () => {
        this.setState({lastUpdated: Date.now()});
      };

      componentDidMount = () => {
        this.stores &&
          this.stores.forEach((store) => {
            // each store has a common change event to subscribe to
            store.on('change', this.onChange);
          });
      };

      componentWillUnmount = () => {
        this.stores &&
          this.stores.forEach((store) => {
            store.off('change', this.onChange);
          });
      };

      render() {
        return (
          <WrappedComponent
            lastUpdated={this.state.lastUpdated}
            {...this.props}
          />
        );
      }
    };
  };
}

Clase SimpleStore

import AsyncStorage from '@react-native-community/async-storage';
import ee, {Emitter} from 'event-emitter';

interface SimpleStoreArgs {
  key?: string;
  defaultState?: {[key: string]: any};
}

export default class SimpleStore {
  constructor({key, defaultState}: SimpleStoreArgs) {
    if (key) {
      this.key = key;
      // hydrate here if you want w/ localState or AsyncStorage
    }
    if (defaultState) {
      this._state = {...defaultState, loaded: false};
    } else {
      this._state = {loaded: true};
    }
  }
  protected key: string = '';
  protected _state: {[key: string]: any} = {};
  protected eventEmitter: Emitter = ee({});
  public setState(newState: {[key: string]: any}) {
    this._state = {...this._state, ...newState};
    this.eventEmitter.emit('change');
    if (this.key) {
      // store on client w/ localState or AsyncStorage
    }
  }
  public get state() {
    return this._state;
  }
  public on(ev: string, fn:() => void) {
    this.eventEmitter.on(ev, fn);
  }
  public off(ev: string, fn:() => void) {
    this.eventEmitter.off(ev, fn);
  }
  public get loaded(): boolean {
    return !!this._state.loaded;
  }
}

Cómo utilizar

En el caso de ganchos:

// use inside function like so
const someState = useStore(myStore);
someState.myProp = 'something';

En el caso de HOC:

// inside your code get/set your store and stuff just updates
const val = myStore.myProp;
myOtherStore.myProp = 'something';

// return your wrapped component like so
export default withStores(myStore)(MyComponent);

ASEGÚRESE de exportar sus tiendas como un singleton para obtener el beneficio del cambio global de esta manera:

class MyStore extends SimpleStore {
  public get someProp() {
    return this._state.someProp || '';
  }
  public set someProp(value: string) {
    this.setState({...this._state, someProp: value});
  }
}
// this is a singleton
const myStore = new MyStore();
export {myStore};

Este enfoque es bastante simple y funciona para mí. También trabajo en equipos grandes y uso Redux y MobX y encuentro que también son buenos, pero solo un montón de repeticiones. Personalmente, me gusta mi propio enfoque porque siempre odié mucho código para algo que puede ser simple cuando lo necesitas.

Entonces, supongo que mi pregunta es: ¿los componentes React deben tener un estado para volver a reproducir? ¿Hay alguna forma de obligar al componente a actualizarse a demanda sin cambiar el estado?

Las otras respuestas han tratado de ilustrar cómo podrías hacerlo, pero el punto es que no deberías . Incluso la solución hacky de cambiar la clave pierde el punto. El poder de React es ceder el control de administrar manualmente cuándo algo debería renderizarse, y en cambio solo preocuparse por cómo algo debería mapearse en las entradas. Luego suministrar flujo de entradas.

Si necesita forzar manualmente el re-renderizado, seguramente no está haciendo algo bien.

Podrías hacerlo de dos maneras:

1. Use el forceUpdate()método:

Hay algunos problemas técnicos que pueden ocurrir al usar el forceUpdate()método. Un ejemplo es que ignora el shouldComponentUpdate()método y volverá a representar la vista independientemente de si shouldComponentUpdate()devuelve falso. Debido a esto, se debe evitar forceUpdate () cuando sea posible.

2. Pasando this.state al setState()método

La siguiente línea de código supera el problema con el ejemplo anterior:

this.setState(this.state);

Realmente, todo lo que está haciendo es sobrescribir el estado actual con el estado actual que desencadena una nueva representación. Todavía no es necesariamente la mejor manera de hacer las cosas, pero supera algunos de los problemas técnicos que puede encontrar utilizando el método forceUpdate ().

Hay algunas formas de volver a procesar su componente:

La solución más simple es usar el método forceUpdate ():

this.forceUpdate()

Una solución más es crear una clave no utilizada en el estado (nonUsedKey) y llamar a la función setState con la actualización de esta nonUsedKey:

this.setState({ nonUsedKey: Date.now() } );

O reescribir todo el estado actual:

this.setState(this.state);

El cambio de utilería también proporciona la recuperación de componentes.

Para completar, también puede lograr esto en componentes funcionales:

const [, updateState] = useState();
const forceUpdate = useCallback(() => updateState({}), []);
// ...
forceUpdate();

O, como un gancho reutilizable:

const useForceUpdate = () => {
  const [, updateState] = useState();
  return useCallback(() => updateState({}), []);
}
// const forceUpdate = useForceUpdate();

Ver: https://stackoverflow.com/a/53215514/2692307

Tenga en cuenta que usar un mecanismo de actualización forzada sigue siendo una mala práctica, ya que va en contra de la mentalidad de reacción, por lo que aún debe evitarse si es posible.

Podemos usar this.forceUpdate () como se muestra a continuación.

       class MyComponent extends React.Component {



      handleButtonClick = ()=>{
          this.forceUpdate();
     }


 render() {

   return (
     <div>
      {Math.random()}
        <button  onClick={this.handleButtonClick}>
        Click me
        </button>
     </div>
    )
  }
}

 ReactDOM.render(<MyComponent /> , mountNode);

La parte Element 'Math.random' en el DOM solo se actualiza incluso si usa setState para volver a representar el componente.

Todas las respuestas aquí son correctas, complementando la pregunta para la comprensión ... ya que sabemos que volver a representar un componente sin usar setState ({}) es usando forceUpdate ().

El código anterior se ejecuta con setState como se muestra a continuación.

 class MyComponent extends React.Component {



             handleButtonClick = ()=>{
                this.setState({ });
              }


        render() {
         return (
  <div>
    {Math.random()}
    <button  onClick={this.handleButtonClick}>
      Click me
    </button>
  </div>
)
  }
 }

ReactDOM.render(<MyComponent /> , mountNode);

Solo otra respuesta para respaldar la respuesta aceptada :-)

React desalienta el uso de forceUpdate()porque generalmente tienen un enfoque muy "esta es la única forma de hacerlo" hacia la programación funcional. Esto está bien en muchos casos, pero muchos desarrolladores de React vienen con un fondo OO, y con ese enfoque, está perfectamente bien escuchar un objeto observable.

Y si lo hace, probablemente sepa que DEBE volver a renderizar cuando el "fuego" observable, y como tal, DEBE usarlo forceUpdate()y en realidad es un plus que shouldComponentUpdate()NO está involucrado aquí.

Herramientas como MobX, que adopta un enfoque OO, en realidad está haciendo esto debajo de la superficie (en realidad, MobX llama render()directamente)

He encontrado que es mejor evitar forceUpdate (). Una forma de forzar el re-render es agregar dependencia de render () en una variable externa temporal y cambiar el valor de esa variable cuando sea necesario.

Aquí hay un ejemplo de código:

class Example extends Component{
   constructor(props){
      this.state = {temp:0};

      this.forceChange = this.forceChange.bind(this);
   }

   forceChange(){
      this.setState(prevState => ({
          temp: prevState.temp++
      })); 
   }

   render(){
      return(
         <div>{this.state.temp &&
             <div>
                  ... add code here ...
             </div>}
         </div>
      )
   }
}

Llame this.forceChange () cuando necesite forzar el re-render.

ES6 - Incluyo un ejemplo que me fue útil:

En una "instrucción if corta" puede pasar una función vacía como esta:

isReady ? ()=>{} : onClick

Este parece ser el enfoque más corto.

()=>{}

forceUpdate(); el método funcionará pero es aconsejable usar setState();

Para lograr lo que está describiendo, intente this.forceUpdate ().

Otra manera está llamando setState, y conserva el estado de:

this.setState(prevState=>({...prevState}));

forceUpdate (), pero cada vez que escuché a alguien hablar sobre eso, se le ha seguido y nunca debe usar esto.

Puede usar forceUpdate () para ver más detalles ( forceUpdate () ).