Saya memiliki objek eksternal (ke komponen) yang dapat diamati yang ingin saya dengarkan untuk perubahan. Ketika objek diperbarui itu memancarkan perubahan peristiwa, dan kemudian saya ingin rerender komponen ketika ada perubahan yang terdeteksi.

Dengan top-level React.renderhal ini dimungkinkan, tetapi di dalam komponen itu tidak berfungsi (yang masuk akal karena rendermetode hanya mengembalikan objek).

Berikut contoh kode:

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

Mengklik tombol panggilan internal this.render(), tetapi bukan itu yang sebenarnya menyebabkan rendering terjadi (Anda dapat melihat ini dalam tindakan karena teks yang dibuat oleh {Math.random()}tidak berubah). Namun, jika saya hanya menelepon, this.setState()bukan this.render(), itu berfungsi dengan baik.

Jadi saya kira pertanyaan saya adalah: apakah komponen Bereaksi harus memiliki status untuk melakukan rerender? Apakah ada cara untuk memaksa komponen untuk memperbarui sesuai permintaan tanpa mengubah keadaan?

Di komponen Anda, Anda dapat menelepon this.forceUpdate()untuk memaksa rerender.

Dokumentasi: https://facebook.github.io/react/docs/component-api.html

forceUpdateharus dihindari karena menyimpang dari pola pikir Bereaksi. Dokumen Bereaksi mengutip contoh kapan forceUpdatedapat digunakan:

Secara default, ketika status atau props komponen Anda berubah, komponen Anda akan dirender ulang. Namun, jika perubahan ini secara implisit (mis: data jauh di dalam suatu objek berubah tanpa mengubah objek itu sendiri) atau jika metode render Anda () bergantung pada beberapa data lain, Anda dapat memberi tahu React bahwa ia perlu menjalankan ulang render () dengan memanggil mengubah paksa().

Namun, saya ingin mengusulkan gagasan bahwa bahkan dengan benda bersarang yang dalam, forceUpdatetidak perlu. Dengan menggunakan perubahan pelacakan sumber data tidak berubah menjadi murah; perubahan akan selalu menghasilkan objek baru sehingga kita hanya perlu memeriksa apakah referensi ke objek telah berubah. Anda dapat menggunakan perpustakaan Immutable JS untuk mengimplementasikan objek data yang tidak dapat diubah ke dalam aplikasi Anda.

Biasanya Anda harus mencoba menghindari semua penggunaan forceUpdate () dan hanya membaca dari this.props dan this.state dalam render (). Ini membuat komponen Anda "murni" dan aplikasi Anda lebih sederhana dan lebih efisien. mengubah paksa()

Mengubah kunci elemen yang ingin Anda render ulang akan berfungsi. Atur prop kunci pada elemen Anda melalui keadaan dan kemudian ketika Anda ingin memperbarui setel negara untuk memiliki kunci baru.

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

Kemudian terjadi perubahan dan Anda mereset kunci

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

Saya ingin mencatat bahwa ini akan menggantikan elemen yang kuncinya berubah. Contoh di mana ini bisa berguna adalah ketika Anda memiliki bidang input file yang ingin Anda reset setelah pengunggahan gambar.

Sementara jawaban sebenarnya untuk pertanyaan OP adalah forceUpdate()saya menemukan solusi ini membantu dalam situasi yang berbeda. Saya juga ingin mencatat bahwa jika Anda menemukan diri forceUpdateAnda menggunakan Anda mungkin ingin meninjau kode Anda dan melihat apakah ada cara lain untuk melakukan sesuatu.

CATATAN 1-9-2019:

Di atas (mengubah kunci) sepenuhnya akan menggantikan elemen. Jika Anda menemukan diri Anda memperbarui kunci untuk membuat perubahan, Anda mungkin memiliki masalah di tempat lain dalam kode Anda. Menggunakan Math.random()kunci akan membuat ulang elemen dengan setiap render. Saya TIDAK akan merekomendasikan memperbarui kunci seperti ini karena bereaksi menggunakan kunci untuk menentukan cara terbaik untuk membuat ulang hal-hal.

Sebenarnya, forceUpdate()adalah satu-satunya solusi yang benar karena setState()mungkin tidak memicu re-render jika logika tambahan diterapkan shouldComponentUpdate()atau ketika itu hanya kembali false.

mengubah paksa()

Memanggil forceUpdate()akan menyebabkan render()dipanggil pada komponen, lewati shouldComponentUpdate(). lebih...

setState ()

setState()akan selalu memicu render ulang kecuali logika render kondisional diterapkan di shouldComponentUpdate(). lebih...

Kait: Bagaimana saya bisa memaksa komponen untuk merender ulang dengan kait di Bereaksi?

BTW: Apakah Anda bermutasi atau properti bersarang Anda tidak menyebar?

• Cara memperbarui properti negara bersarang di Bereaksi
• Bak pasir

Saya Dihindari forceUpdatedengan melakukan hal berikut

CARA SALAH : jangan gunakan indeks sebagai kunci

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

CARA YANG BENAR : Gunakan id data sebagai kunci, bisa berupa panduan dll

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

jadi dengan melakukan perbaikan kode seperti itu komponen Anda akan UNIK dan render secara alami

Ketika Anda ingin dua komponen Bereaksi berkomunikasi, yang tidak terikat oleh suatu hubungan (orang tua-anak), disarankan untuk menggunakan Flux atau arsitektur serupa.

Yang ingin Anda lakukan adalah mendengarkan perubahan dari toko komponen yang dapat diamati , yang menampung model dan antarmuka, dan menyimpan data yang menyebabkan render berubah seperti statepada MyComponent. Ketika toko mendorong data baru, Anda mengubah status komponen Anda, yang secara otomatis memicu render.

Biasanya Anda harus menghindari penggunaan forceUpdate(). Dari dokumentasi:

Biasanya Anda harus mencoba menghindari semua penggunaan forceUpdate () dan hanya membaca dari this.props dan this.state dalam render (). Ini membuat aplikasi Anda jauh lebih sederhana dan lebih efisien

gunakan kait atau HOC

Dengan menggunakan kait atau pola HOC (komponen pesanan lebih tinggi) , Anda dapat memiliki pembaruan otomatis saat toko Anda berubah. Ini adalah pendekatan yang sangat ringan tanpa kerangka kerja.

useStore Hooks cara untuk menangani pembaruan toko

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 menangani pembaruan toko

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

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

Cara Penggunaan

Dalam hal kait:

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

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

PASTIKAN Untuk mengekspor toko Anda sebagai singleton untuk mendapatkan manfaat dari perubahan global seperti:

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

Pendekatan ini sangat sederhana dan berfungsi untuk saya. Saya juga bekerja di tim-tim besar dan menggunakan Redux dan MobX dan menemukan itu bagus juga tetapi hanya banyak boilerplate. Saya pribadi suka pendekatan saya sendiri karena saya selalu membenci banyak kode untuk sesuatu yang sederhana ketika Anda membutuhkannya.

Jadi saya kira pertanyaan saya adalah: apakah komponen Bereaksi harus memiliki status untuk melakukan rerender? Apakah ada cara untuk memaksa komponen untuk memperbarui sesuai permintaan tanpa mengubah keadaan?

Jawaban lain telah mencoba menggambarkan bagaimana Anda bisa, tetapi intinya adalah bahwa Anda seharusnya tidak melakukannya . Bahkan solusi hacky untuk mengubah kunci tidak tepat sasaran. Kekuatan Bereaksi adalah melepaskan kendali mengelola secara manual ketika sesuatu harus diurai, dan sebaliknya hanya menyangkut diri Anda sendiri dengan bagaimana sesuatu harus dipetakan pada input. Kemudian sediakan aliran input.

Jika Anda perlu secara manual memaksa ulang, Anda hampir pasti tidak melakukan sesuatu dengan benar.

Anda bisa melakukannya dengan beberapa cara:

1. Gunakan forceUpdate()metode:

Ada beberapa gangguan yang mungkin terjadi saat menggunakan forceUpdate()metode ini. Salah satu contoh adalah bahwa ia mengabaikan shouldComponentUpdate()metode dan akan membuat kembali tampilan terlepas dari apakah shouldComponentUpdate()mengembalikan false. Karena ini menggunakan forceUpdate () harus dihindari ketika memungkinkan.

2. Melewati status ini ke setState()metode

Baris kode berikut mengatasi masalah dengan contoh sebelumnya:

this.setState(this.state);

Sebenarnya semua ini dilakukan adalah menimpa keadaan saat ini dengan keadaan saat ini yang memicu rendering ulang. Ini masih belum tentu cara terbaik untuk melakukan sesuatu, tetapi itu mengatasi beberapa gangguan yang mungkin Anda temui menggunakan metode forceUpdate ().

Ada beberapa cara untuk merender komponen Anda:

Solusi paling sederhana adalah dengan menggunakan metode forceUpdate ():

this.forceUpdate()

Satu lagi solusi adalah membuat kunci yang tidak digunakan di negara bagian (nonUsedKey) dan memanggil fungsi setState dengan pembaruan nonUsedKey ini:

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

Atau tulis ulang semua status saat ini:

this.setState(this.state);

Mengubah alat peraga juga menyediakan komponen rerender.

Untuk kelengkapan, Anda juga dapat mencapai ini dalam komponen fungsional:

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

Atau, sebagai pengait yang dapat digunakan kembali:

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

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

Harap dicatat bahwa menggunakan mekanisme pembaruan kekuatan masih merupakan praktik buruk karena bertentangan dengan mentalitas reaksi, sehingga harus tetap dihindari jika memungkinkan.

Kita dapat menggunakan this.forceUpdate () seperti di bawah ini.

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

Bagian 'Math.random' Elemen di DOM hanya akan diperbarui bahkan jika Anda menggunakan setState untuk merender ulang komponen.

Semua jawaban di sini benar melengkapi pertanyaan untuk dipahami..seperti yang kita ketahui untuk merender ulang komponen tanpa menggunakan setState ({}) adalah dengan menggunakan forceUpdate ().

Kode di atas berjalan dengan setState seperti di bawah ini.

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

Hanya balasan lain untuk mencadangkan jawaban yang diterima :-)

Bereaksi mencegah penggunaan forceUpdate()karena mereka umumnya memiliki pendekatan yang sangat "ini adalah satu-satunya cara melakukannya" menuju pemrograman fungsional. Ini bagus dalam banyak kasus, tetapi banyak pengembang Bereaksi datang dengan latar belakang OO, dan dengan pendekatan itu, sangat baik untuk mendengarkan objek yang dapat diamati.

Dan jika Anda melakukannya, Anda mungkin tahu Anda HARUS membuat ulang ketika "api" yang dapat diamati, dan karena itu, Anda HARUS menggunakan forceUpdate()dan itu sebenarnya plus yang shouldComponentUpdate()TIDAK terlibat di sini.

Alat-alat seperti MobX, yang mengambil pendekatan OO, sebenarnya melakukan ini di bawah permukaan (sebenarnya panggilan MobX render()langsung)

Saya telah menemukan yang terbaik untuk menghindari forceUpdate (). Salah satu cara untuk memaksa render ulang adalah dengan menambahkan dependensi render () pada variabel eksternal sementara dan mengubah nilai variabel itu saat dan ketika dibutuhkan.

Berikut contoh kode:

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

Sebut ini. ForceChange () saat Anda harus memaksa merender ulang.

ES6 - Saya menyertakan contoh, yang sangat membantu bagi saya:

Dalam "pernyataan singkat jika" Anda dapat melewati fungsi kosong seperti ini:

isReady ? ()=>{} : onClick

Ini tampaknya merupakan pendekatan terpendek.

()=>{}

forceUpdate(); Metode akan bekerja tetapi disarankan untuk digunakan setState();

Untuk mencapai apa yang Anda gambarkan, coba ini.forceUpdate ().

Cara lain adalah menelepon setState, DAN menjaga status:

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

forceUpdate (), tetapi setiap kali saya pernah mendengar seseorang membicarakannya, sudah ditindaklanjuti dengan Anda jangan pernah menggunakan ini.

Anda dapat menggunakan forceUpdate () untuk memeriksa detail lebih lanjut ( forceUpdate () ).