React是用于构建用户界面的JS库,只提供UI层面的解决方案,遵循组件设计模式、声明式编程和函数式编程,使用虚拟DOM来操作真实DOM,遵循从高阶组件到低阶组件的单向数据流,帮助我们将界面划分成各个独立的小块,每一个块就是组件,组件之间可以组合、嵌套,构成总体页面
1.JSX语法
2.单向数据流绑定
3.虚拟DOM
4.声明式编程
5.Component
声明式编程是一种编程范式,他关注的是你要做什么,而不是如何做,它表达逻辑,而不是显式地定义步骤,这意味着我们要根据这个逻辑的计算来声明要显示的组件
React中声明式编程例如:
//JS中实现
//创建地图
const map = new Map.map(document.getElementById("map"),{
zoom:4,
center:{lat,lng},
});
//创建标记
const marker = new Map.marker({
position:{lat,lng},
title:"Hello Marker",
});
//添加标记
marker.setMap(map);
//在React中实现
<Map zoom={4} center={(lat,lng)}>
<Marker position={(lat,lng)} title={"Hello Marker"} />
</Map>
在React中一切皆为组件,通常将应用程序的整个逻辑分解为小的单个部分,每个独立的部分就是组件,组件可以是一个函数一个类,它接收数据输入,处理并返回在UI中呈现的React元素
例如:
//函数式组件
const Header = ()=>{
return (
<Jumbutton style={{backgroundColor:"red"}}>
<h1>Hello</h1>
</Jumbutton>
)
}
//类组件
class Dashboard extends React.Component{
constructor(props){
super(props);
this.state={};
}
render(){
return (
<div className="dashboard">
<ToDoForm/>
<ToDoList/>
</div>
)
}
}
1.可组合:嵌套使用
2.可重用:不同场景复用组件
3.可维护:每个小组件只有自己的逻辑,方便维护
1.高效灵活
2.声明式设计,简单使用
3.组件式开发,提高代码复用率
4.单向响应的数据流比双向绑定更安全,速度更快