江苏龙网

  1. 主页 > 生活百科 > >

Vue 转 React 指南，看这篇文章就够了( 二 )

react


import React from 'react';interface Props {title: string;onUpdateTitle: (title: string) => void;}function MyComponent(props: Props) {return <inputtype='text'value=https://www.isolves.com/it/cxkf/bk/2021-04-13/{props.title}onInput={e => props.onUpdateTitle(e.target.value)}/>}更加容易整合 typescript 实现类型推断，需要的逻辑都由 JS 完成，无需记住各种指令、使用方法，参数命名规则 。
事件处理Vue 中写法
<template><div id="inline-handler"><button @click="say('hi')">Say hi</button><button @click="say('what')">Say what</button></div></template><script>module.exports = {methods: {say(message) {alert(message)}}}</script>React 写法：
import React, { useState } from 'react';function Index() {const onClick = (message) => () => alert(message);return (<div id="inline-handler"><button onClick={onClick('hi')}>Say hi</button><button onClick={onClick('what')}>Say what</button></div>);}export default Index;这里用了函数柯里化，一般事件处理这样就行了：
import React from 'react';function Index() {const onClick = () => alert('hi');return (<div id="inline-handler"><button onClick={onClick}>Say hi</button></div>);}export default Index;如果需要优化缓存事件处理函数，使用 useCallback 即可 。可以看到 Vue 中的事件触发 this.$emit('click') 或者父组件中的代码 v-on="say('hi')" 都使用了字符串的写法，这样非常不利于类型推断，不利于代码重构 。React 的函数写法或者 class 写法都直接使用 js 语法，没有额外的东西，相比 Vue 更容易通过 IDE 进行重构优化 。React 中无论方法还是变量，都是采用驼峰命名法，也可以自由定制，Vue 中必须混合小写中隔线、驼峰、字符串组合，不利于统一代码规范 。
插槽Vue 中写法：
<template><button class="btn-primary"><slot></slot></button></template><script>module.exports = {methods: {}}</script>React 写法：
import React from 'react';function Index() {return (<button classNames="btn-primary">{props.children}</button>);}export default Index;React 的插槽写法没有 Vue 那么复杂，也没有“备用内容”、“具名插槽”、“渲染作用域”、“作用域插槽”、“动态插槽名”，这些概念和特殊情况的处理，一切通过 JS 逻辑搞定就行了，怎么方便怎么来，比如备用内容的实现：
import React from 'react';function Index() {// 默认情况下使用 Summit 作为按钮文字return (<button classNames="btn-primary">{props.children === null ? 'Summit' : props.children}</button>);}export default Index;样式 & 属性这部分 Vue 的写法实在是太麻烦了 。。。每次我都要查查文档具体怎么用，对象语法、数组语法、内联样式，要记住的有点多，Vue 动态修改样式的写法：
<template><divclass="static":class="{ active: isActive, 'text-danger': hasError }"></div></template><script>module.exports = {data() {return {isActive: true,hasError: false}}}</script>React 写法：
import React, { useState } from 'react';function Index() {const [isActive, setIsActive] = useState(true);const [hasError, setHasError] = useState(false);return (<divclassNames={`static ${isActive ? 'active':'} ${hasError? 'text-danger':''}`}></div>);}export default Index;React 里面直接采用 JS 的模板字符串语法，如果样式太多，可以使用 classnames 这个 npm 包，优雅传递各种状态，使用非常简单：
classNames('foo', 'bar'); // => 'foo bar'classNames('foo', { bar: true }); // => 'foo bar'classNames({ 'foo-bar': true }); // => 'foo-bar'classNames({ 'foo-bar': false }); // => ''classNames({ foo: true }, { bar: true }); // => 'foo bar'classNames({ foo: true, bar: true }); // => 'foo bar'状态管理Vue 的状态管理官方推荐使用 Vuex 也可采用 Redux 。

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

文章插图
【Vue 转 React 指南，看这篇文章就够了】 
引用官方文档一段话：
如果你是来自 React 的开发者，可能会对 Vuex 和 Redux 间的差异表示关注，Redux 是 React 生态环境中最流行的 Flux 实现 。Redux 事实上无法感知视图层，所以它能够轻松地通过一些简单绑定和 Vue 一起使用 。Vuex 区别在于它是一个专门为 Vue 应用所设计 。这使得它能够更好地和 Vue 进行整合，同时提供简洁的 API 和更好的开发体验 。


推荐阅读


上一篇：在南极海域冰冷的海水中 南极冰层下的湖

下一篇：海贝化石图片大全 贝类化石和甲壳化石