Apakah kaedah render () dalam komponen kelas React?

Apakah kaedah render () dalam komponen kelas React?

Kaedah render() adalah bahagian penting dari komponen kelas React. Ia adalah kaedah yang diperlukan bahawa setiap komponen kelas mesti dilaksanakan. Fungsi utama kaedah render() adalah untuk menerangkan komponen yang harus dipaparkan, berdasarkan keadaan dan prop semasa. Apabila keadaan atau prop perubahan komponen, React akan memanggil kaedah render() untuk menentukan sama ada UI perlu dikemas kini.

Berikut adalah contoh asas komponen kelas dengan kaedah render() :

 <code class="javascript">import React, { Component } from 'react'; class ExampleComponent extends Component { render() { return <div>Hello, {this.props.name}!</div>; } } export default ExampleComponent;</code>

Dalam contoh ini, kaedah render() mengembalikan JSX yang bertindak balas akan digunakan untuk membina dan mengemas kini DOM. Kaedah render() dipanggil setiap kali keadaan atau prop komponen berubah, yang membolehkan komponen untuk membuat semula dengan data baru.

Apakah kaedah render () pulangan dalam React?

Kaedah render() dalam React mesti mengembalikan salah satu jenis berikut:

1. React Elements : Ini boleh dibuat melalui JSX atau dengan memanggil React.createElement() . Contohnya:

    <code class="javascript">return <div>Hello, World!</div>;</code>

   Salin selepas log masuk

2. Array dan serpihan : Ini membolehkan anda mengembalikan pelbagai elemen. Contohnya:

    <code class="javascript">return [ <li key="A">First item</li>, <li key="B">Second item</li>, <li key="C">Third item</li> ];</code>

   Salin selepas log masuk

   Atau menggunakan serpihan:

    <code class="javascript">return ( <react.fragment> <li>First item</li> <li>Second item</li> <li>Third item</li> </react.fragment> );</code>

   Salin selepas log masuk

3. Portal : Ini membolehkan kanak -kanak menjadi subtree DOM yang berbeza. Contohnya:

    <code class="javascript">return ReactDOM.createPortal( <div>This is rendered in a different part of the DOM</div>, document.getElementById('modal-root') );</code>

   Salin selepas log masuk

4. Rentetan dan nombor : Ini diberikan sebagai nod teks. Contohnya:

    <code class="javascript">return 'Hello, World!';</code>

   Salin selepas log masuk

5. Booleans atau Null : Ini mengakibatkan tiada apa yang diberikan. Contohnya:

    <code class="javascript">return null;</code>

   Salin selepas log masuk

Adalah penting untuk diperhatikan bahawa kaedah render() harus murni, bermakna ia tidak boleh mengubah keadaan komponen, dan tidak harus secara langsung berinteraksi dengan penyemak imbas. Sebarang kesan sampingan harus diuruskan melalui kaedah kitaran hayat atau cangkuk.

Bagaimanakah kaedah render () berbeza dalam komponen fungsi?

Komponen fungsi dalam React tidak menggunakan kaedah render() sebagai komponen kelas. Sebaliknya, komponen fungsi sendiri bersamaan dengan kaedah render() dalam komponen kelas. Mereka adalah fungsi murni yang menerima props sebagai argumen dan kembali elemen reaksi yang menerangkan apa yang perlu dipaparkan.

Berikut adalah contoh komponen fungsi:

 <code class="javascript">import React from 'react'; function ExampleComponent(props) { return <div>Hello, {props.name}!</div>; } export default ExampleComponent;</code>

Perbezaan utama adalah:

• Sintaks : Komponen fungsi menggunakan sintaks fungsi, manakala komponen kelas menggunakan sintaks kelas.
• Negeri dan kitaran hayat : Komponen kelas boleh menggunakan kaedah kitaran hayat dan menguruskan keadaan tempatan dengan this.state . Komponen fungsi, sebelum pengenalan cangkuk, tidak dapat menguruskan keadaan tempatan atau menggunakan kaedah kitaran hayat. Dengan cangkuk (diperkenalkan dalam React 16.8), komponen fungsi boleh menguruskan keadaan negeri dan kitaran hayat melalui cangkuk useState dan useEffect .
• Prestasi : Komponen fungsi boleh menjadi lebih ringkas dan berpotensi lebih berprestasi, terutamanya apabila menggunakan cangkuk, kerana mereka mengelakkan overhead contoh kelas.

Berikut adalah contoh menggunakan cangkuk dalam komponen fungsi:

 <code class="javascript">import React, { useState, useEffect } from 'react'; function ExampleComponent() { const [count, setCount] = useState(0); useEffect(() => { document.title = `You clicked ${count} times`; }); return ( <div> <p>You clicked {count} times</p> <button onclick="{()"> setCount(count 1)}>Click me</button> </div> ); } export default ExampleComponent;</code>

Bolehkah kaedah kitaran hayat digunakan dalam kaedah render ()?

Tidak, kaedah kitaran hayat tidak boleh digunakan dalam kaedah render() . Kaedah render() hendaklah murni dan bebas dari kesan sampingan. Kaedah kitaran hayat, seperti componentDidMount , componentDidUpdate , dan componentWillUnmount , direka untuk mengendalikan kesan sampingan dan harus digunakan di luar kaedah render() .

Sebagai contoh, jika anda ingin mengambil data apabila komponen dipasang, anda akan menggunakan componentDidMount dalam komponen kelas:

 <code class="javascript">import React, { Component } from 'react'; class ExampleComponent extends Component { constructor(props) { super(props); this.state = { data: null }; } componentDidMount() { // Fetch data here fetch('/api/data') .then(response => response.json()) .then(data => this.setState({ data })); } render() { return ( <div> {this.state.data ? ( <div>Data: {this.state.data}</div> ) : ( <div>Loading...</div> )} </div> ); } } export default ExampleComponent;</code>

Dalam komponen fungsi, anda akan menggunakan cangkuk useEffect untuk mencapai hasil yang sama:

 <code class="javascript">import React, { useState, useEffect } from 'react'; function ExampleComponent() { const [data, setData] = useState(null); useEffect(() => { // Fetch data here fetch('/api/data') .then(response => response.json()) .then(data => setData(data)); }, []); // Empty dependency array means this effect runs once on mount return ( <div> {data ? <div>Data: {data}</div> : <div>Loading...</div>} </div> ); } export default ExampleComponent;</code>

Dalam kedua-dua kes, logik pengambilan data sebenar disimpan di luar kaedah render() untuk mengekalkan kesuciannya dan mencegah penahan semula yang tidak perlu.

Atas ialah kandungan terperinci Apakah kaedah render () dalam komponen kelas React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!