虛擬DOM (Virtual Document Object Model)
- DOM和虛擬DOM的區別
- DOM是由瀏覽器中的JS提供功能，所以只能人為使用瀏覽器提供的API來操作DOM物件
- 虛擬DOM不是由瀏覽器提供的，是程式員 用JS物件來模擬頁面上的DOM和DOM嵌套
- 虛擬DOM的優點
- DOM節點的高效更新
Diff演算法
- tree diff：新舊DOM樹逐層對比
- component diff：對比每一層的時候，組件之間的對比
- element diff：在組件中的元素之間的對比
- key：頁面上的DOM節點和虛擬DOM中的物件關聯
新建react專案
-
下載安裝包并匯入
npm i react react-dom -S -
使用js創建虛擬dom節點，并渲染到指定節點中
import React from 'react';
import ReactDom from 'react-dom';
// React中若要創建dom元素,只能使用react提供的js api
// createElement 接收三個及以上引數,
// 引數1 :字串,表示創建的元素型別, 引數二:物件,元素屬性,引數三~n:虛擬dom物件,子節點
// <div id="myDiv">這是一個div</div>
var myDiv1 = React.createElement('h1',null,'這是一個div')
var myDiv = React.createElement('div',{id:'myDiv',className:'ttt'},'這是一個div',myDiv1)
// render('要渲染的元素','渲染元素的位置[原生的dom物件]')
ReactDom.render(myDiv,document.getElementById('app'))
JSX語法--符合xml規范的js語法
- 安裝語法轉化器并配置
npm i babel-preset-react -D
- 創建節點并渲染
var titles = '這是一個jsx div'
var myJSDiv = <h1 className="ttt" id="myDiv" title={ titles + 'ffff' }>{ titles }</h1>
ReactDom.render(myJSDiv,document.getElementById('app'))
創建組件
// 在react中一個建構式就是一個最基本的組件
// 通過props傳遞的資料都是只讀的,不能重新賦值
function Hello(props) {
return <div>這是組件定義的div=== {name}==={props.age}</div>
}
var name ="zhangsan"
var person = {name: 'zh',age:20}
ReactDom.render(<div><Hello name={name} {...person}></Hello></div>,document.getElementById('app'))
js檔案抽離
Hello.jsx
```import React from 'react';```
```function Hello(props) {```
```return <div>這是組件定義的div=== {name} === {props.name}</div>```
```}```
```export default Hello```
呼叫組件的頁面
```import Hello from './components/Hello.jsx' ```
```var name ="zhangsan" ```
```var pesron = { ```
```name:"zhangsan", ```
```age:20, ```
```sex: 1 ```
```} ```
```ReactDom.render(<div><Hello name={name} {...pesron}></Hello></div>,document.getElementById('app')) ```
使用class創建組件
```class Hello2 extends React.Component {```
```this.props.name="123"```
``` render() {```
``` return <div>這是class定義的div==={this.props.name} ==={this.props.pss}</div>```
```}```
```}```
``` ReactDom.render(<div><Hello2 name='nihao' pss="xxx"></Hello2></div>,document.getElementById('app'))```轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/168251.html
標籤：JavaScript