Eu tenho um objeto observável externo (ao componente) no qual desejo escutar alterações. Quando o objeto é atualizado, ele emite eventos de alteração e desejo renderizar novamente o componente quando qualquer alteração for detectada.

Com um nível superior, React.renderisso foi possível, mas dentro de um componente não funciona (o que faz algum sentido, pois o rendermétodo retorna um objeto).

Aqui está um exemplo 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>
    )
  }
}

Clicar no botão chama internamente this.render(), mas não é isso que realmente faz a renderização (você pode ver isso em ação porque o texto criado por {Math.random()}não muda). No entanto, se eu simplesmente ligar em this.setState()vez de this.render(), funciona bem.

Portanto, acho que minha pergunta é: os componentes do React precisam ter um estado para serem renderizados novamente? Existe uma maneira de forçar o componente a atualizar sob demanda sem alterar o estado?

No seu componente, você pode ligar this.forceUpdate()para forçar uma nova renderização.

Documentação: https://facebook.github.io/react/docs/component-api.html

forceUpdatedeve ser evitado porque se desvia de uma mentalidade de reagir. Os documentos do React citam um exemplo de quando forceUpdatepode ser usado:

Por padrão, quando o estado ou os props do seu componente são alterados, ele será renderizado novamente. No entanto, se estes forem alterados implicitamente (por exemplo: dados profundos em um objeto são alterados sem alterar o objeto em si) ou se o método render () depende de outros dados, você pode dizer ao React que ele precisa executar novamente o render () chamando forçar atualização().

No entanto, gostaria de propor a idéia de que mesmo com objetos profundamente aninhados, forceUpdateé desnecessário. Ao usar uma fonte de dados imutável, as alterações de rastreamento ficam baratas; uma mudança sempre resultará em um novo objeto, portanto, precisamos apenas verificar se a referência ao objeto foi alterada. Você pode usar a biblioteca JS imutável para implementar objetos de dados imutáveis ​​em seu aplicativo.

Normalmente você deve tentar evitar todos os usos de forceUpdate () e ler apenas this.props e this.state em render (). Isso torna seu componente "puro" e seu aplicativo muito mais simples e mais eficiente. forçar atualização()

Alterar a chave do elemento que você deseja renderizar novamente funcionará. Defina o suporte de chave em seu elemento via estado e, em seguida, quando desejar atualizar o estado definido para ter uma nova chave.

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

Em seguida, ocorre uma alteração e você redefine a chave

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

Quero observar que isso substituirá o elemento em que a chave está sendo alterada. Um exemplo de onde isso pode ser útil é quando você tem um campo de entrada de arquivo que deseja redefinir após o upload de uma imagem.

Embora a verdadeira resposta à pergunta do OP fosse forceUpdate(), achei esta solução útil em diferentes situações. Também quero observar que, se você estiver usando, forceUpdatepoderá revisar seu código e verificar se há outra maneira de fazer as coisas.

NOTA 1-9-2019:

O acima (alterar a chave) substituirá completamente o elemento. Se você estiver atualizando a chave para fazer as alterações, provavelmente há um problema em outro lugar no seu código. O uso Math.random()da chave recriará o elemento a cada renderização. Eu NÃO recomendaria atualizar a chave assim, pois o React usa a chave para determinar a melhor maneira de renderizar novamente as coisas.

Na verdade, forceUpdate()é a única solução correta, pois setState()pode não acionar uma nova renderização se lógica adicional for implementada shouldComponentUpdate()ou quando ela simplesmente retornar false.

forçar atualização()

A chamada forceUpdate()fará com render()que o componente seja chamado, pulando shouldComponentUpdate(). Mais...

setState ()

setState()sempre acionará uma nova renderização, a menos que a lógica de renderização condicional seja implementada shouldComponentUpdate(). Mais...

Ganchos: como forçar o componente a renderizar novamente com ganchos no React?

BTW: Você está mudando de estado ou suas propriedades aninhadas não se propagam?

• Como atualizar propriedades de estado aninhado no React
• Caixa de areia

Evitei forceUpdatefazendo o seguinte

MANEIRA ERRADA : não use o índice como chave

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

MANEIRA CORRETA : Use a identificação de dados como chave, pode ser algum guia, etc.

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

portanto, ao fazer esse aprimoramento de código, seu componente será ÚNICO e renderizará naturalmente

Quando você deseja que dois componentes do React se comuniquem, que não estão vinculados a um relacionamento (pai-filho), é recomendável usar o Flux ou arquiteturas similares.

O que você deseja fazer é ouvir as alterações do armazenamento de componentes observáveis , que mantém o modelo e sua interface, e salvar os dados que fazem com que a renderização seja alterada como stateem MyComponent. Quando a loja envia os novos dados, você altera o estado do seu componente, que aciona automaticamente a renderização.

Normalmente você deve tentar evitar o uso forceUpdate(). A partir da documentação:

Normalmente você deve tentar evitar todos os usos de forceUpdate () e ler apenas this.props e this.state em render (). Isso torna seu aplicativo muito mais simples e mais eficiente

use ganchos ou HOC faça a sua escolha

Usando ganchos ou o padrão HOC (componente de ordem superior) , você pode ter atualizações automáticas quando suas lojas mudarem. Essa é uma abordagem muito leve, sem uma estrutura.

useStore Hooks para lidar com as atualizações da loja

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;
}

atualizações de armazenamento de manipulador do withStores HOC

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}
          />
        );
      }
    };
  };
}

Classe 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;
  }
}

Como usar

No caso de ganchos:

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

No caso do 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);

Certifique-se de exportar suas lojas como um singleton para obter o benefício da mudança global da seguinte forma:

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};

Essa abordagem é bastante simples e funciona para mim. Também trabalho em grandes equipes, uso o Redux e o MobX e acho que eles também são bons, mas com bastante clichê. Pessoalmente, gosto da minha própria abordagem, porque sempre odiei muito código para algo que pode ser simples quando você precisa.

Acho que minha pergunta é: os componentes do React precisam ter um estado para serem renderizados novamente? Existe uma maneira de forçar o componente a atualizar sob demanda sem alterar o estado?

As outras respostas tentaram ilustrar como você poderia, mas o ponto é que você não deveria . Até a solução hacky de mudar a chave erra o alvo. O poder do React é abrir mão do controle de gerenciar manualmente quando algo deve renderizar e, em vez disso, apenas se preocupar com o modo como algo deve mapear as entradas. Em seguida, forneça o fluxo de insumos.

Se você precisar forçar a re-renderização manualmente, quase certamente não está fazendo algo certo.

Você pode fazer isso de duas maneiras:

1. Use o forceUpdate()método:

Existem algumas falhas que podem ocorrer ao usar o forceUpdate()método. Um exemplo é que ele ignora o shouldComponentUpdate()método e renderiza novamente a exibição, independentemente de o shouldComponentUpdate()retorno ser falso. Por esse motivo, o uso de forceUpdate () deve ser evitado quando possível.

2. Passando this.state para o setState()método

A seguinte linha de código supera o problema com o exemplo anterior:

this.setState(this.state);

Realmente, tudo o que isto está fazendo é sobrescrever o estado atual pelo estado atual que aciona uma nova renderização. Essa ainda não é necessariamente a melhor maneira de fazer as coisas, mas supera algumas das falhas que você pode encontrar usando o método forceUpdate ().

Existem algumas maneiras de renderizar novamente seu componente:

A solução mais simples é usar o método forceUpdate ():

this.forceUpdate()

Mais uma solução é criar uma chave não usada no estado (nonUsedKey) e chamar a função setState com a atualização dessa nonUsedKey:

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

Ou reescreva todo o estado atual:

this.setState(this.state);

A alteração de adereços também fornece a renderização de componentes novamente.

Para garantir a integridade, você também pode conseguir isso em componentes funcionais:

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

Ou, como um gancho reutilizável:

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

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

Observe que o uso de um mecanismo de atualização de força ainda é uma prática ruim, pois contraria a mentalidade de reação, portanto, ainda deve ser evitado, se possível.

Podemos usar this.forceUpdate () como abaixo.

       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);

A parte do elemento 'Math.random' no DOM só é atualizada mesmo se você usar o setState para renderizar novamente o componente.

Todas as respostas aqui estão corretas, complementando a questão da compreensão ... como sabemos re-renderizar um componente sem usar o setState ({}), é usando o forceUpdate ().

O código acima é executado com setState como abaixo.

 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);

Apenas mais uma resposta para fazer backup da resposta aceita :-)

React desencoraja o uso de, forceUpdate()porque eles geralmente têm uma abordagem muito "esta é a única maneira de fazê-lo" em relação à programação funcional. Isso é bom em muitos casos, mas muitos desenvolvedores do React vêm com um background OO e, com essa abordagem, é perfeitamente aceitável ouvir um objeto observável.

E se o fizer, você provavelmente sabe que DEVE renderizar novamente quando o observável "disparar" e, portanto, você DEVE usar forceUpdate()e é realmente uma vantagem que shouldComponentUpdate()NÃO está envolvida aqui.

Ferramentas como MobX, que usa uma abordagem OO, estão fazendo isso na superfície (na verdade, o MobX chama render()diretamente)

Eu achei melhor evitar forceUpdate (). Uma maneira de forçar a nova renderização é adicionar a dependência de render () a uma variável externa temporária e alterar o valor dessa variável conforme e quando necessário.

Aqui está um exemplo 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>
      )
   }
}

Chame this.forceChange () quando precisar forçar a nova renderização.

ES6 - Estou incluindo um exemplo que foi útil para mim:

Em uma "declaração curta", você pode passar uma função vazia como esta:

isReady ? ()=>{} : onClick

Esta parece ser a abordagem mais curta.

()=>{}

forceUpdate(); método funcionará, mas é aconselhável usar setState();

Para realizar o que você está descrevendo, tente this.forceUpdate ().

Outra maneira está chamando setState, e preservar estado:

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

forceUpdate (), mas toda vez que ouvi alguém falar sobre isso, foi seguido por você nunca deve usar isso.

Você pode usar forceUpdate () para obter mais detalhes, verifique ( forceUpdate () ).