Vue和React

時間 2019-11-11

標籤 vue react 欄目 React 简体版

原文原文鏈接

　　這兩款框架用了這麼久，寫一寫心得體會用來往後緬懷。。數組

　　兩個框架雖然出身不一樣，內在的聯繫卻也是千絲萬縷，都是經過虛擬DOM來合併DOM操做，Vue有VNode虛擬節點，React有ReactNode虛擬節點。瀏覽器

　　同爲框架，天然少不了模板語法，Vue使用模板字符串簡單粗暴，React爲了在js裏清晰地表達DOM結構，使用了jsx語法。相同點是二者最終要到被各自的createElement方法解析並造成一個井井有條的對象（虛擬dom）。babel

　　對於能夠觸發事件的事件監聽器，React對傳入的Event原型進行了再包裝，刪刪減減，自立一個合成Event，畢竟衆瀏覽器的口味難以調和，Vue的話則是搬運原生Event。app

　　Vue在官網就旗幟鮮明地宣稱是一個漸進式的非侵入式框架，言下之意就是某些框架是侵入式的；Vue使用Slot來解決dom結構靈活性的問題，React則利用jsx語法的props輕鬆實現各類dom的交叉混用，而且特地強調這和某些框架的"slot「這一律念不一樣，言下之意就是某些框架實現一個簡單的問題老費勁了，還特地弄了個概念出來。框架

　　對於侵入，說實話我剛開始也不太明白這是個啥意思，看了官網解釋，把其歸結到Vue用setter實現的原理，難道把屬性改爲存取器就是非侵入性？這樣說的話React是否就具備侵入性呢，畢竟不是簡單經過setter來實現響應式的。dom

　　Vue和React二者在render函數方面的處理也有不一樣：函數

<body>
    Vue:
    <div id="app">
      <button onclick="appExm.$mount('#app')">刷新Vue視圖</button>
      <ul>
        <li v-for="(val,index) in arr" :key="index">
          {{ val }}
        </li>
      </ul>
    </div>
    React:
    <div id="app2"></div>
    <script>
      var appExm = new Vue({
        el: '#app',
        data: {
          arr: [1, 2, 3]
        },
        mounted() {
          console.log('Vue did mount');
          this.arr[1] = Math.random();
        }
      });
    </script>
    <script type="text/babel">
      const { useEffect, Fragment, Component } = React;
      const render = () => ReactDOM.render(<M />, app2);
      // 函數組件
      // const arr = [1, 2, 3];
      // const M = props => {
      //   useEffect(() => {
      //     arr[1] = Math.random();
      //   });
      //   return (
      //     <Fragment>
      //       <button onClick={render}>刷新React視圖</button>
      //       <ul>
      //         {arr.map(ele => (
      //           <li>{ele}</li>
      //         ))}
      //       </ul>
      //     </Fragment>
      //   );
      // };

      // 類組件
      class M extends Component {
        state = { arr: [1, 2, 3] };
        componentDidMount() {
          console.log('React M did mount');
            this.state.arr[1] = Math.random();
        }
        // static getDerivedStateFromProps(props, state) {
        //   state.arr[1] = Math.random();
        // }
        render() {
          return (
            <Fragment>
              <button onClick={render}>刷新React視圖</button>
              <ul>
                {this.state.arr.map(ele => (
                  <li>{ele}</li>
                ))}
              </ul>
            </Fragment>
          );
        }
      }
      render();
    </script>
  </body>