兩者的優(yōu)缺點(diǎn)比較這里就不列了较木，沒啥子意義红符。
僅從個(gè)人主觀的觀察，Vue 的視頻教程數(shù)量要遠(yuǎn)遠(yuǎn)多于 React 相關(guān)伐债。
兩者在視覺上最大的區(qū)別應(yīng)該就是有沒有將結(jié)構(gòu)行為樣式相分離预侯，但注意，這些僅僅是視覺上給人的感受峰锁，實(shí)際上 template 中寫的東西也是要交給 render 函數(shù)去處理的萎馅。而這也是很多人爭論的點(diǎn)。
React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.
趁著 Vue3 的間隙來看一波 React虹蒋，學(xué)的東西類似糜芳，如何插值飒货，如何響應(yīng)式，如何組件化峭竣。
- Vue | 入手 Vue
- Vue | 插值操作 | 如何將數(shù)據(jù)弄到DOM中
- Vue | 插值操作 | 如何將數(shù)據(jù)插入到元素屬性上
- Vue | 兩對cp
- Vue | 一對基友
- Vue | v-model && form
- Vue | 組件化 | 基本操作
- Vue | 組件化 | 組件通信
- Vue | 組件化 | 組件個(gè)性化
React 沒有類似 v-if 指令的東西塘辅，那么列表遍歷渲染邏輯就不同了。
同樣 React 沒有采用 mustache 語法邪驮，那么如何將數(shù)據(jù)和 DOM 搞到一起也是個(gè)問題莫辨。
React 推薦使用的是 JSX，這貨和 TypeScript 與 JavaScript 的關(guān)系類似毅访，最終還是要搞成 JavaScript 代碼沮榜，至于這個(gè)過程是怎樣的就涉及到編譯原理的知識(shí)了。
不得不說前端的方言是真多喻粹。
JavaScript ===> TypeScript JSX
CSS ===> stylus less sass
HTML ===> markdown
DOM ===> VDOM
來看一波場景
// 如何將數(shù)據(jù)弄到DOM中
<h1>{{title}}</h1>
const element = <h1>{title}</h1>
// 如何將數(shù)據(jù)插入到元素屬性上
<img :src=user.avatarUrl />
const element = <img src={user.avatarUrl} />
組件方面蟆融，Vue更多地使用單文件格式，而React可以使用函數(shù)組件和class組件守呜，且組件名要大寫開頭型酥。
function Welcome(props) {
return <h1>Hello, {props.name}</h1>
}
好吧，上面就是一個(gè)函數(shù)組件了查乒，它和普通普通函數(shù)相比弥喉，在于 return 的地方，其實(shí)是 return 了一個(gè)對象玛迄。當(dāng)然了由境，也可以使用類組件，要繼承 React.Component蓖议，更多地使用函數(shù)組件虏杰。
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
那么，接下來如何將 props 值傳給組件勒虾？
// Vue
<Welcome :name=name></Welcome>
// React
const element = <Welcome name={name} />;
接下來是生命周期纺阔，和Vue使用上沒啥區(qū)別，名字不同修然。
接下來是事件處理笛钝，都是要編寫處理函數(shù)的。
// vue
<button @click="activateLasers">
</button>
// react
<button onClick={activateLasers}>
Activate Lasers
</button>
緊接著是條件渲染愕宋，在 Vue 中會(huì)使用 v-if 指令婆翔，而在 React 中使用 JSX 可以根據(jù)值return不同的組件。就按照 JavaScript 的邏輯來看就好掏婶。忽然有點(diǎn)想投入 React 的懷抱了啃奴。
// react
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
下面是列表渲染，在Vue中使用v-for,前面提到過 React 沒有指令這一套雄妥，還是使用JSX最蕾。
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li>{number}</li>
);
ReactDOM.render(
<ul>{listItems}</ul>,
document.getElementById('root')
);
當(dāng)然了依溯，你不用map也可以，foriin也不攔著瘟则，能遍歷就完事了黎炉。這里也有key的概念，和Vue中的key類似醋拧。
