React 元素

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

()=>React 元素

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

小結(jié)-1

React & ReactDOM

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

React.createElement

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

JSX

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

組件&&元素

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

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

React兩種組件

函數(shù)組件

類組件

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

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

React.createElement語(yǔ)法邏輯

注意傳入一個(gè)類需要注意的格式

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會(huì)自動(dòng)把讀取的內(nèi)容變?yōu)閷?duì)象存在參數(shù)里

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

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

兩種zengzeng不一樣的變成模型

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

復(fù)雜state

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


但不會(huì)合并第二層屬性也就是一個(gè)對(duì)象中的屬性

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

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

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

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

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

React 和 Vue的相同點(diǎn)和不同點(diǎn)

相同點(diǎn)

• 1.都是對(duì)視圖的封裝偿乖，React時(shí)用類和函數(shù)表示一個(gè)組件厂财，而Vue是通過(guò)構(gòu)造選項(xiàng)構(gòu)造一個(gè)組件
• 2.都提供了createElement的XML簡(jiǎn)寫狐史，React提供的JSX語(yǔ)法（一般屬性放在標(biāo)簽里痒给，其他屬性可以用花括號(hào)括起來(lái)） 而Vue是提供的是模板寫法（template）

不同點(diǎn)

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

實(shí)例 一個(gè)簡(jiǎn)單的demo 實(shí)現(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);