React 简介

1、React的基本认识

官网:

1)         英文官网: https://reactjs.org/

2)         中文官网: https://doc.react-china.org/

 

介绍描述:

1)         用于构建用户界面的 JavaScript 库(只关注于View)

2)         由Facebook开源

 

React 特点:

1)         Declarative(声明式编码)

2)         Component-Based(组件化编码)

3)         Learn Once, Write Anywhere(支持客户端与服务器渲染)

4)         高效

5)         单向数据流

 

React 高效的原因:

1)         虚拟(virtual)DOM, 不总是直接操作DOM

2)         DOM Diff算法, 最小化页面重绘

 

React 基本使用:

基本js库:

1)         react.js: React的核心库

2)         react-dom.js: 提供操作DOM的react扩展库

3)         babel.min.js: 解析JSX语法代码转为纯JS语法代码的库

编码:

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
</head>
<body>
<div id="test"></div>
<script type="text/babel">
    //创建虚拟Dom元素
    const vDom = <h1>Hello React</h1>;
    //渲染虚拟 DOM 到页面真实 DOM 容器中
    ReactDOM.render(vDom,document.getElementById('test'));
</script>
</body>
</html>
复制代码

 

 

posted @   技术小白丁  阅读(670)  评论(0编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示