React 元素

• 1.createElement 的返回值 element 可以代表一個div
• 2.但element 并不是真正的div（DOM 對象）
• 3.所以我們一般稱 element 為虛擬 DOM對象(代替div ）

()=>React 元素

• 1.返回 element 的函數(shù)，也可以代表一個div
• 2.這個函數(shù)可以多次執(zhí)行，每次得到最新的虛擬 div
• 3.React 會對比兩個虛擬div，找出不同，局部更新視圖
  找不同的算法叫做 DOM Diff 算法

小結(jié)-1

React & ReactDOM

CDN方式：react.js. react-dom.js. babeljs
也可以直接 import React from 'react'

React.createElement

創(chuàng)建虛擬 DOM 對象
函數(shù)的作用：多次創(chuàng)建虛擬 DOM對象
DOM Diff是找不同的算法

JSX

將XML轉(zhuǎn)譯為 React.createElement
，使用{}插入 JS代碼
create-react-app默認(rèn)將JS當(dāng)作 JSX 處理
條件判斷、循環(huán)要用原生 JS實現(xiàn)

組件&&元素

默認(rèn)組件都會是大寫的

組件：將其他物件組合起來的物件就是組件
就目前而言 一個返回react元素的函數(shù)就是一個組件

React兩種組件

函數(shù)組件

類組件

PS:<welcome />注意你不是在寫標(biāo)簽

標(biāo)簽會被翻譯為 React.createElement
本質(zhì)上就是把XML語法轉(zhuǎn)換為JS

React.createElement語法邏輯

注意傳入一個類需要注意的格式

class Welcome extends React.Component{
constructor(){
super()
this.state = {n:0}
}
render(){
return<div>hi</div>
}
} 

添加props（外部數(shù)據(jù)）
類組件可以直接讀取屬性 this.props.xx
函數(shù)組件直接讀取參數(shù)props.xxx
react會自動把讀取的內(nèi)容變?yōu)閷ο蟠嬖趨?shù)里

添加state（內(nèi)部數(shù)據(jù)）
類組件用this.state讀 this.setState來寫(注意他是異步更新）
函數(shù)組件用useState返回數(shù)組 第一項讀第二項寫 一般參數(shù)叫做[n , setN]

注意：
類組件里的set state會等一下再改變n（異步）
函數(shù)組件中的setN永遠(yuǎn)不會改變n
在react中最好時遵循數(shù)據(jù)不可變原則

兩種zengzeng不一樣的變成模型

• 1.vue編程模型 一個對象對應(yīng)一個DOM模型 當(dāng)我們在編程過程中將對象的屬性進(jìn)行修改 那么這個對象的DOM節(jié)點將會全部更新 那么在ul中會立即顯示
• 2.React編程模型不同對象對應(yīng)不同DOM模型 在對象屬性發(fā)送改變時 我們一般不會改變屬性值 而是新建一個對象 然后賦予相同的屬性名并改變它的值 那么react會自動對對比兩個虛擬的DOM 找出不同 再局部更新DOM顯示在ul

復(fù)雜state

面對復(fù)雜state
類組件的setState會自動合并到第一層的屬性
也就是會保留沒有被修改的那一部分的數(shù)值


但不會合并第二層屬性也就是一個對象中的屬性

函數(shù)組件更是壓根都不幫你保留
解決方式

解決方式：
在每次修改的后面都加上...操作符或者

意思是將this.state.user里的屬性拷貝到{}里

這里addN箭頭函數(shù)不用加this
引用的時候記得前面要加this

一般函數(shù)在class里面都是被寫在prototype里面 時所有的這個對象的共有屬性 也就是在原型上面的屬性
而class中的箭頭函數(shù)時對象本身的屬性 這就意味著 每個Son組件都有自己的箭頭函數(shù) 相當(dāng)于寫在了 constructor里面

React 和 Vue的相同點和不同點

相同點

• 1.都是對視圖的封裝，React時用類和函數(shù)表示一個組件，而Vue是通過構(gòu)造選項構(gòu)造一個組件
• 2.都提供了createElement的XML簡寫，React提供的JSX語法（一般屬性放在標(biāo)簽里，其他屬性可以用花括號括起來） 而Vue是提供的是模板寫法（template）

不同點

• 1.React是把HTML放在JS里寫 而Vue是把JS放在HTML里寫

實例 一個簡單的demo 實現(xiàn)click 加一

類組件

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  constructor(){
    super()
    this.state = {
      n: 1
    };
  }
  add(){
    this.setState({ n: this.state.n + 1});

    }
    render(){
      return (
      <div className="App">
        n:{this.state.n}
        <button onClick={() => this.add()}>+1</button>
      </div>
    );
  } 
    }
    

函數(shù)組件

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [n, setState] = React.useState(0)
  return ( 
    <div className="App">
       state: {n}
       <button onClick = {()=> setState(n+1)} >+1</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);