React之元件簡介

2021-08-25 08:18:06 字數 1120 閱讀 5532

這一篇大概介紹一下react中的元件，那麼首先我們要了解什麼是組建。

在乙個html頁面當中所有的模組我們都可以理解為乙個元件，在react中只要被渲染出來的都是元件。例如乙個按鈕，乙個文字框，都是乙個元件，而這些元件在react中是如何具體體現的呢？下面我們就來通過**示例來介紹元件。

1. 新建乙個demo.js，然後輸入以下**

import react,  from 'react';


class


demo


extends


component 


}export default demo;
上面的**中匯入了乙個，這個是匯入react的元件類，而下面的demo繼承了component，這就表示這個類是乙個元件了，但是乙個元件必須有兩個特徵，第一就是上面說的要繼承component，第二就是在這個類裡面必須要有render() 這個函式，這個函式的作用就是用來把渲染的內容給前端的。下面的export是把demo這個元件類暴露給其他的js使用的。(注意元件類開頭字母一定要大寫，如：demo)

2. 在index.js裡面匯入剛才寫好的demo元件類，來渲染給前端，看一看具體的效果是什麼樣子的。**如下：

import react from


'react';


import reactdom from


'react-dom';


import demo from


'./demo.js';


reactdom.render(, document.getelementbyid('root'));
**中的其實就表示你好

，並且這裡必須是大寫開頭，而document.getelementbyid('root')這個表示剛才的元件渲染到該html標籤下面。那麼我們看一下效果吧

好了以上就是簡單的元件介紹了，其實元件也有復合元件，就是很多個標籤組合在一起構成的符合元件。具體的在後面練習的時候我們再具體展開介紹。

React之元件通訊

元件通訊無外乎，下面這三種父子元件，子父元件，平行元件 也叫兄弟元件 間的資料傳輸。下面我們來分別說一下 父子元件 var demo react.createclass tap function e render function this.state.res var child react.cre...

React 元件通訊之 React context

react 元件之間的通訊是基於 props 的單向資料流，即父元件通過 props 向子元件傳值，亦或是子元件執行傳入的函式來更新父元件的state，這都滿足了我們大部分的使用場景。那 react 在兄弟元件之間如何通訊呢？一般地，對於兄弟元件之間的通訊，是通過它們共同的祖先元件進行的，即lift...

react之元件非同步載入

我們在用react的時候，希望元件非同步載入，提高效能，那麼應該怎麼實現呢？往下看。react非同步載入的方法很多，這裡只說一種，因為這一種直接使用react的特性就可以了，不需要另外配置webpack，就是用乙個小技巧去import元件，所以方便，實現簡單。寫乙個元件a，這個元件內部會載入另外的元...