1.了解mvc模式与mvvm模式
mvc
后台主导开发的思想。这种思想一般应用在后端中的web层,m
表示model
数据模型,v
表示view
视图,c
表示controller
控制器。在 servlet
、jsp
中主要应用的就是mvc
思想。
mvvm
前后台分离开发中的前端思想。m
表示model
数据模型,v
表示view
视图,vm
表示视图模型
,负责把Model
的数据同步到View
显示出来,还负责把View
的修改同步回Model
。React
、Vue
、AngularJS
中主要应用的就是mvvm
思想。
2.React简介
认识 React
- React是一个用于构建用户界面的 JAVASCRIPT 库。
- React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。
- React起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。
- React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。
React特点
声明式设计
:React采用声明范式,可以轻松描述应用。高效
:React通过对DOM的模拟,最大限度地减少与DOM的交互。灵活
:React可以与已知的库或框架很好地配合。JSX
:JSX 是JavaScript语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。组件
:通过 React构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。单向响应的数据流
:React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比
传统数据绑定更简单。
React生态圈
react
的生态体系比较庞大,它在web端,移动端,桌面端、服务器端,VR领域都有涉及。react
可以说是目前为止最热门,生态最完善,应用范围最广的前端框架
。react
结合它的整个生态,它可以横跨web端,移动端,服务器端,乃至VR领域。
React安装
使用CDN
注意: 在浏览器中使用 Babe
l 来编译 JSX
效率是比较低的。如果在html中直接使用react需要导
入react
、react-dom
、babel
。
<!-- 导入react -->
<script src="https://cdn.bootcss.com/react/16.6.0/umd/react.development.js"></script>
<!-- 导入react-dom -->
<script src="https://cdn.bootcss.com/react-dom/16.6.0/umd/reactdom.development.js"></script>
<!-- 导入babel -->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
使用脚手架
- 安装node,并且node版本应该满足 Node >= 6 and npm >= 5.2
$ node -v
- 全局安装脚手架
$ cnpm install -g create-react-app
- 使用脚手架创建工程
$ create-react-app my-app
- 启动工程
$ cd my-app/
$ npm start
3.JSX
简介
React
使用 JSX
来替代常规的 JavaScript
。JSX
是一个看起来很像 XML
的 JavaScript
语法扩展。JSX
是javascript
的语法糖。
我们不需要一定使用 JSX,但它有以下优点:
- JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。
- 它是类型安全的,在编译过程中就能发现错误。
- 使用 JSX 编写模板更加简单快速。
4.组件
组件定义
定义组件最简单的方式就是编写 JavaScript
函数,该函数是一个有效的 React
组件,因为它接收唯一带有数据的 “props”
(代表属性)对象与并返回一个 React
元素。这类组件被称为“函数组件”
,因为它本质上就是 JavaScript
函数。
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
组件调用
通过标签来调用已经定义好的组件。
5.渲染
基本渲染
将变量的值直接显示到页面中。在jsx
中可以在大括号直接编写Js
代码,如果是变量,则直接输出。
function Welcome(props) {
let msg = 'hello world'
return <h1>{msg}</h1>;
}
列表渲染
可以通过使用 {}
在 JSX
内构建一个元素集合, key
帮助 React
识别哪些元素改变了,比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。
<ul className="list">
{
arr.map((item,index) => return <li key={index}>{item}</li>)
}
</ul>
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>列表渲染</title>
<script src="./js/react.js"></script>
<script src="./js/react-dom.js"></script>
<script src="./js/babel.min.js"></script>
<script type="text/babel">
//列表渲染 循环渲染-for渲染
let arr = ['苹果','葡萄','桃子'];
function MyCom(props) {
return(
<div>
<ul>
{
//如果要在JSX中写JS代码要用{}
//如果要访问变量要用{}
props.arr.map((item,index)=>{
return <li key={index}>{item}</li>;
})
}
</ul>
</div>
);
}
//使用组件
ReactDOM.render(<MyCom arr={arr}/>,document.getElementById('one'));
</script>
</head>
<body>
<div id="one"></div>
</body>
</html>
条件渲染
React
中的条件渲染和JavaScript
中的一样,使用JavaScript
运算符if
或者条件运算符
去创建元素来表现当前的状态,然后让React
根据它们来更新UI
。
function UserInfo(props){
let {user} = props;
if(user) {
return ( <div>欢迎您 {user.name} 头像</div> );
}
return ( <div><a href="#">亲,请登录</a></div> );
}
ReactDOM.render(<UserInfo user={{name:'zhangsan'}}/>,document.getElementById('app'));
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>条件渲染</title>
<script src="./js/react.js"></script>
<script src="./js/react-dom.js"></script>
<script src="./js/babel.min.js"></script>
<script type="text/babel">
function IsCom(props) {
//使用解构获取属性
let {show,user,temp} = props;
if (show&&user) {
return <h2>已登录</h2>;
}
return <div><h2>请登录</h2>{temp}---{Array.isArray(temp)+''}</div>;
}
let show = false;
let user = {
name:'tom'
};
ReactDOM.render(<IsCom show={show} user={user} temp={[1,2,3]}/>,document.getElementById('root'));
</script>
</head>
<body>
<div id="root"></div>
</body>
</html>
6.组件传值
props
调用组件的时候可以传递任何参数作为prop
,如果传递字符串需要将字符串直接作为属性值进行传递,如果是要传递其他数据类型,需要将值放入到{}
中进行传递。
- 传递字符串
<MyComponent foo='this is foo' />
- 传递数字
<MyComponent foo={1,2,3} />
// foo=3 - 传递布尔类型
<MyComponent foo={true} />
- 传递数组类型
<MyComponent foo={[1,2,3,4]} />
//foo=1234 - 传递对象
<MyComponent foo={{name: 'terry' }} />
7.Fragment
Fragments
允许将子列表分组,而无需向 DOM 添加额外节点。
class Table extends React.Component {
render() {
return (<table><tr><Columns /></tr></table>);
}
}
如果Columns为如下代码则无效,因为在tr标签中不能插入div标签。
class Columns extends React.Component {
render() {
return ( <div> <td>Hello</td> <td>World</td> </div> );
}
}
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>组件嵌套</title>
<script src="./js/react.js"></script>
<script src="./js/react-dom.js"></script>
<script src="./js/babel.min.js"></script>
<script type="text/babel">
//表格组件(类组件)
class MyTable extends React.Component{
constructor(props){
super(props);
this.state = {};
}
render(){
return(
<table>
<tbody>
<tr>
<MyTd />
</tr>
</tbody>
</table>
);
}
}
//表格的td组件
class MyTd extends React.Component{
constructor(props){
super(props);
this.state = {};
}
render(){
return(
<React.Fragment>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</React.Fragment>
);
}
}
ReactDOM.render(<MyTable />,document.getElementById('root'));
</script>
</head>
<body>
<div id="root"></div>
</body>
</html>