1.React的基本概念
React是Facebook开发出的一款JS库 随着Fackbook的日益壮大认为MVC无法满足他们的扩展需求 然后就有了React
2.特点
1.react不使用模板
2.react不是一个MVC框架
3.响应式
4.react是一个轻量级的js库
3.原理
虚拟DOM react把DOM树抽象成为一个JS对象
diff算法
1.虚拟DOM确保一定对界面上真正发生变化的部分进行实际的DOM操作
2.逐层次的来进行节点的比较
4.开发环境的搭建
1.react.js 核心文件
2.react-dom.js 渲染页面中的DOM 当前文件依赖于react核心文件
3.babel.js ES6转化成 ES5 JSX语法转换成JavaScript 因为浏览器并不认识JSX语法 对浏览器进行代码兼容
下载
react 核心包 npm i react --save
react-dom npm i react-dom --save
babel npm i babel-standalone --save
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="./node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
<!-- 创建dom跟节点 -->
<div id="box">
</div>
<script type="text/babel">//必须写text/babel 把jsx语法转换为es5
//jsx = JavaScript xml JavaScript的扩展语法
//优点:
//1.执行的效率更快
//2.他是类型安全的,编译的过程中就能及时的发现错误
//3.在使用jsx的时候编写模板会更加简单和快速
//4.注意: jsx中HTML标签必须按照w3c的规范来写
let MyBox=<h1>Hello Word</h1>//创建一个标签变量
ReactDOM.render(MyBox,document.querySelector("#box"));//渲染到页面=塞进id为box的盒子里
</script>
</body>
</html>
<style>
</style>
JSX语法的注释
<body>
<!-- 创建dom跟节点 -->
<div id="box">
</div>
<script type="text/babel">//必须写text/babel 把jsx语法转换为es5
let message='我是肖哥'
let MyBox=<div>//需要一个根标签包起来
{/*我是注释的*/}
{message}
</div>
ReactDOM.render(MyBox,document.querySelector("#box"));//渲染到页面=塞进id为box的盒子里
</script>
</body>
JSX语法进阶
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="./node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
<!-- 创建dom跟节点 -->
<div id="box">
</div>
<script type="text/babel">//必须写text/babel 把jsx语法转换为es5
let message='我是肖哥'
let num=0;
let url="https://www.baidu.com/";
let obj ={
name:"肖哥",
age:20,
sex:'男'
}
let pcolor={
color:'red'
}
let arr=[1,2,3,4,5,6]
function fun(){
return '我是你爸爸'//返回值
}
function fun2(obj){//参数接收
return `我的名字叫:${obj.name},我的年龄:${obj.age},我的性别:${obj.sex}`//使用了es6的中模板字符串 不懂查资料
}
let MyBox=<div>
{/*渲染*/}
{message}
{/*计算*/}
{num+1}
{/*三元判断*/}
{num==0?'我是0':'我不是'}
{/*函数的使用*/}
{fun()}
{/*函数的传参*/}
{fun2(obj)}
{/*当属性值使用*/}
<a href={url}>点我去百度</a>
{/*渲染数组*/}
{arr.map((item,index)=>{
return <p key={index}>{item}</p>//不加key为报错 因为浏览器无法识别谁是谁
})}
{/*标签颜色的添加,也可以变量添加,因为变量传的是一个对象 所以在标签样式里也要是一个对象*/}
<p style={{color:"yellow"}}>我是个好色的标签</p>
<p style={pcolor}>我是个红色的标签</p>
{/*className添加样式 为什么不用class?因为JSX语法不支持class,但是支持className*/}
<p className="active">我是个绿色的标签</p>
</div>
ReactDOM.render(MyBox,document.querySelector("#box"));//渲染到页面=塞进id为box的盒子里
</script>
</body>
</html>
<style>
.active{
color:green;
}
</style>
对象遍历
var obj ={
name:"小哥哥",
age:21
}
console.log(obj.name)
console.log(obj['name'])
//点的话会方便很多
//但是要注意 如果key是一个变量的话 就不能使用点这种方式来取值
console.log(Object.keys(obj))//返回一个数组类型的数据 得知是对象中的键(key)
console.log(Object.value(obj))//返回一个数组类型的数据 返回内容是对象的值(value)
<body>
<!-- 创建dom跟节点 -->
<div id="box">
</div>
<script type="text/babel">//必须写text/babel 把jsx语法转换为es5
let obj={
name:'肖',
age:21,
sex:'男'
}
let MyBox=<div>
{Object.keys(obj).map((item,index)=>{
return <p key={index}>{obj[item]}</p>
})}
</div>
ReactDOM.render(MyBox,document.querySelector("#box"));//渲染到页面=塞进id为box的盒子里
</script>
</body>
面向组件
1.组件到底是什么?
高耦合低内聚 搞耦合就是把逻辑紧密的内容放在一个组件当中 低内聚把不同组件的依赖关系尽量弱化 每个组件尽可能的独立起来
2.组件当中的重要内容
构建方式
组件的属性
生命周期
3.演变过程 传统的组件有几个明显的特点
简单的生命周期呈现
简单的封装
明显的数据流动 当一个项目复杂的时候 传统的组件化根本不能很好的把结构样式和行为结合 让项目很难维护
4.react的组件分为3个部分
属性props
状态state
生命周期
5.组件与组件化
组件就是用实现页面局部功能的代码集合 简化页面的复杂程度 提高运行效率
组件化 当前程序都是使用组件完成的 那么就是一个组件化的应用
6.组件的创建
函数组件/无状态组件
类组件
<script type="text/babel">//必须写text/babel 把jsx语法转换为es5
//无状态组件的创建
function Fun(){
return <p>我是一个无状态的沙雕</p>
}
//函数名为一个标签名 单标签 双标签都可以表示
let MyBox=<div>
<Fun/>
</div>
ReactDOM.render(MyBox,document.querySelector("#box"));//渲染到页面=塞进id为box的盒子里
</script>
<script type="text/babel">//必须写text/babel 把jsx语法转换为es5
//类组件的创建 组件名首字母大写
class MyBox extends React.Component{
render(){
return(
<div>类组件</div>
)
}
}
//函数名为一个标签名 单标签 双标签都可以表示
ReactDOM.render(<MyBox/>,document.querySelector("#box"));//渲染到页面=塞进id为box的盒子里
</script>
网友评论