React框架概述
一、React框架概述
官网：https://reactjs.org/ 最新版V16.10
中文网：https://zh-hans.reactjs.org/
中文社区网：https://react-1251415695.cos-website.ap-chengdu.myqcloud.com/
由Facebook维护的MVVM框架，官方定义自己是一个“用于构建UI的JS库”——核心概念很少；但生态圈扩展非常广泛，如
React-Router：路由、
Redux： 状态保持、
ReactVR/360： 虚拟现实、
ReactNative：使用JS做App原生开发...
二、HTML元素属性(Attribute) vs JS DOM对象的属性(Property)
任何一个HTML元素都对应一个JSDOM对象，有两套属性系统。
HTML元素属性 JS DOM对象的属性
Attribute Property
-------------------------------------------------------------------------------
<img src="" title=""> img.src =""
img.id =""
img.title =""
--------------------------------------------------------------------------------
<img class=""> img.className = ""
--------------------------------------------------------------------------------
<label for=""> label.htmlFor = ""
--------------------------------------------------------------------------------
<td colspan=""> 没有对应项
---------------------------------------------------------------------------------
div.innerHTML =""
没有对应项 div.innerText =""
三、使用SCRIPT方式引入React
<div ></div>
<script src="js/react.js"></script> 提供React对象
<script src="js/react-dom.js"></script> 提供ReactDOM对象
<script>
let el = React.createElement(标签名,属性列表，内容/子元素)
ReactDOM.render( el, box )
</script>
/* 练习： 使用React在 #box中添加如下的DOM结构：
<div class="login">
<label for="uname">用户名</label>
<input type="text" ></input>
</div>
*/
<div ></div>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script>
let c1 =React.createElement(
\'label\',
{htmlFor:\'uname\'},
\'用户名:\'
)
let c2 = React.createElement(
\'input\',
{type:\'text\',id:\'uname\'}
)
let parent = React.createElement(
\'div\',
{className:\'login\'},
c1,
c2
)
//把上述元素渲染到DOM树
ReactDOM.render( parent,box );
</script>
四、JSX
JavaScript XML:形式是XML，本质是JS对象------可以看做是一种JS的变种(类似于TS) ------ 浏览器
无法理解JSX语法，必须用编译器转化为JS才能被浏览器执行。
JSX语法规范：
1.JSX不是字符串！最外侧不能有引号！
2.JSX形式上不是HTML语法，而是XML语法；故<br>必须写作<br/>;属性值必须用引号；有且只能有一个根元素。
3.JSX中可以使用HTML标签，但严格区分大小写-----任何HTML标签必须全小写,
自定义组件名必须使用大驼峰法则，如<MyHeader></MyHeader>
4.因为JSX中都是JS对象，所以属性都要使用DOM属性，而不是HTML属性，例如:
<p className="..."></p>
5.JSX片段中还可以出现JSX表达式：{ }
Babel：是一个第三方提供的JS变种编译器，可以把ES/TS/JSX转化为标准的JS代码,
使用方法：
<script src="js/babel.js"></script>
<script type="text/babel"></script>
练习：使用React在#box中添加如下的DOM结构-------使用JSX语法代替React.create()
<div class="login">
<label for="uname">用户名</label>
<input type="text" ></input>
</div>
<div >请稍候...</div>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
<script type="babel">
let el =
<div className="login">
<label htmlFor="uname">用户名</label>
<input type="text" ></input>
</div>
ReactDOM.render(el, box);
</script>
五、JSX中{ }表达式
提示：在JSX中，还可以使用{ }进行数据绑定或者运算，可以使用
在两种情形下：
1.<p>{表达式}</p> ------React中的内容绑定
2.<p title={表达式}></p> ------React中的属性绑定！
测试：JSX表达式中可以出现哪些语句：
1)算术运算:可以
2)比较运算:可以，但true/false都不显示
3)逻辑运算:可以，但true/false都不显示
4)三目运算：可以
5)调用函数：可以，对象成员函数或全局函数或匿名自调函数都可以
6)创建对象：只要是可以转换为字符串的对象就可以---------Angular中完全禁止。
7)调用全局对象方法(JSON.stringify()):可以------Angular中不可以
6.React中如何实现各种数据绑定
1.内容绑定:<p>{ 内容 }</p>
2.属性绑定:<img src={imgUrl} title={myTitle}/>
3.指令绑定:React中没有指令的概念
4.事件绑定:
5.双向数据绑定:
注意：因为React中没有指令，所以类似于ngFor/ngIf的实现有哪些特别-----很重要！具体
见手册"核心概念">第7/8章"
React中的条件渲染：
function check(){
if() return JSX
else return JSX
}
let element = <div>{ check( ) }</div>
React中的循环渲染：
注意：{ 数组 }绑定语句会把数组中的每个元素展开并添加为当前元素的子节点
let list =[ ... ]
let element = <ul>
{
list.map((e,i)=>{
return <li key={i}>{e}</li>
})
}
</ul>
练习：创建一个数组，保存如下员工信息：
[
{eid:101,ename:\'dingding\',salary:5000,sex:1},
{eid:102,ename:\'dongdong\',salary:6000,sex:1},
{eid:103,ename:\'yaya\',salary:7000,sex:0}
]
把上述数据渲染在一个table中，每个员工信息对应在一个tr,内部包含四个td
<div ></div>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
let emp =[
{eid:101,ename:\'dingding\',salary:5000,sex:1},
{eid:102,ename:\'dongdong\',salary:6000,sex:1},
{eid:103,ename:\'yaya\',salary:7000,sex:0}
]
//创建元素
let el =
<table width="100%">
<tbody>
{
emp.map((e,i)=>{
return <tr key={i}>
<td>{e.eid}</td>
<td>{e.ename}</td>
<td>{e.salary}</td>
<td>{e.sex}</td>
</tr>
})
}
</tbody>
</table>
//渲染元素
ReactDOM.render(el,app);
练习:创建一个变量声明用户当前的积分，若积分大于0，可以显示一个视频播放区域
(<video>),否则显示一段警告消息(<p>积分不足无法观看</p>)
<div ></div>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
<script type="text/babel">
let score=0;//let score=1000;
//创建元素
let el=
<div>
{(function(){
if(score>0) return <video></video>
else return <p>积分不足无法观看</p>
})()}
</div>
//渲染元素
ReactDOM.render(el,app)
7.React中的自定义组件
概念：组件是一段可以反复使用的页面片段
组件 = 模板 + 脚本(数据) + 样式
React提供了两种自定义组件的方法：
1.function组件-------一般只用于创建简单组件(只有模板)
function MyC01(){
return (JSX)
}
<MyC01></MyC01>
2.class组件-------适合于创建复杂组件(模板+脚本数据)
class MyC02 extends React.Component{
render(){
return （ JSX ）
}
}
<MyC02></MyC02>
提示：React中要求组件名必须使用"大驼峰命名法"!
- 上一篇 »JAVA学习中Swing概述中的JFrame学习
- 下一篇 »html的Vue.js框架概述