React.js和Vue.js都是很好的框架。而且Next.js和Nuxt.js甚至将它们带入了一个新的高度，这有助于我们以更少的配置和更好的可维护性来创建应用程序。但是，如果你必须经常在框架之间切换，在深入探讨另一个框架之后，你可能会轻易忘记另一个框架中的语法。在本文中，我总结了这些框架的基本语法和方案，然后并排列出。我希望这可以帮助我们尽快掌握语法，不过限于篇幅，这篇文章只比较React.js和Vue.js，下一篇再谈Next.js个Nuxt.js。
RenderGithub：https://github.com/oahehc/react-vue-comparison
React.js
ReactDOM.render(Vue.js
new Vue({
render: (h) => h(App),
}).$mount("#root");
Class component
class MyReactComponent extends React.Component {
render() {
return Hello world
;
}
}
Function component
function MyReactComponent() {
return Hello world
;
}
Hello World
React.js
function MyReactComponent(props) {
const { name, mark } = props;
return Hello {name}{mark}
;
}
MyReactComponent.propTypes = {
name: PropTypes.string.isRequired,
mark: PropTypes.string,
}
MyReactComponent.defaultProps = {
mark: '!',
}
...
Vue.js
Hello {{ name }}
...
Class component
class MyReactComponent extends React.Component {
save = () => {
console.log("save");
};
render() {
return ;
}
}
Function component
function MyReactComponent() {
const save = () => {
console.log("save");
};
return ;
}
React.js
function MyItem({ item, handleDelete }) {
return ;
}
...
function App() {
const handleDelete = () => { ... }
return Vue.js
...
Class component
class MyReactComponent extends React.Component {
state = {
name: 'world,
}
render() {
return Hello { this.state.name }
;
}
}
Function component
function MyReactComponent() {
const [name, setName] = useState("world");
return Hello {name}
;
}
Hello {{ name }}
Class component
class MyReactComponent extends React.Component {
state = {
count: 0,
};
increaseCount = () => {
this.setState({ count: this.state.count + 1 });
// 在更新之前获取当前状态，以确保我们没有使用陈旧的值
// this.setState(currentState => ({ count: currentState.count + 1 }));
};
render() {
return (
>{this.state.count}
);
}
}
Function component
function MyReactComponent() {
const [count, setCount] = useState(0);
const increaseCount = () => {
setCount(count + 1);
// setCount(currentCount => currentCount + 1);
};
return (
>{count}
);
}
>{{count}}
React没有双向绑定，因此我们需要自己处理数据流
function MyReactComponent() {
const [content, setContent] = useState("");
return (
setContent(e.target.value)}
/>
);
}
React.js没有计算属性，但我们可以通过react hook轻松实现
function DisplayName({ firstName, lastName }) {
const displayName = useMemo(() => {
return `${firstName} ${lastName}`;
}, [firstName, lastName]);
return {displayName};
}
...
{{displayName}}
...
React.js没有 watch 属性，但是我们可以通过react hook轻松实现
function MyReactComponent() {
const [count, setCount] = useState(0);
const increaseCount = () => {
setCount((currentCount) => currentCount + 1);
};
useEffect(() => {
localStorage.setItem("my_count", newCount);
}, [count]);
return (
>{count}
);
}
>{{count}}
React.js
function MyReactComponent({ children }) {
return {children};
}
...
Hello World
Vue.js
Hello World
React.js
function MyReactComponent() {
return
