React学习笔记(一) 基础知识
现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我。
React的基础很简单,极易上手。
React全都是围绕着组件的, 所以React基础也就是:写组件的jsx、组件的生命周期以及组件的属性和状态。
- jsx,只要是用过html模板的分分钟就能写了;
- 生命周期就是组件在创建、销毁、更新阶段的那几个回调函数,让你有机会再这几个关键点上对组件和环境做点手脚;
- 属性就像html标签里的属性一样决定了这个组件是什么样的;
- 状态,像是属性很像也和属性很不同,它是可变的, 是控制组件的唯一入口,这个以后可得细说。
- redux,其实就是在鼓捣状态。
React一个标新立异的地方:jsx(js扩展)
JSX 的基本语法规则:遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;遇到代码块(以 { 开头),就用 JavaScript 规则解析。
在text/jsx中的代码最初不会被浏览器理会,他会被react的JSXTransformer编译为常规的JS,然后浏览器才能解析。
<script src="react/build/react.js"></script> <script src="react/build/JSXTransformer.js"></script>
或者
<script src="react/build/react.js"></script> <script src="babel/browser.js"></script>
前者对应的type="text/jsx",后面对应的type="text/babel"
推荐使用text/babel,因为它支持ES6语法
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>React学习</title> <script src="./js/react.js"></script> <script src="./js/react-dom.js"></script> <script src="./js/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>
react.js 是 React 的核心库
react-dom.js 是提供与 DOM 相关的功能
Browser.js 的作用是将 JSX 语法转为 JavaScript 语法
ReactDOM.render()
ReactDOM.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点。
React.createClass()
React.createClass 方法就用于生成一个组件类
var Myfirst = React.createClass({ render : function(){ return <div>我的第一个组件</div>; } }) ReactDOM.render( <Myfirst />, document.getElementById('example') );
ReactJS有一些奇怪的地方:
1 : 组件首字母必须大写
2 : render 是表达的意思,它的匿名函数必须有一个return
组件的属性可以在组件类的 this.props 对象上获取,比如 name 属性就可以通过 this.props.name 读取
var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; } }); ReactDOM.render( <HelloMessage name="John" />, document.getElementById('example') );
组件嵌套(component):组件的高复合应用
一个页面我们可以认为是一个组件集合,它是由多个组件嵌套而成
<script type="text/babel"> var Myfirst = React.createClass({ render : function(){ return ( <div>我的第一个组件</div> <MySecond /> ); } }) var MySecond = React.createClass({ render : function(){ return ( <h3>我的第二个组件</h3> <MyThird /> ); } }) var MyThird = React.createClass({ render : function(){ return (<h6>我的第六个组件</h6>) } }) ReactDOM.render( <Myfirst />, document.getElementById('example') ); </script>
上面的代码会报错:Uncaught SyntaxError: embedded: Adjacent JSX elements must be wrapped in an enclosing tag
提示我们,嵌套的组件(component),必须要用一个标签包含,修改如下:
<script type="text/babel"> var Myfirst = React.createClass({ render : function(){ return ( <div> {/* 添加的包含标签 */} <div>我的第一个组件</div> <MySecond /> </div> ); } }) var MySecond = React.createClass({ render : function(){ return ( <div> {/* 添加的包含标签 */} <h3>我的第二个组件</h3> <MyThird /> </div> ); } }) var MyThird = React.createClass({ render : function(){ return (<h6>我的第六个组件</h6>) } }) ReactDOM.render( <Myfirst />, document.getElementById('example') ); </script>
最新文章
- iOS controller解耦探究实现——第一次写博客
- 真正高效的SQLSERVER分页查询(多种方案)
- OC--编码建议
- Python操作Excel之xlwt
- 持续集成工具Jenkins学习总结
- mysql悲观锁总结和实践
- Android中Spanner获取选中内容和选中位置,根据位置选择对象
- 安装Git
- Android7.0 拨号盘应用源码分析(一) 界面浅析
- ";Failed to fetch URL https://dl-ssl.google.com/android/repository/addons_list.xml,reason: Connection
- fseek/ftell/rewind/fgetpos/fsetpos函数使用-linux
- KMP算法&;next数组总结
- 使用js dom和jquery分别实现简单增删改
- 【朝花夕拾】Handler篇
- jmeter向ActiveMQ发送消息_广播/订阅(Topics 队列)
- java面试题复习(七)
- Python pip源更改
- php获取数据库中数据
- Java开发人员必须掌握的Linux命令(二)
- Python-使用PyQT生成图形界面