react学习

react vs vue

 <script type="text/babel">
      var myComponent=React.createClass({
          handleClick:function(){
              this.refs.myTextInput.focus();
          },
          render:function(){
            return (
                <div>
                    <input type="text" ref="myTextInput"/>
                    <input type="button" value="Focus the text input"
                    onClick={this.handleClick}/>
                </div>
            );
          }
      });
      ReactDOM.render(
          <myComponent/>,
          document.getElementById('example')
      )
    </script>

在组件myComponent中有类似于xml的文件,其实并不是xml,而是一种虚拟dom的元素。
虚拟dom的好处是:
在dom节点改变时,可以先修改虚拟dom,再修改真实dom,极大提高了性能。
react
ref refs属性:
react因为组件中是虚拟属性,所以在组件中的input和用户进行互动时,无法直接拿到用户的真实输入,此时需要一个回调函数settimeout或者onclick的会调函数,确定在dom节点已经插入页面中之后再进行读取。
vue
vue中组件间进行通信是根据组件内的input
组件外绑定自定义事件,组件内input元素绑定事件,触发组件外面的自定义事件,再将内容传递出来。

this.$emit('jumpTo',option);
<input  :jumpTo="jumpTo">
methods:{
  jumpTo(option){

  }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 3. JSX JSX是对JavaScript语言的一个扩展语法, 用于生产React“元素”,建议在描述UI的时候...
    pixels阅读 2,896评论 0 24
  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 2,860评论 1 18
  • Learn from React 官方文档 一、Rendering Elements 1. Rendering a...
    恰皮阅读 2,691评论 2 3
  • 官网地址https://facebook.github.io/react/docs/hello-world.htm...
    pixels阅读 717评论 0 6
  • 写在前面 React入门学习笔记。 教程可参考:React 教程 | 菜鸟教程阮一峰的网络日志 > React 入...
    年少有van阅读 417评论 1 1