Artikel ini menyediakan contoh kod dan konsep peringkat tinggi dalam React.js, perpustakaan Javascript yang dibangunkan oleh jurutera Facebook untuk membina antara muka pengguna Konsep ini akan diterbitkan secara terperinci dalam artikel berikut, saya mesti mengingatkan anda bahawa jika anda seorang pakar ReactJS dan merasakan bahawa kod ini perlu diperbaiki, sila tulis kepada saya dengan cadangan anda dan saya akan mengemas kini artikel/kod ini dengan sewajarnya pada masa yang tepat
Sebelum saya terus menyiarkan beberapa contoh kod, saya mesti menyebut secara khusus: Agak sukar bagi pemula untuk mempelajari ReactJS, kerana baru-baru ini saya telah menulis kod pada AngularJS, saya perlu mengakui bahawa mereka membantu kami untuk membuat UI Terdapat perbezaan besar apabila ia berkaitan dengan kerja saya akan membuat satu lagi catatan blog membandingkan perbezaan utama antara mereka
Walau bagaimanapun, pada tahap yang tinggi, berikut ialah beberapa sebab mengapa saya mengambil laluan pembelajaran yang "lebih curam" semasa mempelajari ReactJS:
- Berorientasikan komponen: ReactJS berorientasikan komponen, yang bermaksud anda perlu menganggap elemen UI sebagai komponen. Menariknya, komponen boleh digubah. Ini bermakna komponen boleh mempunyai satu atau lebih komponen dalaman. Kod di bawah menunjukkan ini
- Sintaks JSX: Ia menggunakan sintaks JSX (seperti XML) yang menarik untuk menulis kod. Penterjemah JSX (precompiler) digunakan untuk menukar struktur sintaksis ini kepada JavaScript eksplisit
Berikut ialah beberapa konsep utama yang ditunjukkan dalam kod:
- Komponen
- Ejen Acara
- Sintaks JSX
Berikut ialah penerangan ringkas tentang perkara yang telah dilaksanakan oleh komponen
- elemen lapisan div, digunakan untuk memaparkan "Helo, nama pengguna". Seperti yang akan disebutkan dalam artikel berikut, lapisan div ini sebenarnya adalah komponen "HelloText"
Begini cara ia direka bentuk. Selain itu, sila cari kod yang mewakili konsep di bawah.
SayHello: Komponen boleh gubah
- getInitialState
- handleNameSubmit
- render (ini adalah antara muka yang diperlukan, komponen perlu mentakrifkan render untuk memberitahu React cara untuk memaparkan komponen sebagai tindak balas)
/ // This is the parent component comprising of two inner components // One of the component is UserName which is used to allow user to enter their name // Other component is HelloText which displays the text such as Hello, World // var SayHello = React.createClass({ // This is used to set the state, "data" which is // accessed later in HelloText component to display the updated state // getInitialState: function() { return {data: 'World'} }, // It is recommended to capture events happening with any children // at the parent level and set the new state that updates the children appropriately handleNameSubmit: function(name) { this.setState({data: name}); }, // Render method which is comprised of two components such as UserName and HelloText // render: function() { return( <div> <UserName onNameSubmit={this.handleNameSubmit}/> <HelloText data={this.state.data}/> </div> ); } });
Komponen Nama Pengguna
Komponen Nama Pengguna mempunyai dua kaedah berikut:
- handleChange: digunakan untuk menangkap acara onChange
- render: digunakan untuk memaparkan komponen
var UserName = React.createClass({ handleChange: function() { var username = this.refs.username.getDOMNode().value.trim(); this.props.onNameSubmit({username: username }); this.refs.username.getDOMNode().value = ''; return false; }, render: function() { return( <form role="form" onChange={this.handleChange}> <div className="input-group input-group-lg"> <input type="text" className="form-control col-md-8" placeholder="Type Your Name" ref="username"/> </div> </form> ); } });
Komponen HelloText
Komponen HelloText hanya mempunyai satu kaedah untuk memaparkan komponen
render:包含了展示HelloText组件内容的代码 var HelloText = React.createClass({ render: function() { return ( <div> <h3 id="Hello-this-props-data">Hello, {this.props.data}</h3> </div> ); } });
halaman hello-reactjs github. Sila berasa bebas untuk memberi komen atau memberi cadangan.

在react中,canvas用于绘制各种图表、动画等;可以利用“react-konva”插件使用canvas,该插件是一个canvas第三方库,用于使用React操作canvas绘制复杂的画布图形,并提供了元素的事件机制和拖放操作的支持。

在react中,antd是基于Ant Design的React UI组件库,主要用于研发企业级中后台产品;dva是一个基于redux和“redux-saga”的数据流方案,内置了“react-router”和fetch,可理解为应用框架。

React不是双向数据流,而是单向数据流。单向数据流是指数据在某个节点被改动后,只会影响一个方向上的其他节点;React中的表现就是数据主要通过props从父节点传递到子节点,若父级的某个props改变了,React会重渲染所有子节点。

因为在react中需要利用到webpack,而webpack依赖nodejs;webpack是一个模块打包机,在执行打包压缩的时候是依赖nodejs的,没有nodejs就不能使用webpack,所以react需要使用nodejs。

在react中,forceupdate()用于强制使组件跳过shouldComponentUpdate(),直接调用render(),可以触发组件的正常生命周期方法,语法为“component.forceUpdate(callback)”。

react是组件化开发;组件化是React的核心思想,可以开发出一个个独立可复用的小组件来构造应用,任何的应用都会被抽象成一颗组件树,组件化开发也就是将一个页面拆分成一个个小的功能模块,每个功能完成自己这部分独立功能。

react与vue的虚拟dom没有区别;react和vue的虚拟dom都是用js对象来模拟真实DOM,用虚拟DOM的diff来最小化更新真实DOM,可以减小不必要的性能损耗,按颗粒度分为不同的类型比较同层级dom节点,进行增、删、移的操作。

react和reactdom的区别是:ReactDom只做和浏览器或DOM相关的操作,例如“ReactDOM.findDOMNode()”操作;而react负责除浏览器和DOM以外的相关操作,ReactDom是React的一部分。


Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

MantisBT
Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.

Dreamweaver CS6
Alat pembangunan web visual

DVWA
Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini
