溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“React的相關知識點有哪些”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“React的相關知識點有哪些”文章能幫助大家解決問題。
輕量級的視圖層庫！A JavaScript library for building user interfaces
React不是一個完整的MVC框架，最多可以認為是MVC中的V（View），甚至React并不非常認可MVC開發模式；React 構建頁面 UI 的庫。可以簡單地理解為，React 將將界面分成了各個獨立的小塊，每一個塊就是組件，這些組件之間可以組合、嵌套，就成了我們的頁面。
React高性能的原理：
在Web開發中我們總需要將變化的數據實時反應到UI上，這時就需要對DOM進行操作。而復雜或頻繁的DOM操作通常是性能瓶頸產生的原因（如何進行高性能的復雜DOM操作通常是衡量一個前端開發人員技能的重要指標）。
React為此引入了虛擬DOM（Virtual DOM）的機制：在瀏覽器端用Javascript實現了一套DOM API。基于React進行開發時所有的DOM構造都是通過虛擬DOM進行，每當數據變化時，React都會重新構建整個DOM樹，然后React將當前整個DOM樹和上一次的DOM樹進行對比，得到DOM結構的區別，然后僅僅將需要變化的部分進行實際的瀏覽器DOM更新。而且React能夠批處理虛擬DOM的刷新，在一個事件循環（Event Loop）內的兩次數據變化會被合并，例如你連續的先將節點內容從A-B,B-A，React會認為A變成B，然后又從B變成A UI不發生任何變化，而如果通過手動控制，這種邏輯通常是極其復雜的。
盡管每一次都需要構造完整的虛擬DOM樹，但是因為虛擬DOM是內存數據，性能是極高的，部而對實際DOM進行操作的僅僅是Diff分，因而能達到提高性能的目的。這樣，在保證性能的同時，開發者將不再需要關注某個數據的變化如何更新到一個或多個具體的DOM元素，而只需要關心在任意一個數據狀態下，整個界面是如何Render的。
在react 16之后發布的一種react 核心算法，React Fiber是對核心算法的一次重新實現(官網說法)。之前用的是diff算法。
在之前React中，更新過程是同步的，這可能會導致性能問題。
當React決定要加載或者更新組件樹時，會做很多事，比如調用各個組件的生命周期函數，計算和比對Virtual DOM，最后更新DOM樹，這整個過程是同步進行的，也就是說只要一個加載或者更新過程開始，中途不會中斷。因為JavaScript單線程的特點，如果組件樹很大的時候，每個同步任務耗時太長，就會出現卡頓。
React Fiber的方法其實很簡單——分片。把一個耗時長的任務分成很多小片，每一個小片的運行時間很短，雖然總時間依然很長，但是在每個小片執行完之后，都給其他任務一個執行的機會，這樣唯一的線程就不會被獨占，其他任務依然有運行的機會。
1、虛擬DOM
我們以前操作dom的方式是通過document.getElementById()的方式，這樣的過程實際上是先去讀取html的dom結構，將結構轉換成變量，再進行操作
而reactjs定義了一套變量形式的dom模型，一切操作和換算直接在變量中，這樣減少了操作真實dom，性能真實相當的高，和主流MVC框架有本質的區別，并不和dom打交道
2、組件系統
react最核心的思想是將頁面中任何一個區域或者元素都可以看做一個組件 component
那么什么是組件呢？
組件指的就是同時包含了html、css、js、image元素的聚合體
使用react開發的核心就是將頁面拆分成若干個組件，并且react一個組件中同時耦合了css、js、image，這種模式整個顛覆了過去的傳統的方式
3、單向數據流
其實reactjs的核心內容就是數據綁定，所謂數據綁定指的是只要將一些服務端的數據和前端頁面綁定好，開發者只關注實現業務就行了
4、JSX 語法
在vue中，我們使用render函數來構建組件的dom結構性能較高，因為省去了查找和編譯模板的過程，但是在render中利用createElement創建結構的時候代碼可讀性較低，較為復雜，此時可以利用jsx語法來在render中創建dom，解決這個問題，但是前提是需要使用工具來編譯jsx
react開發需要引入多個依賴文件：react.js、react-dom.js，分別又有開發版本和生產版本，create-react-app里已經幫我們把這些東西都安裝好了。把通過CRA創建的工程目錄下的src目錄清空，然后在里面重新創建一個index.js. 寫入以下代碼:
// 從 react 的包當中引入了 React。只要你要寫 React.js 組件就必須引入React, 因為react里有一種語法叫JSX，稍后會講到JSX，要寫JSX，就必須引入Reactimport React from 'react'// ReactDOM 可以幫助我們把 React 組件渲染到頁面上去，沒有其它的作用了。它是從 react-dom 中引入的，而不是從 react 引入。import ReactDOM from 'react-dom'// ReactDOM里有一個render方法，功能就是把組件渲染并且構造 DOM 樹，然后插入到頁面上某個特定的元素上ReactDOM.render(// 這里就比較奇怪了，它并不是一個字符串，看起來像是純 HTML 代碼寫在 JavaScript 代碼里面。語法錯誤嗎？這并不是合法的 JavaScript 代碼, “在 JavaScript 寫的標簽的”語法叫 JSX- JavaScript XML。 <h2>歡迎進入React的世界</h2>,// 渲染到哪里 document.getElementById('root'))
如果代碼多了之后，不可能一直在render方法里寫，所以就需要把里面的代碼提出來，定義一個變量，像這樣：
import React from 'react'import ReactDOM from 'react-dom'// 這里感覺又不習慣了？這是在用JSX定義一下react元素const app = <h2>歡迎進入React的世界</h2>ReactDOM.render(
app,
document.getElementById('root'))
由于元素沒有辦法傳遞參數，所以我們就需要把之前定義的變量改為一個方法，讓這個方法去return一個元素:
import React from 'react'import ReactDOM from 'react-dom'// 特別注意這里的寫法，如果要在JSX里寫js表達式(只能是表達式，不能流程控制)，就需要加 {}，包括注釋也是一樣，并且可以多層嵌套const app = (props) => <h2>歡迎進入{props.name}的世界</h2>ReactDOM.render(
app({
name: 'react'
}),
document.getElementById('root'))
這里我們定義的方法實際上也是react定義組件的第一種方式-定義函數式組件，這也是無狀態組件。但是這種寫法不符合react的jsx的風格，更好的方式是使用以下方式進行改造
import React from 'react'import ReactDOM from 'react-dom'const App = (props) => <h2>歡迎進入{props.name}的世界</h2>ReactDOM.render(
// React組件的調用方式 <App name="react" />,
document.getElementById('root'))
這樣一個完整的函數式組件就定義好了。但要注意！注意！注意！組件名必須大寫，否則報錯。
ES6的加入讓JavaScript直接支持使用class來定義一個類，react的第二種創建組件的方式就是使用的類的繼承，ES6 class是目前官方推薦的使用方式，它使用了ES6標準語法來構建，看以下代碼：
import React from 'react'import ReactDOM from 'react-dom'class App extends React.Component {
render () {
return (
// 注意這里得用this.props.name, 必須用this.props <h2>歡迎進入{this.props.name}的世界</h2>
)
}}ReactDOM.render(
<App name="react" />,
document.getElementById('root'))
運行結果和之前完全一樣，因為JS里沒有真正的class，這個class只是一個語法糖, 但二者的運行機制底層運行機制不一樣。
· 函數式組件是直接調用, 在前面的代碼里已經有看到
· es6 class組件其實就是一個構造器,每次使用組件都相當于在實例化組件，像這樣：
import React from 'react'import ReactDOM from 'react-dom'class App extends React.Component {
render () {
return (
<h2>歡迎進入{this.props.name}的世界</h2>
)
}}const app = new App({
name: 'react'}).render()ReactDOM.render(
app,
document.getElementById('root'))
在16以前的版本還支持這樣創建組件, 但現在的項目基本上不用
React.createClass({
render () {
return (
<div>{this.props.xxx}</div>
)
}})
將一個組件渲染到某一個節點里的時候，會將這個節點里原有內容覆蓋
組件嵌套的方式就是將子組件寫入到父組件的模板中去，且react沒有Vue中的內容分發機制（slot），所以我們在一個組件的模板中只能看到父子關系
// 從 react 的包當中引入了 React 和 React.js 的組件父類 Component// 還引入了一個React.js里的一種特殊的組件 Fragmentimport React, { Component, Fragment } from 'react'import ReactDOM from 'react-dom'class Title extends Component {
render () {
return (
<h2>歡迎進入React的世界</h2>
)
}}class Content extends Component {
render () {
return (
<p>React.js是一個構建UI的庫</p>
)
}}/** 由于每個React組件只能有一個根節點，所以要渲染多個組件的時候，需要在最外層包一個容器，如果使用div, 會生成多余的一層domclass App extends Component { render () { return ( <div> <Title /> <Content /> </div> ) }}**/// 如果不想生成多余的一層dom可以使用React提供的Fragment組件在最外層進行包裹class App extends Component {
render () {
return (
<Fragment>
<Title />
<Content />
</Fragment>
)
}}ReactDOM.render(
<App/>,
document.getElementById('root'))
#JSX 原理
要明白JSX的原理，需要先明白如何用 JavaScript 對象來表現一個 DOM 元素的結構?
看下面的DOM結構
<div class='app' id='appRoot'>
<h2 class='title'>歡迎進入React的世界</h2>
<p>
React.js 是一個幫助你構建頁面 UI 的庫
</p></div>
上面這個 HTML 所有的信息我們都可以用 JavaScript 對象來表示：
{
tag: 'div',
attrs: { className: 'app', id: 'appRoot'},
children: [
{
tag: 'h2',
attrs: { className: 'title' },
children: ['歡迎進入React的世界']
},
{
tag: 'p',
attrs: null,
children: ['React.js 是一個構建頁面 UI 的庫']
}
]}
但是用 JavaScript 寫起來太長了，結構看起來又不清晰，用 HTML 的方式寫起來就方便很多了。
于是 React.js 就把 JavaScript 的語法擴展了一下，讓 JavaScript 語言能夠支持這種直接在 JavaScript 代碼里面編寫類似 HTML 標簽結構的語法，這樣寫起來就方便很多了。編譯的過程會把類似 HTML 的 JSX 結構轉換成 JavaScript 的對象結構。
下面代碼:
import React from 'react'import ReactDOM from 'react-dom'class App extends React.Component {
render () {
return (
<div className='app' id='appRoot'>
<h2 className='title'>歡迎進入React的世界</h2>
<p>
React.js 是一個構建頁面 UI 的庫
</p>
</div>
)
}}ReactDOM.render(
<App />,
document.getElementById('root'))
編譯之后將得到這樣的代碼:
import React from 'react'import ReactDOM from 'react-dom'class App extends React.Component {
render () {
return (
React.createElement(
"div",
{
className: 'app',
id: 'appRoot'
},
React.createElement(
"h2",
{ className: 'title' },
"歡迎進入React的世界"
),
React.createElement(
"p",
null,
"React.js 是一個構建頁面 UI 的庫"
)
)
)
}}ReactDOM.render(
React.createElement(App),
document.getElementById('root'))
React.createElement 會構建一個 JavaScript 對象來描述你 HTML 結構的信息，包括標簽名、屬性、還有子元素等, 語法為
React.createElement(
type,
[props],
[...children])
所謂的 JSX 其實就是 JavaScript 對象，所以使用 React 和 JSX 的時候一定要經過編譯的過程:
JSX —使用react構造組件，bable進行編譯—> JavaScript對象 — ReactDOM.render()—>DOM元素 —>插入頁面
· 行內樣式
想給虛擬dom添加行內樣式，需要使用表達式傳入樣式對象的方式來實現：
// 注意這里的兩個括號，第一個表示我們在要JSX里插入JS了，第二個是對象的括號 <p style={{color:'red', fontSize:'14px'}}>Hello world</p>
行內樣式需要寫入一個樣式對象，而這個樣式對象的位置可以放在很多地方，例如render函數里、組件原型上、外鏈js文件中
· 使用class
React推薦我們使用行內樣式，因為React覺得每一個組件都是一個獨立的整體
其實我們大多數情況下還是大量的在為元素添加類名，但是需要注意的是，class需要寫成className（因為畢竟是在寫類js代碼，會收到js規則的現在，而class是關鍵字）
<p className="hello" style = {this.style}>Hello world</p>
· 不同的條件添加不同的樣式
有時候需要根據不同的條件添加不同的樣式，比如：完成狀態，完成是綠色，未完成是紅色。那么這種情況下，我們推薦使用classnames這個包：
· css-in-js
styled-components是針對React寫的一套css-in-js框架，簡單來講就是在js中寫css。npm鏈接
組件化開發React todolist， 項目開發中的組件的基本目錄結構基本上是這樣的：
注意：一個組件只干一件事情 ，所以TodoList和TodoItem要做成兩個組件，這樣也方便于后期理解shouldComponentUpdate
關于“React的相關知識點有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
