说说React的事(一)
2016-07-19 23:44
381 查看
在公司用React做项目已经有一年多了,刚开始接触它的时候,给我的第一感觉就是很有颠覆性,一言不合就往JS里面插入Html代码。在MVC或者MVVM的框架里,我们宣扬的是视图V和模型M的分离,就是你负责扮靓,我负责赚钱。而React更多的是宣扬组件化思想,各位看官请看下图。
那React到底有哪些好处呢?为了方便看官查阅,我在此罗列了出来。
1. “轻”;react是很轻量的框架
2. 速度快,效率高;真正Dom其实是很巨大的,直接操作Dom很耗性能。React引入virtual dom概念,它不直接操作Dom而是将Dom结构存储在内存中,然后通过render中返回的内容做一个Dom Diff的比较,再将变化反映到Dom做局部更新。
3. 组件化思想;利用React可以轻松构建所需要的组件,并且各组件之间可轻易的组合,使得代码重用及各模块之间的测试变得更加简单。
4. 单向式响应数据流;React实现了单向式相应数据流,使得数据交互变得非常简易清晰,减少了许多重复代码,比传统的数据绑定简单。
那React到底是怎么一回事呢,我们现在来揭开它的神秘面纱,例行惯例先来一段Hello World。
以上的页面在浏览器打开就可以清晰的看到Hello, world!了。以上代码的最后一个
Html页面只需要引用它就可以了
需要注意的是,页面在某些浏览器打开可能会报错无法加载该文件例如谷歌chrome,原因是它不是http请求,如果放在服务器是完全没有问题的。但我们没有服务器想在本地看看怎么办,别急,还是有办法的。Mac可以先退出浏览器再用以下命令打开谷歌chrome。
Windows的可以右击谷歌浏览器快捷方式,打开属性在目标位置后加上如下参数
继续说上面的代码,我们可以看到我们使用了给id为example的元素渲染了内容Hello, world!而此时此刻我们所创建的这个React对象就是个简单的组件了。这里有一点切记组件名字开头一定要大写。
现在假如我不想组件返回一个Hello,world给我我想说点别的,比如说洋气的中文“你好世界”要怎么做呢。这时候我们可以用React的props。
props可用于父组件向子组件传值,这将是组件的一个初始值,一旦设置之后将不能修改。
你可能想父组件在没有传值给子组件时,子组件可以有默认的值可以用,这时候这个方法getDefaultProps就派上用场了。该方法是默认给props的各属性设置相应的值。
组件肯定避免不了要与用户互动,当有数据更新的时候,我们要怎么把新数据渲染到界面上呢。这里我们仍用上一个栗子来阐述这个问题,这时候我们会用到state。
同props一样,state也可以通过getInitialState设置初始值,当用户点击组件,调用了方法setState修改了状态值,导致组件的状态变化,每次修改完成后都会自动调用render方法重新渲染组件,从这里也可以看出单向数据流的特性。
看起来好像组件都可以调用props的值或者state里的属性值来展示渲染数据,但其实这两者是有根本区别的。
props一旦定义就不能改变,state可以随时改变
props主要组件用于初始化,state用于与用户交互和组件更新
我的简书链接:说说React的事(一)
那React到底有哪些好处呢?为了方便看官查阅,我在此罗列了出来。
1. “轻”;react是很轻量的框架
2. 速度快,效率高;真正Dom其实是很巨大的,直接操作Dom很耗性能。React引入virtual dom概念,它不直接操作Dom而是将Dom结构存储在内存中,然后通过render中返回的内容做一个Dom Diff的比较,再将变化反映到Dom做局部更新。
3. 组件化思想;利用React可以轻松构建所需要的组件,并且各组件之间可轻易的组合,使得代码重用及各模块之间的测试变得更加简单。
4. 单向式响应数据流;React实现了单向式相应数据流,使得数据交互变得非常简易清晰,减少了许多重复代码,比传统的数据绑定简单。
那React到底是怎么一回事呢,我们现在来揭开它的神秘面纱,例行惯例先来一段Hello World。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="build/react.js"></script> <script src="build/react-dom.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') ); </script> </body> </html>
以上的页面在浏览器打开就可以清晰的看到Hello, world!了。以上代码的最后一个
var HelloWorld = React.createClass({ render: function() { return ( <h1>Hello, world!</h1> ); } }); ReactDOM.render(<HelloWorld/>, document.getElementById("example"));
Html页面只需要引用它就可以了
<script type="text/babel" src="src/helloworld.js"></script>
需要注意的是,页面在某些浏览器打开可能会报错无法加载该文件例如谷歌chrome,原因是它不是http请求,如果放在服务器是完全没有问题的。但我们没有服务器想在本地看看怎么办,别急,还是有办法的。Mac可以先退出浏览器再用以下命令打开谷歌chrome。
open -a Google\ Chrome --args --disable-web-security --allow-file-access-from-files --user-data-dir=""
Windows的可以右击谷歌浏览器快捷方式,打开属性在目标位置后加上如下参数
--args --disable-web-security --allow-file-access-from-files --user-data-dir=""
继续说上面的代码,我们可以看到我们使用了给id为example的元素渲染了内容Hello, world!而此时此刻我们所创建的这个React对象就是个简单的组件了。这里有一点切记组件名字开头一定要大写。
现在假如我不想组件返回一个Hello,world给我我想说点别的,比如说洋气的中文“你好世界”要怎么做呢。这时候我们可以用React的props。
var HelloWorld = React.createClass({ render: function() { return ( <h1>{this.props.words}</h1> ); } }); ReactDOM.render(<HelloWorld words="你好世界"/>, document.getElementById("example"));
props可用于父组件向子组件传值,这将是组件的一个初始值,一旦设置之后将不能修改。
你可能想父组件在没有传值给子组件时,子组件可以有默认的值可以用,这时候这个方法getDefaultProps就派上用场了。该方法是默认给props的各属性设置相应的值。
var HelloWorld = React.createClass({ getDefaultProps: function(){ return { words: "你好世界" }; }, render: function() { return ( <h1>{this.props.words}</h1> ); } }); ReactDOM.render(<HelloWorld/>, document.getElementById("example"));
组件肯定避免不了要与用户互动,当有数据更新的时候,我们要怎么把新数据渲染到界面上呢。这里我们仍用上一个栗子来阐述这个问题,这时候我们会用到state。
var HelloWorld = React.createClass({ getInitialState: function(){ return { words: "Hello, world!" }; }, sayChinese: function(){ this.setState({words: "你好,世界!"}); }, render: function() { return ( <div> <h1>{this.state.words}</h1> <button onClick={this.sayChinese}>Say Chinese!</button> </div> ); } }); ReactDOM.render(<HelloWorld/>, document.getElementById("example"));
同props一样,state也可以通过getInitialState设置初始值,当用户点击组件,调用了方法setState修改了状态值,导致组件的状态变化,每次修改完成后都会自动调用render方法重新渲染组件,从这里也可以看出单向数据流的特性。
看起来好像组件都可以调用props的值或者state里的属性值来展示渲染数据,但其实这两者是有根本区别的。
props一旦定义就不能改变,state可以随时改变
props主要组件用于初始化,state用于与用户交互和组件更新
我的简书链接:说说React的事(一)
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- 最后一次说说闭包
- Ajax
- HTML5调用摄像头实例
- 2019年开发人员应该学习的8个JavaScript框架
- Powershell 创建炫丽美观的Html报表
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法