React复习小结
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React复习小结相关的知识,希望对你有一定的参考价值。
一、React的发展
facebook在构建instagram网站的时候遇见两个问题:
1、数据绑定的时候,大量操作真实dom,性能成本太高
2、网站的数据流向太混乱,不好控制
于是facebook起初调研过市场上已存的mvc框架,发现都不太满意,于是就推陈出新,开发了react框架,并在2013年五月份开源。
二、React概述
和angularJS一样react核心解决的问题是数据绑定,开发者只要将数据绑定好,剩下的开发中只要关注业务就行了
1、组件化开发 使用react开发的时候,构建任何的页面都是组件component
2、jsx语法和虚拟dom基于jsx语法进行 创建组件,react用变量的形式自定义了一套dom模型
3、组件具有生命周期 每个组件都有生命周期,开发者可以基于生命周期对组件进行管理
4、单向数据流
需要在head引入Js文件。
<script src="react.min.js" type="text/javascript" charset="utf-8"></script>//react.min.js--把react的核心方法/事件机制封装其中
<script src="react-dom.min.js" type="text/javascript" charset="utf-8"></script>//react-dom.min.js--把虚拟dom转换成真实dom的方法
<script src="browser.min.js" type="text/javascript" charset="utf-8"></script>//browser.min.js--把jsx语法/babel格式转成浏览器可识别的语法(本地文件不生效的时候,选择官网cdn引入)
三、React组件书写中需要注意的事项
<body> <!--存放组件的容器--> <div id="out"></div> </body> <script type="text/babel"> var sty1={ aa:{color:‘#ccc‘,fontSize:‘30px‘}, bb:{color:‘yellow‘}, tap1:function(){ alert(111) } } // 创建组件 var Demo=React.createClass({ tap:function(){ alert(‘事件机制‘) }, render:function(){ var sty={color:‘green‘,background:‘pink‘} var _this=this; var b=2; var zz; if(b>10){ zz={color:‘red‘} }else{ zz={color:‘blue‘} } return( <div> <h1 id="h1" name="hhh">初次接触react组件</h1> <h2 className="h2">hello world</h2> <h2 style={sty}>行间样式设置</h2> <p style={sty1.aa}>全局样式111</p> <p style={sty1.bb}>全局样式222</p> <p style={_this.sty2.cc}>原型样式111</p> <p style={_this.sty2.dd}>原型样式222</p> <button onClick={this.tap}>事件机制</button> <button onClick={sty1.tap1}>事件机制全局</button> <button onClick={_this.sty2.tap2}>事件机制原型</button> <h1 style={zz}>render内写入逻辑</h1> </div> ) } }) //原型样式写法 Demo.prototype.sty2={ cc:{‘color‘:‘firebrick‘}, dd:{color:‘gold‘}, tap2:function(){ alert(2222) } } //渲染 ReactDOM.render(<Demo/>,document.getElementById(‘out‘));
</script>
- 创建组件 首字母必须大写
React对象提供的createClass ({
render函数--主要创建组件的函数
返回的jsx语法 return(xml标签)--只能返回一个xml标签
}) - 渲染 ReactDOM.render (组件名---<组件名/>,真实dom容器)
- React JSX中的注释很有意思,也很特别。{/*要注释的内容*/}
4. CSS样式写法 第一种方法:#id name属性直接可用 Class类名 需要使用className属性设置
第二种方法:行间样式 style={json 对象} --这也是FaceBook主张的样式设置
第三种方法:全局样式
第四种方法:原型样式 组件内部通过this调用原型设置的样式 var _this=this;
注:原型样式设置的位置---(组件创建--组件渲染之间)
5.React中的事件机制 第一种:创建组件时设置 第二种:全局样式中设置 第三种:原型样式中设置函数
6.runder中也可以写入逻辑判断。
不足之处,望大神多多评论指教!
以上是关于React复习小结的主要内容,如果未能解决你的问题,请参考以下文章