Apakah menggunakan async componentDidMount () bagus?

Apakah menggunakan componentDidMount()sebagai fungsi async praktik yang baik dalam Bereaksi Asli atau haruskah saya menghindarinya?

Saya perlu mendapatkan beberapa info dari AsyncStoragesaat komponen mount, tetapi satu-satunya cara saya tahu untuk membuat itu mungkin adalah membuat componentDidMount()fungsi async.

async componentDidMount() {
    let auth = await this.getAuth();
    if (auth) 
        this.checkAuth(auth);
}

Apakah ada masalah dengan itu dan apakah ada solusi lain untuk masalah ini?

Mari kita mulai dengan menunjukkan perbedaan dan menentukan bagaimana hal itu dapat menyebabkan masalah.

Berikut adalah kode componentDidMount()metode siklus hidup async dan "sync" :

// This is typescript code
componentDidMount(): void { /* do something */ }

async componentDidMount(): Promise<void> {
    /* do something */
    /* You can use "await" here */
}

Dengan melihat kode, saya dapat menunjukkan perbedaan berikut:

1. Kata asynckunci: Dalam naskah, ini hanyalah penanda kode. Itu melakukan 2 hal:
   • Paksa tipe pengembalian menjadi Promise<void>bukan void. Jika Anda secara eksplisit menentukan jenis pengembalian yang tidak menjanjikan (mis: kosong), naskah akan meludahi kesalahan Anda.
   • Memungkinkan Anda menggunakan awaitkata kunci di dalam metode.
2. Jenis pengembalian diubah dari voidmenjadiPromise<void>
   • Ini berarti Anda sekarang dapat melakukan ini:
     async someMethod(): Promise<void> { await componentDidMount(); }

3. Anda sekarang dapat menggunakan awaitkata kunci di dalam metode dan untuk sementara menghentikan eksekusi. Seperti ini:

   async componentDidMount(): Promise<void> {
       const users = await axios.get<string>("http://localhost:9001/users");
       const questions = await axios.get<string>("http://localhost:9001/questions");
   
       // Sleep for 10 seconds
       await new Promise(resolve => { setTimeout(resolve, 10000); });
   
       // This line of code will be executed after 10+ seconds
       this.setState({users, questions});
       return Promise.resolve();
   }
   

Sekarang, bagaimana mereka dapat menyebabkan masalah?

1. Kata asynckunci tersebut sama sekali tidak berbahaya.

2. Saya tidak dapat membayangkan situasi apa pun di mana Anda perlu melakukan panggilan ke componentDidMount()metode ini sehingga jenis pengembaliannya Promise<void>juga tidak berbahaya.

   Memanggil ke metode yang memiliki jenis pengembalian Promise<void>tanpa awaitkata kunci tidak akan membuat perbedaan dengan memanggil satu dengan jenis kembali void.

3. Karena tidak ada metode siklus hidup setelah componentDidMount()menunda pelaksanaannya tampaknya cukup aman. Tetapi ada gotcha.

   Katakanlah, di atas this.setState({users, questions});akan dieksekusi setelah 10 detik. Di tengah waktu tunda, yang lain ...

   this.setState({users: newerUsers, questions: newerQuestions});

   ... berhasil dieksekusi dan DOM dimutakhirkan. Hasilnya terlihat oleh pengguna. Jam terus berdetak dan 10 detik berlalu. Yang tertunda this.setState(...)kemudian akan dijalankan dan DOM akan diperbarui lagi, waktu itu dengan pengguna lama dan pertanyaan lama. Hasilnya juga akan terlihat oleh pengguna.

=> Cukup aman (saya tidak yakin 100%) untuk digunakan asyncdengan componentDidMount()metode. Saya penggemar beratnya dan sejauh ini saya belum menemukan masalah yang membuat saya sakit kepala terlalu banyak.

Pembaruan April 2020: Masalah ini tampaknya telah diperbaiki pada React 16.13.1 terbaru, lihat contoh kotak pasir ini . Terima kasih kepada @abernier karena telah menunjukkan ini.

Saya telah melakukan beberapa penelitian, dan saya telah menemukan satu perbedaan penting: Bereaksi tidak memproses kesalahan dari metode siklus hidup async.

Jadi, jika Anda menulis sesuatu seperti ini:

componentDidMount()
{
    throw new Error('I crashed!');
}

maka kesalahan Anda akan ditangkap oleh batas kesalahan , dan Anda dapat memprosesnya dan menampilkan pesan yang anggun.

Jika kita mengubah kode seperti ini:

async componentDidMount()
{
    throw new Error('I crashed!');
}

yang setara dengan ini:

componentDidMount()
{
    return Promise.reject(new Error('I crashed!'));
}

maka kesalahan Anda akan ditelan diam-diam . Malu pada Anda, Bereaksi ...

Jadi, bagaimana kita memproses kesalahan daripada? Satu-satunya cara tampaknya menjadi tangkapan eksplisit seperti ini:

async componentDidMount()
{
    try
    {
         await myAsyncFunction();
    }
    catch(error)
    {
        //...
    }
}

atau seperti ini:

componentDidMount()
{
    myAsyncFunction()
    .catch(()=>
    {
        //...
    });
}

Jika kita masih ingin kesalahan kita mencapai batas kesalahan, saya dapat memikirkan trik berikut:

1. Tangkap kesalahan, buat penangan kesalahan mengubah status komponen
2. Jika negara menunjukkan kesalahan, buang itu dari rendermetode

Contoh:

class BuggyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null };
  }

  buggyAsyncfunction(){ return Promise.reject(new Error('I crashed async!'));}

  async componentDidMount() {
    try
    {
      await this.buggyAsyncfunction();
    }
    catch(error)
    {
        this.setState({error: error});
    }
  }

  render() {
    if(this.state.error)
        throw this.state.error;

    return <h1>I am OK</h1>;
  }
}

Kode Anda baik dan sangat mudah dibaca oleh saya. Lihat artikel Dale Jefferson ini di mana ia menunjukkan componentDidMountcontoh async dan terlihat sangat bagus juga.

Tetapi beberapa orang akan mengatakan bahwa seseorang yang membaca kode dapat berasumsi bahwa Bereaksi melakukan sesuatu dengan janji yang dikembalikan.

Jadi interpretasi kode ini dan apakah itu praktik yang baik atau tidak, sangat pribadi.

Jika Anda menginginkan solusi lain, Anda bisa menggunakan janji . Sebagai contoh:

componentDidMount() {
    fetch(this.getAuth())
      .then(auth => {
          if (auth) this.checkAuth(auth)
      })
}

Ketika Anda menggunakan componentDidMounttanpa asynckata kunci, dokter mengatakan ini:

Anda dapat memanggil setState () segera di componentDidMount (). Ini akan memicu rendering tambahan, tetapi itu akan terjadi sebelum browser memperbarui layar.

Jika Anda menggunakan async componentDidMountAnda akan kehilangan kemampuan ini: render lain akan terjadi SETELAH browser memperbarui layar. Tetapi saya juga, jika Anda berpikir untuk menggunakan async, seperti mengambil data, Anda tidak dapat menghindari browser akan memperbarui layar dua kali. Di dunia lain, PAUSE componentDidMount tidak dimungkinkan sebelum browser memperbarui layar

Memperbarui:

(Bangun saya: React 16, Webpack 4, Babel 7):

Saat menggunakan Babel 7 Anda akan menemukan:

Menggunakan pola ini ...

async componentDidMount() {
    try {
        const res = await fetch(config.discover.url);
        const data = await res.json();
        console.log(data);
    } catch(e) {
        console.error(e);
    }
}

Anda akan mengalami kesalahan berikut ...

ReferenceError Uncaught: regeneratorRuntime tidak didefinisikan

Dalam hal ini Anda perlu menginstal babel-plugin-transform-runtime

https://babeljs.io/docs/en/babel-plugin-transform-runtime.html

Jika karena alasan tertentu Anda tidak ingin menginstal paket di atas (babel-plugin-transform-runtime) maka Anda ingin tetap berpegang pada pola Janji ...

componentDidMount() {
    fetch(config.discover.url)
    .then(res => res.json())
    .then(data => {
        console.log(data);
    })
    .catch(err => console.error(err));
}

Saya pikir itu baik-baik saja selama Anda tahu apa yang Anda lakukan. Tapi itu bisa membingungkan karena async componentDidMount()masih bisa berjalan setelah componentWillUnmountdijalankan dan komponen telah dilepas.

Anda mungkin juga ingin memulai tugas sinkron dan asinkron di dalam componentDidMount. Jika componentDidMountasync, Anda harus meletakkan semua kode sinkron sebelum yang pertama await. Mungkin tidak jelas bagi seseorang bahwa kode sebelum yang pertama awaitberjalan secara sinkron. Dalam hal ini, saya mungkin akan tetap componentDidMountsinkron tetapi minta metode sinkronisasi dan async.

Apakah Anda memilih async componentDidMount()vs metode componentDidMount()panggilan sinkronisasi async, Anda harus memastikan Anda membersihkan setiap pendengar atau metode async yang mungkin masih berjalan ketika komponen dilepas.

Sebenarnya, memuat async di ComponentDidMount adalah pola desain yang disarankan karena Bereaksi menjauh dari metode siklus hidup sebelumnya (componentWillMount, componentWillReceiveProps, componentWillUpdate) dan selanjutnya ke Render Async.

Posting blog ini sangat membantu dalam menjelaskan mengapa ini aman dan memberikan contoh untuk memuat async di ComponentDidMount:

https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html

Saya suka menggunakan sesuatu seperti ini

componentDidMount(){
   const result = makeResquest()
}
async makeRequest(){
   const res = await fetch(url);
   const data = await res.json();
   return data
}