你应该要知道的React和Vue的区别
/*CSSCode*/你应该知道的React和Vue的区别对比两者，经过实践，我想从自己的角度来看。然后开始看官方文档Vue官方文档React官方文档【中文版】个人感觉Vue的文档分的比较好，很多概念会解释的比较清楚（虽然第一次看的时候什么都不懂）同时，一些相关的生态系统也总结在一起，比如vue-cli、vue-router、vuex等，比较方便。React的文档感觉比较实用，对基础知识的解释比较少。在教程部分，会教你如何实现一个tic-tac-toe（这个比较友好）组件两个框架都推荐将页面组件化，但是两者的组件生命周期也不同。Vue主要分为8个阶段：beforeCreate创建（该阶段可以第一次获取data中定义的数据）beforeMount挂载（该阶段渲染Dom树，可以访问Dom结构）beforeUpdate更新beforeDestroydestroyedReact主要分为3个阶段：挂载初始化->更新运行->卸载销毁生命周期中的方法[react16.0后移除]componentWillMount():在render()之前执行，所以这个阶段的setState()不会重新渲染；通常使用constructor()代替render()：ExecutecomponentDidMount()aftercomponentWillMount()：Executeafterrender()，所以这个阶段的setState()会重新渲染；这里可以对DOM进行操作【react16.0后移除】componentWillReceiveProps(nextProps):当挂载组件接收到新的props时执行，但有可能传入时props没有变化，但仍然重新渲染.如果想避免这种情况，可以在传入新道具时，对比一下新旧道具是否发生了变化；这里需要注意，如果只是调用setState()，这个方法是不会被触发的。该方法只会在props改变或不改变时被触发。shouldComponentUpdate(nextProps,nextState)：接收到新的props或state后判断是否重新渲染，默认值为true；在第一个渲染中该方法不会被触发【react16.0后移除】componentWillUpdate(nextProps,nextState)：在shouldComponentUpdate()之后，render()之前触发；组件初始化时不会触发componentDidUpdate(prevProps,prevState):在componentWillUpdate(nextProps,nextState)之后调用；组件初始化时不会触发，此时可以操作DOM组件形式VueTemplateVue组件的编写结构分为三部分，即模板（HTML）脚本（JS）样式（CSS）将三者分开，多关注CSS各部分的开发：Vue默认在单文件组件的标签中编写CSS样式，我们可以通过传入标签中，让这部分样式只用于控制组件的样式，不影响其他组件JS：模板部分使用数据：变量需要放在双大括号中{{}}{{name}}
/*CSSCode*/ReactJSX-React支持类组件和函数componentReact组件使用render函数，可以使用JavaScript构建视图页面，其中往往包含大量逻辑CSS：React使用className字段设置样式，一般导入外部css，一般较少使用预编译JS:将变量放入{}//classcomponentclassTemplateextendsReact.Component{render(){return(ShoppingListfor{this.props.name}/h1>
);}}//函数组件functionNewComponent(){const[name,setName]=useState('');return(
{name}
);}数据管理Vue对象属性数据由对象中的data属性管理，可直接更改exportdefault{name:'app',data(){return{orders:{}}}}React状态管理类组件状态数据通过state保存状态，需要通过setStatetochangesetState更新了组件的部分数据，react会自动合并数据setState原理：你真的了解setStatestate={version:Version.V3};handleVersionChange(version:Version){this.setState({version:编号(版本)});functioncomponenthooks数据需要通过setXXX改变useState不会自动合并更新functionCounter({initialCount}){const[count,setCount]=useState(initialCount);返回(<>
setCount(initialCount)}>重置);}Dataflowone-way数据流中的单向：我理解父数据的更新会向下流到子组件中，而不是反过来，这样可以防止父组件的状态被不小心从子组件更改了。Vue双向数据绑定Vue仍然是一种单向数据流表示。使用v-model一般有两种使用场景：组件输入元素v-model本质上是语法糖//等价于：//实现原理//修改AST元素，添加aproptoel，相当于动态绑定valueaddProp(el,'value',`(${value})`);//添加事件处理，相当于绑定输入事件addHandler(el,event,code,空，真）输入；实现原理vue采用发布者订阅作者+数据劫持的模式实现。当我们在组件中定义数据时，vue会遍历这个对象，并通过Object.defineProperty()为每个值添加getter和setter方法，然后每个组件都有一个watcher来监视数据变化。当数据发生变化时，即触发setter时，会向订阅者发布消息。触发相应监听回调的缺陷Vue2.0没有监听数组的能力。需要重新定义数组的原型来实现响应式。无法检测到对象属性的增删改查。只能劫持对象的属性（如果每个对象都需要遍历每个属性。如果属性值也是一个对象，那么就需要深度遍历。显然，劫持一个完整的对象是更好的选择）:Vue.set()||this.$set()如果在实例创建后向实例添加新的属性不会触发视图更新，因为此时添加的属性没有绑定getter或setter，所以这个属性是无响应的。如果我们想让这个属性成为响应式的，我们可以通过Vue.set()或this.$set()来添加新的属性除了添加新的属性外，更改数组的某些属性不会更新视图。使用索引直接设置数组的某一项arr[1]=10直接修改数组的大小arr.length=10数组除了Vue.set()和this.$set()，还可以使用数组的一些API来触发更新，比如splice(),concat()等会修改原来的数组APIVue3.0改进使用ES6中的代理可以劫持整个对象而不是属性，返回一个新的对象来监听数组的变化。React单向数据流的特点React采用单向数据流的形式，即只接收数据，不改变数据，只监听数据变化；当数据发生变化时，它会接收并使用新数据并重新渲染。我觉得单向数据流最大的好处就是当多个组件要对同一个值进行操作时，由于数据只有一份，所以可以保持一致性。StateManager什么情况下应该使用StateManager？一般当多个组件需要一起维护一些数据时，传值的方式会很复杂，所以我们可以把需要一起维护的数据抽取出来放在store中共同维护，这样可以保证数据一致性VueVuex单数据源：只有一个storemutation（同步操作）：state只能通过mutation修改，mutationaction（异步操作）需要通过store.commit()提交：action可以包含多个mutation，最后通过商店。Commit()用于触发mutation，action需要通过store.dispatch()来触发。模式：引入模块化就是拆分门店。每个Module都有自己的state,mutation,action,getter，可以单独维护，最后在不违背Vuex的单数据源的情况下组合各个storeReactRedux单数据源：只有一个storestate是只读的：需要一个新的state通过reducer纯函数返回。单向数据流使用不可变数据，每次更新使用新状态替换旧状态Mobx-React可以有多个存储状态，可以直接修改@observable//我们需要添加@observablecurrent:number=1;total:到需要观察的数据number=0;@action//把修改观察变量的行为放在action中updateCurrent(current:number){this.current=current;}//对于异步操作，action不能影响当前函数调用的异步操作，可以使用runInAction来解决asyncgetList(){//一些代码页面应用，页面跳转不会发送请求hash方式简单的说，url后面的#号就是hash路由//像这样http://localhost:8080/home#heading表面原理用的有h来模拟一个完整的URL，所以当URL发生变化时，不会重新加载URL中出现的hash，但不会包含在http请求中，所以当hash值发生变化时，不会引起页面时#of请求更改后的值，将在浏览器的浏览历史记录中添加一条记录。当点击返回按钮时会弹出，实现页面跳转，通过onhashchange事件监听hash值的变化。history模式不带#号//的URL是这样的http://localhost:8080/home/center表面原理history模式主要使用HTML5中提供的APIhistory.pushState()和history.replaceState()来实现需要注意的最重要的是，历史模式不怕前进，也不怕后退，就怕刷新历史模式的页面，如果刷新页面，可能会返回404，因为当页面刷新后，其实会向服务器发送请求，但是如果页面没有在服务器端配置的话，会返回404，所以需要对服务器进行重定向。可以使用Nginx，使用try_file和rewrite来实现重定向。React-Router（待完善）BrowserRouter和Vue-Router有类似HashRouter和Vue的history模式-Router中的hash模式类似于脚手架（待补充）Vue-CliCreate-React-App单元测试（待补充）从Vue到React虽然我是最开始学习和使用Vue的，但是因为之前学过Java等一些面向对象的方法语言，所以从Vue到React的过渡并没有难受，反而感觉很熟悉；而React是用JS搭建页面的，逻辑可以写在里面，感觉很舒服，但其实不管是什么框架，都适合这个项目，如果是好的框架，就是一个好的框架。不同的框架有不同的特殊点。如果这个特殊点符合项目的要求，那就是它！
