是什么
React,用于构建用户界面的JavaScript库,只提供了UI层面的解决方案遵循组件设计模式、声明式编程范式和函数式编程概念,以使前端应用程序更高效
使用虚拟DOM来有效地操作DOM,遵循从高阶组件到低阶组件的单项数据流帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合、嵌套、构成整体页面
react类组件使用一个名为render()的方法或者函数组件return,接受输入的数据并返回需要展示的内容
class HelloMessage extends React.Component{
render(){
return <div>Hello{this.props.name}</div>
}
}
ReactDOM.render(
<HelloMessage name="Taylor"/>,
document.getElementById("hello-example")
)
上述这种类似XML形式就是JSX,最终会被babel编译为合法的JS语句调用
被传入的数据可在组件中通过this.props在render()访问
特性
组件化:React将UI划分为独立的组件,每个组件都有自己的状态(state)和属性(props),并可以通过嵌套和组合的方式构建复杂的界面。组件化使得代码复用和维护变得更加容易
声明式编程:声明式编程是一种编程范式,它关注的是你要做什么,而不是如何做
它表达逻辑而不显式定义步骤。这意味着我们需要根据逻辑的计算来生命显式的组件
如实现一个标记的地图:
通过命令式创建地图、创建标记、记忆在地图上添加的标记的步骤如下:
// 创建地图
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组件很容易使用,最终的代码简单易于维护
虚拟DOM:React使用虚拟DOM(Virtual DOM)作为中间层,在内存中维护一个轻量级的副本来表示真实的DOM结构。当UI的状态发生改变时,React会计算出新的虚拟DOM并与旧的虚拟DOM进行比较,然后只需更新需要改变的部分到真实的DOM。这种优化技术减少了直接操作DOM的次数,提高了性能和效率
高性能:由于React使用虚拟DOM和优化DOM更新算法,只更新变化的部分,而不是整个页面重新渲染,因此具有较高的性能。React采用批处理技术来最小化DOM操作,以及使用diff算法来准确地确定需要更新的部分,从而提高了快速且高效的渲染体验
生态系统:React拥有庞大和活跃的生态系统,有许多相关的第三方库、工具和社区支持。这些库可以增强React的功能和开发效率,例如React Router用于路由管理、Redux用于状态管理。这使得开发人员可以更快速地构建复杂的应用程序,并且可以从丰富的资源中获取帮助
跨平台开发:React还衍生出了一些衍生项目,如React Native,允许开发人员使用相同的技术栈来构建原生移动应用程序。这种跨平台的开发方式可以减少学习成本和开发成本,提高开发效率,并且维护成本相对较低