怎么制作网站获取ip,网站建设公司怎么做业务,免费网站软件app大全,响应式网站模版下载react中文官网
一、什么是react
React是一个由Facebook开源的JavaScript库#xff0c;用于构建用户界面。它基于组件化的思想#xff0c;将界面拆分成多个独立的、可复用的组件#xff0c;并通过组件之间的交互构建整个用户界面。React使用虚拟DOM#xff08;Virtual DOM…react中文官网
一、什么是react
React是一个由Facebook开源的JavaScript库用于构建用户界面。它基于组件化的思想将界面拆分成多个独立的、可复用的组件并通过组件之间的交互构建整个用户界面。React使用虚拟DOMVirtual DOM来实现高效的页面更新通过比对更新前后的虚拟DOM树的差异只对实际需要更新的部分进行操作从而提高页面性能。
React还引入了JSX语法使得开发者可以在JavaScript代码中直接编写HTML标签和组件提高了代码的可读性和开发效率。React还提供了丰富的生命周期方法和状态管理机制方便开发者管理和控制组件的生命周期和状态变化。
React具有跨平台的特点可以用于开发Web应用、移动应用以及其他平台上的用户界面。它被广泛应用于各种规模的项目中是目前最流行的前端开发框架之一。
二、React的发展史
React的发展历史可分为以下几个阶段 诞生和引入React最初由Facebook的工程师Jordan Walke于2011年创建。最初的版本是一个用于在Facebook内部使用的工具用于解决其大规模应用中复杂的UI渲染问题。 开源在2013年Facebook将React开源使其能够被更广泛的开发者使用和贡献。这一举措使React开始在开发者社区中流行起来。 React Native2015年Facebook发布了React Native这是一个使用React构建原生移动应用的框架。React Native使开发者可以使用React的编程模型和技术来构建跨平台的移动应用从而大大简化了移动应用的开发过程。 Hooks引入2018年React 16.8版本引入了Hooks这是一种新的特性使开发者可以在不使用类组件的情况下共享状态和逻辑代码。Hooks提供了更简单、更具可重用性的代码编写方式进一步提升了React的开发效率。 Concurrent Mode和Suspense2021年React 18版本引入了Concurrent Mode和Suspense。Concurrent Mode支持并发渲染能够使React应用更加响应和流畅。Suspense则提供了一种简单的方式来处理异步加载和代码分割使开发者可以更好地管理应用的性能和用户体验。
总体来说React在过去的几年里经历了快速的发展和演进。它通过提供简单且高效的开发方式成为了构建现代Web应用和移动应用的首选技术之一。同时React的开源社区也非常活跃不断为React提供新的功能和优化使其能够满足不断变化的开发需求。
三、React特点
React是一个用于构建用户界面的JavaScript库具有以下特点 组件化React的核心思想是将UI拆分成独立的可复用组件并通过组件的组合构建复杂的用户界面。每个组件可以管理自己的状态并通过props属性接收父组件传递的数据。 虚拟DOMReact使用虚拟DOMVirtual DOM机制来优化性能。它会将组件的状态变化转化为虚拟DOM的变化并通过Diff算法计算最小的DOM操作然后批量更新到真实DOM中以减少DOM操作带来的性能损耗。 单向数据流React采用了单向数据流的模式即数据的流动是单向的自上而下的单向流动。父组件通过props传递数据给子组件子组件不能直接修改props中的数据只能通过回调函数间接传递数据给父组件。 JSX语法React使用JSX语法将HTML标记和JavaScript代码集成在一起可以在JavaScript代码中直接写HTML标记提高了代码的可读性和可维护性。 高效灵活React具有高效和灵活的特点。它只更新必要的组件或DOM部分提高了性能。同时React可以与其他库或框架结合使用如React Native用于构建移动应用。 生态丰富React拥有庞大的开发者社区和丰富的插件生态系统提供了大量的第三方库和资源方便开发人员快速构建复杂的应用。
总的来说React具有组件化、虚拟DOM、单向数据流、JSX语法、高效灵活和丰富的生态等特点使得它成为构建用户界面的强大工具。
四、第一个react程序
!DOCTYPE html
htmlheadmeta charsetUTF-8 /titleHello react/titlescript srchttps://unpkg.com/react18/umd/react.development.js/scriptscript srchttps://unpkg.com/react-dom18/umd/react-dom.development.js/scriptscript srchttps://unpkg.com/babel/standalone/babel.min.js/script/headbodydiv idroot/divscript typetext/babelfunction MyApp() {return h1Hello, react!/h1;}const container document.getElementById(root);const root ReactDOM.createRoot(container);root.render(MyApp /);/script/body
/html以上代码的运行效果是
script标签引入了React、ReactDOM和Babel的库文件。 script srchttps://unpkg.com/react18/umd/react.development.js/scriptscript srchttps://unpkg.com/react-dom18/umd/react-dom.development.js/scriptscript srchttps://unpkg.com/babel/standalone/babel.min.js/scriptdiv idroot/div是一个用于渲染React组件的容器。 script typetext/babel标签中的代码是使用Babel解析的JavaScript代码。 function MyApp()是一个React函数组件它返回一个包含h1标签的内容。 const container document.getElementById(root);获取了具有’id’为’root’的元素的引用。 const root ReactDOM.createRoot(container);创建了一个根Root对象。 root.render(MyApp /);使用ReactDOM.createRoot()的render()方法将MyApp /组件渲染到指定的容器中。
所以这段代码的作用是在Web页面上渲染一个包含Hello, react!文本的H1标签。
五、bable能干什么
Babel是一个用于JavaScript编译的工具它可以将新版本的JavaScript代码转换为向后兼容的旧版本以保证在不同浏览器和环境下的运行。
举例来说Babel可以将ES6ES2015或更新的JavaScript代码转换为ES5代码这样在不支持ES6语法的旧浏览器中也可以正常运行。以下是一些Babel的应用示例 语法转换Babel可以将ES6/ES7的语法转换为ES5语法如使用箭头函数、解构赋值等。 示例代码 // ES6箭头函数转换为普通函数
const sum (a, b) a b;
// 转换后的ES5代码
var sum function(a, b) {return a b;
};模块转换Babel可以将使用ES6模块的代码转换为CommonJS或AMD模块以便在旧的模块系统下使用。 示例代码 // 使用ES6模块系统导出和导入模块
export const foo bar;
import { foo } from ./module;// 转换后的CommonJS模块代码
exports.foo bar;
const { foo } require(./module);PolyfillBabel可以根据浏览器的特性支持程度自动添加缺失的API和功能以实现向后兼容。 示例代码 // 在不支持Promise的浏览器中使用Promise
// 安装babel/preset-env并配置目标浏览器
new Promise((resolve, reject) {setTimeout(() resolve(Hello, Babel!), 1000);
})
.then(message console.log(message));
// Babel会将上面的代码转换为使用Promise的polyfillBabel可以编译JSX。 JSX是一种JavaScript的扩展语法它允许开发者在JavaScript中编写类似HTML的结构用于构建用户界面。下面是一个使用Babel编译JSX的示例
假设有如下的JSX代码
const element h1Hello, world!/h1;通过Babel进行编译可以将其转换为普通的JavaScript代码
const element React.createElement(h1, null, Hello, world!);在这个例子中JSX代码被Babel转换为了React.createElement函数的调用。这个函数用于创建一个React元素表示一个虚拟的DOM节点
需要注意的是Babel只是将JSX转换为普通的JavaScript代码并不能直接运行。如果想要在浏览器中运行JSX代码还需要引入对应的库如React并在项目中配置相应的构建工具如Webpack。这样JSX代码在构建过程中会被Babel转换为可以在浏览器中运行的代码。
总之Babel作为一个强大的JavaScript编译工具可以帮助开发者轻松编写兼容性更好的JavaScript代码。
六、jsx
JSXJavaScript XML是一种使用类似XML的语法扩展JavaScript的方式用于构建React组件。它允许在JavaScript代码中编写类似HTML的标记使得组件的结构更加清晰和易于理解。
举个例子下面是一个使用JSX语法编写的React组件
import React from react;function Greeting() {return (divh1Hello, world!/h1pWelcome to my website./p/div);
}export default Greeting;在这个例子中我们使用了div、h1和p等HTML标签来构建组件的结构。JSX语法允许我们直接在JavaScript代码中使用这些标签使得编写React组件更加直观和方便。
注意上述代码中的JSX标记要用{}包裹起来这样可以将JavaScript表达式嵌入到JSX语法中。例如可以在标签中使用变量、表达式或函数调用以动态地生成组件内容
import React from react;function Greeting(props) {const name props.name;return (divh1Hello, {name}!/h1pWelcome to my website./p/div);
}export default Greeting;在这个例子中我们通过props对象传递了一个name属性给组件。并且用{name}的方式将该属性的值动态展示在组件中。
七、虚拟dom
React中的虚拟DOMVirtual DOM是一种用于改进Web应用性能的技术。它是一个轻量级的JavaScript对象表示它映射了真实的DOM结构。当状态发生变化时React会根据新状态生成新的虚拟DOM并将其与旧的虚拟DOM进行比较找出差异。然后React会通过最小化DOM操作的方式将差异应用于真实的DOM中从而更新页面。
虚拟DOM具有以下优点
提高性能虚拟DOM可以批量更新真实DOM而不是每次都进行单个更新从而减少了真实DOM的操作次数提高了效率。实现简洁的编程模型React将真实DOM的复杂性抽象成虚拟DOM的树结构使开发者可以用声明式的方式来描述如何更新UI而不需要手动操作DOM。跨平台支持虚拟DOM可以在浏览器以外的环境如服务器端中运行实现了跨平台的开发和渲染。
虽然虚拟DOM可以提高性能但在某些情况下会引入额外的开销。因此React中的虚拟DOM的设计考虑了权衡以平衡性能和开发体验。
以下图例描述了使用虚拟DOM和直接操作真实DOM的区别 #mermaid-svg-P12eiAWNV1XsozGE {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-P12eiAWNV1XsozGE .error-icon{fill:#552222;}#mermaid-svg-P12eiAWNV1XsozGE .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-P12eiAWNV1XsozGE .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-P12eiAWNV1XsozGE .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-P12eiAWNV1XsozGE .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-P12eiAWNV1XsozGE .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-P12eiAWNV1XsozGE .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-P12eiAWNV1XsozGE .marker{fill:#333333;stroke:#333333;}#mermaid-svg-P12eiAWNV1XsozGE .marker.cross{stroke:#333333;}#mermaid-svg-P12eiAWNV1XsozGE svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-P12eiAWNV1XsozGE .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-P12eiAWNV1XsozGE .cluster-label text{fill:#333;}#mermaid-svg-P12eiAWNV1XsozGE .cluster-label span{color:#333;}#mermaid-svg-P12eiAWNV1XsozGE .label text,#mermaid-svg-P12eiAWNV1XsozGE span{fill:#333;color:#333;}#mermaid-svg-P12eiAWNV1XsozGE .node rect,#mermaid-svg-P12eiAWNV1XsozGE .node circle,#mermaid-svg-P12eiAWNV1XsozGE .node ellipse,#mermaid-svg-P12eiAWNV1XsozGE .node polygon,#mermaid-svg-P12eiAWNV1XsozGE .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-P12eiAWNV1XsozGE .node .label{text-align:center;}#mermaid-svg-P12eiAWNV1XsozGE .node.clickable{cursor:pointer;}#mermaid-svg-P12eiAWNV1XsozGE .arrowheadPath{fill:#333333;}#mermaid-svg-P12eiAWNV1XsozGE .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-P12eiAWNV1XsozGE .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-P12eiAWNV1XsozGE .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-P12eiAWNV1XsozGE .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-P12eiAWNV1XsozGE .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-P12eiAWNV1XsozGE .cluster text{fill:#333;}#mermaid-svg-P12eiAWNV1XsozGE .cluster span{color:#333;}#mermaid-svg-P12eiAWNV1XsozGE div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-P12eiAWNV1XsozGE :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 列表组件 渲染虚拟DOM 比较新旧虚拟DOM 生成差异对象 更新真实DOM 直接操作真实DOM 手动更新DOM 这个图例中左边部分描述了使用虚拟DOM的过程首先在A步骤中创建列表组件然后在B步骤中渲染虚拟DOM接着在C步骤中比较新旧虚拟DOM的差异生成差异对象最后在E步骤中根据差异对象更新真实DOM。 右边部分描述了直接操作真实DOM的过程在F步骤中直接操作真实DOM然后手动更新DOM即G步骤。 通过对比这两个过程可以明显看出使用虚拟DOM的优势通过在内存中创建虚拟节点并比较新旧节点的差异React可以只对差异部分进行DOM操作从而减少直接操作DOM带来的性能损耗。同时虚拟DOM将底层的DOM操作抽象化使得开发者可以更加专注于业务逻辑的编写。
