Vue 转 React 指南，看这篇文章就够了 _React

为什么要从 Vue 转到 React，这篇文章为什么我们放弃了 Vue？不过对于大多数人来说，用 Vue 还是 React 不是自己说了算，多学一门技术不是坏处，而且 React 被大厂大量使用，要进入大厂也是必备的技能，笔者原先使用 Vue，由于 React 相关概念更加简单，只要会 js 就行，转到 React 只花了几天时间（已经回不去了～）。本文写给想从 Vue 转到 React 的同学，假设读者有一定的 Vue 基础。
JSX先介绍 React 唯一的一个语法糖：JSX 。
<div class='box' id='content'><div class='title'>Hello</div><button>Click</button></div>上面的 DOM 结构可以看出，要每个标签只有 3 个信息：标签名、属性、子元素，所以上面等同于下面的 JSON 结构：
{tag: 'div',attrs: { className: 'box', id: 'content'},children: [{tag: 'div',arrts: { className: 'title' },children: ['Hello']},{tag: 'button',attrs: null,children: ['Click']}]}当你写下这个 React 组件是：
import React from 'react';function MyComponent(props) {return <div>{props.hello}</div>}最终会被自动工具翻译成：
import React from 'react';function MyComponent(props) {return React.createElement('div', null, props.hello);}理解 JSX 语法并不困难，简单记住一句话，遇到 {} 符号内部解析为 JS 代码，遇到成对的 <> 符号内部解析为 html 代码。React 就是通过这个小小语法糖，实现在 JS 里面写 HTML，可能有小伙伴会说 HTML 与 JS 分离不是更好吗？责职分明，混合只会更乱。但当你体验到代码自动提示，自动检查，以及调试时精确定位到一行代码的好处时，就清楚 React 和 Vue 的差距了。
语法糖转换习惯 Vue 的同学都知道很多语法糖，比如 v-if、v-for、v-bind、v-on 等，相比 Vue，React 只有一个语法糖，那就是 jsx/tsx 。v-if 这些功能在 React 上都是通过原生 JAVAscript 实现的，慢慢你会发现，其实你学的不是 React，而是 Javascipt，React 赋予你通过 js 完整控制组件的能力，这部分明显比 Vue 的语法糖更加灵活，糖太多容易引来虫子（Bug）。

v-if 条件渲染vue 中写法是这样：
<template><div><h1 v-if="awesome1">Vue is awesome!</h1><h1 v-else>else</h1><h1 v-if="awesome2">Oh no</h1></div></template><script>module.exports = {data: function() {return {awesome1: true,awesome2: false,}}}</script>在 React 函数组件中只需这样：
import React, { useState } from 'react';function Index() {const [awesome1, setAwesome1] = useState(true);const [awesome2, setAwesome2] = useState(false);return (<div>{awesome1 ? <h1>React is awesome!</h1> : <h1>Oh no</h1>}{awesome2 && <h1>React is awesome!</h1>}</div>);}export default Index;只需使用 js 三目运算符语法即可完成条件渲染的功能。或者使用 && 逻辑，记住下面一句话就能过理解了：

遇到 {} 符号内部解析为 JS 代码，遇到成对的 <> 符号内部解析为 HTML 代码

v-for 列表渲染Vue 中写法：

<template><ul id="array-rendering"><li v-for="item in items">{{ item.message }}</li></ul></template><script>module.exports = {data() {return {items: [{ message: 'Foo' }, { message: 'Bar' }]}}}</script>

React 写法：

import React, { useState } from 'react';function Index() {const [items, setItems] = useState([{ message: 'Foo' }, { message: 'Bar' }]);return (<ul id="array-rendering">{items.map((item, id) => <li key={id}>{item.message}</li>)}</ul>);}export default Index;

React 通过 js 的数组语法 map，将数据对象映射为 DOM 对象。只需学会 js，无需记住各种指令，如果要做列表过滤，直接使用 items.filter(...).map(...) 链式调用即可，语法上更加灵活，如果为了提高渲染性能，使用 useMemo 进行优化即可，类似 Vue 的 computed 。
v-modelVue 中 v-model 是一个数据绑定语法糖，本质上还是单向数据流，下面的子组件通过 update:title 同步 title 参数。

App.component('my-component', {props: {title: String},emits: ['update:title'],template: `<inputtype="text":value=https://www.isolves.com/it/cxkf/bk/2021-04-13/"title"@input="$emit('update:title', $event.target.value)">`})

React 写法较为简单，不需要像 Vue 一样填鸭代码，记住各种规则，所有数据和事件通过 props 传递就行了：