一篇文章教你並列比較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