1、React和Vue的區別
（1）設計理念：react是一個聲明式UI庫，強調的是函數式編程，學習難度較高，vue是漸進式框架，學習難度較低
（2）模板語法：react使用的是JSX語法，邏輯和視圖混合編寫，vue使用的是HTML模板語法，邏輯和視圖分離；
（3）數據流：vue通過v-model可以實現雙向數據綁定，react是單向數據流，必須要手動調用setState或Hooks更新；(必須要將其定義為受控組件，在input框中綁定value={this.state.value}，并給其綁定一個 onChange={this.handleChange}函數，監聽input輸入框的變化，通過handleChange(event) {
this.setState({value: event.target.value});}從而去更新state中的屬性)；
（4） ?生態系統：react擁有龐大的生態系統和第三方庫，適合復雜場景的開發，Vue是官方提供的全家桶，適合快速開發中小項目；
2、JSX簡介
- 遇到 < 開頭的代碼, 以標簽的語法解析: html 同名標簽轉換為 html 同名元素, 其它標簽需要特別解析 ；
- 遇到以 { 開頭的代碼，以 JS 的語法解析: 標簽中的 js 代碼必須用{ }包含；
- 對于 label 標簽的 for 屬性，使用 htmlFor 標簽代替，標簽的class屬性，使用className代替；
3、樣式引入
行內樣式：可以使用style屬性定義樣式，使用{}表示js代碼，內部的樣式是一個json對象格式，需要再用{}括起來
<div style={{color:"red", fontSize: 30}}></div>內聯樣式：React 會在指定元素數字后自動添加 px
let mystyle = {color: "blue",fontSize: 30,
}
return(<div style={mystyle}>水滸傳</div>
)4、圖片引入
（1）分離引入方式
import boy from './assets/img/pic3.png'
<img alt="" src={boy} /> （2）通過require引入
<img alt="" src={require('./assets/img/pic4.png')} />（3）引入線上地址
<img alt="" src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1807710913,34060765&fm=26&gp=0.jpg" />5、條件渲染
（1）三目運算符：在 JSX 內部不能使用 if else 語句，但可以使用三元運算表達式來替代
let flag = true;
<div>{flag ? "show" : "hidden"}</div>
<div>{flag ? <span>立即注冊</span> : ''}</div>（2）使用&&來去掉三目運算符的否則
let flag = true;
<div>{flag && <span>條件渲染</span>}</div>（3）復雜條件渲染
const list = [{ name: '張三', age: 18, type: 0 },{ name: '李四', age: 20, type: 1 },{ name: '王五', age: 32, type: 2 },
]function getArticleTem(type) {if (type === 0) {return <div>無圖</div>} else if (type === 1) {return <div>單圖</div>} else if (type === 2) {return <div>雙圖</div>}
}function App() {return (<div>{ list.map((item, index) => <div key={index}>{getArticleTem(item.type)}</div> )} </div>
}6、列表渲染
const list = [{ name: '張三', age: 18, type: 0 },{ name: '李四', age: 20, type: 1 },{ name: '王五', age: 32, type: 2 },
]function App() {return (<div>{ list.map((item, index) => <div key={index}>{ item.name }</div> )} </div>
}7、事件綁定
function handleClick(e) {console.log(e);
}function App() {return (<div>{ list.map((item, index) => <div key={index} onClick={handleClick}>{ item.name }</div> )} </div>
}????????自定義傳參：事件綁定的位置改為箭頭函數寫法，不能直接在后面加參數調用
function App() {return (<div>{ list.map((item, index) => <div key={index} onClick={() => handleClick(item)}>{ item.name }</div> )} </div>
}????????同時傳遞事件對象和自定義參數：
function App() {return (<div>{ list.map((item, index) => <div key={index} onClick={(e) => handleClick(item, e)}>{ item.name }</div> )} </div>
}
