React入門（一）

虛擬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 class="ttt" 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'))```