Vue和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>

  -----CodePen演示-----this

  能够发现React的加载完成后的钩子即使重复点击也只会触发一次,而Vue的钩子在每次都会触发响应周期函数,于是为了让React达到点击更新视图的效果,只有经过在其余钩子好比getDerivedStateFromProps中嵌入逻辑来实现从新渲染。spa

相关文章
相关标签/搜索