React Components簡介
組件是一個隔離的接口。例如,在典型的博客主頁中,您可能會找到側邊欄組件和“博客帖子列表”組件。它們又由組件本身組成,因此您可以擁有一個Blog post組件列表,每個組件用於每個Blog帖子,每個組件都有其獨特的屬性。
React使它非常簡單:一切都是組件。
甚至純HTML標記本身都是組件,並且默認情況下會添加它們。
接下來的兩行是等效的,它們執行相同的操作。與之一JSX,一個沒有,通過注入<h1>Hello World!</h1>
到ID為的元素中app
。
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(<h1>Hello World!</h1>, document.getElementById(‘app’))
ReactDOM.render(
React.createElement(‘h1’, null, ‘Hello World!’),
document.getElementById(‘app’)
)
看,React.createElement
向我們展示了一個API來創建h1
成分。更改該方法的第一個參數可讓您創建不同的標籤。第二個參數是道具的對象,在這種情況下,我們不需要任何參數,因此我們通過null
。
這就是我們如何使用React來處理內置HTML組件的方法,但是您很快就會將其淘汰。 React擅長的是讓我們通過組成自定義組件來組成UI。
定制組件
有兩種在React中定義組件的方法。
功能組件:
const BlogPostExcerpt = () => {
return (
<div>
<h1>Title</h1>
<p>Description</p>
</div>
)
}
一個類的組成部分:
import React, { Component } from 'react'
class BlogPostExcerpt extends Component {
render() {
return (
<div>
<h1>Title</h1>
<p>Description</p>
</div>
)
}
}
直到最近,類組件還是定義具有自己狀態的組件的唯一方法,並且可以訪問生命週期方法,因此您可以在首次呈現,更新或刪除組件時執行操作。
React Hooks改變了這一點,因此我們的功能組件現在比以往任何時候都更加強大,並且我相信將來它會成為越來越少的類組件,儘管它仍然是創建組件的完全有效的方式。
還有第三種語法使用ES5
沒有類的語法:
import React from 'react'
React.createClass({
render() {
return (
<div>
<h1>Title</h1>
<p>Description</p>
</div>
)
}
})
在現代,您很少會看到這種情況,> ES6
代碼庫。
免費下載我的反應手冊
更多反應教程:
- 一個React簡單的應用示例:通過API獲取GitHub用戶信息
- 用React構建一個簡單的計數器
- 用於React開發的VS Code設置
- 如何通過React Router將道具傳遞給子組件
- 使用Electron和React創建一個應用
- 教程:使用React創建電子表格
- 學習React的路線圖
- 了解如何使用Redux
- JSX入門
- 樣式化的組件
- Redux Saga簡介
- React Router簡介
- React簡介
- 反應組件
- 虛擬DOM
- 反應事件
- 反應狀態
- 反應道具
- 反應片段
- React Context API
- 反應PropTypes
- 反應概念:聲明式
- React:如何在點擊時顯示其他組件
- 如何在React JSX內部循環
- 道具與狀態在React中
- 您應該使用jQuery還是React?
- 使用React需要知道多少JavaScript?
- 蓋茨比介紹
- 如何在React中引用DOM元素
- React中的單向數據流
- 反應高階組件
- 反應生命週期事件
- 反應概念:不變性
- 反應概念:純度
- React鉤子簡介
- create-react-app簡介
- 反應概念:組成
- React:演示組件與容器組件
- React中的代碼拆分
- 使用React進行服務器端渲染
- 如何安裝React
- React中的CSS
- 在React中使用SASS
- 在React中處理表單
- 反應嚴格模式
- 反應門戶
- 反應渲染道具
- 測試React組件
- 如何在React中將參數傳遞給事件處理程序
- 如何處理React中的錯誤
- 如何在JSX中返回多個元素
- React中的條件渲染
- 反應,如何將道具轉移到子組件
- 如何在React中獲取輸入元素的值
- 如何使用useState React鉤子
- 如何使用useCallback React鉤子
- 如何使用useEffect React鉤子
- 如何使用useMemo React鉤子
- 如何使用useRef React鉤子
- 如何使用useContext React鉤子
- 如何使用useReducer React鉤子
- 如何將您的React應用程序連接到相同來源的後端
- 到達路由器教程
- 如何使用React Developer Tools
- 如何學習React
- 如何調試React應用程序
- 如何在React中呈現HTML
- 如何修復`dangerouslySetInnerHTML`與React中的錯誤不匹配
- 我如何解決React登錄表單狀態和瀏覽器自動填充的問題
- 如何在本地主機上的React應用程序中配置HTTPS
- 如何修復React中的“在渲染其他組件時無法更新組件”錯誤
- 我可以在條件內使用React掛鉤嗎?
- 將useState與對像一起使用:如何更新
- 如何使用React和Tailwind在代碼塊中移動
- React,添加到DOM時將焦點放在React中的一個項目上
- 反應,在doubleclick上編輯文本