一篇文章教你并列比较React.js和Vue.js的语法【实践】

作者：杜尼卜

转发链接：https://segmentfault.com/a/1190000022531144

前言

React.js和Vue.js都是很好的框架。而且Next.js和Nuxt.js甚至将它们带入了一个新的高度，这有助于我们以更少的配置和更好的可维护性来创建应用程序。但是，如果你必须经常在框架之间切换，在深入探讨另一个框架之后，你可能会轻易忘记另一个框架中的语法。在本文中，我总结了这些框架的基本语法和方案，然后并排列出。我希望这可以帮助我们尽快掌握语法，不过限于篇幅，这篇文章只比较React.js和Vue.js，下一篇再谈Next.js个Nuxt.js。

Github：https://github.com/oahehc/react-vue-comparison

Render

React.js

<code>ReactDOM.render(, document.getElementById("root"));/<code>

Vue.js

<code>new Vue({
  render: (h) => h(App),
}).$mount("#root");/<code>

基本组件

React.js

Class component

<code>class MyReactComponent extends React.Component {
  render() {
    return 
Hello world
;
  }
}/<code>

Function component

<code>function MyReactComponent() {
  return 
Hello world
;
}/<code>

Vue.js

<code>
  
Hello World

/<code>

Prop

React.js

<code>function MyReactComponent(props) {
  const { name, mark } = props;
  return 
Hello {name}{mark}
;
}
MyReactComponent.propTypes = {
  name: PropTypes.string.isRequired,
  mark: PropTypes.string,
}
MyReactComponent.defaultProps = {
  mark: '!',
}
...
/<code>

Vue.js

<code>
  
Hello {{ name }}

 
...
/<code>

事件绑定

React.js

Class component

<code>class MyReactComponent extends React.Component {
  save = () => {
    console.log("save");
  };
  render() {
    return ;
  }
}/<code>

Function component

<code>function MyReactComponent() {
  const save = () => {
    console.log("save");
  };
  return ;
}/<code>

Vue.js

<code>
  

/<code>

自定义事件

React.js

<code>function MyItem({ item, handleDelete }) {
  return ;
  /*
   * 应用useCallback钩子来防止在每次渲染时生成新的函数。
   *
   * const handleClick = useCallback(() => handleDelete(item), [item, handleDelete]);
   *
   * return ;
  */
}
...
function App() {
  const handleDelete = () => { ... }
  return 
}/<code>

Vue.js

<code>
  

 
...

  

/<code>

State

React.js

Class component

<code>class MyReactComponent extends React.Component {
  state = {
    name: 'world,
  }
  render() {
    return 
Hello { this.state.name }
;
  }
}/<code>

Function component

<code>function MyReactComponent() {
  const [name, setName] = useState("world");
  return 
Hello {name}
;
}/<code>

Vue.js

<code>
  
Hello {{ name }}
   
  

/<code>

Change-State

React.js

Class component

<code>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}
        
      

    );
  }
}/<code>

Function component

<code>function MyReactComponent() {
  const [count, setCount] = useState(0);
  const increaseCount = () => {
    setCount(count + 1);
    // setCount(currentCount => currentCount + 1);
  };
  return (
    

      
{count} 

      
    

  );
}/<code>

Vue.js

<code>
  

    
{{count}}
    
  


/<code>

双向绑定 (仅Vue.js)

React.js

React没有双向绑定，因此我们需要自己处理数据流

<code>function MyReactComponent() {
  const [content, setContent] = useState("");
  return (
     setContent(e.target.value)}
    />
  );
}/<code>

Vue.js

<code>
  

/<code>

计算属性

React.js

React.js没有计算属性，但我们可以通过react hook轻松实现

<code>function DisplayName({ firstName, lastName }) {
  const displayName = useMemo(() => {
    return `${firstName} ${lastName}`;
  }, [firstName, lastName]);
  return 
{displayName}
;
}
...
/<code>

Vue.js

<code>
  
{{displayName}}

 
...
/<code>

Watch

React.js

React.js没有 watch 属性，但是我们可以通过react hook轻松实现

<code>function MyReactComponent() {
  const [count, setCount] = useState(0);
  const increaseCount = () => {
    setCount((currentCount) => currentCount + 1);
  };
  useEffect(() => {
    localStorage.setItem("my_count", newCount);
  }, [count]);
  return (
    

      
{count}
      
    

  );
}/<code>

Vue.js

<code>
  

    
{{count}}
    
  


/<code>

Children-and-Slot

React.js

<code>function MyReactComponent({ children }) {
  return 
{children}
;
}
...
Hello World/<code>

Vue.js

<code>
  

    
  

 
...
Hello World/<code>

渲染HTML

React.js