核心 React
-
什么是 React?
React(又名 React.js 或 ReactJS)是一个开源前端 JavaScript 库,用于构建可组合的用户界面,尤其是单页应用程序。它用于以声明式方法处理基于组件的 Web 和移动应用程序的视图层。
-
React 进化的历史是怎样的?
ReactJS 的历史始于 2010 年XHP的创建。XHP 是一个 PHP 扩展,它改进了语言的语法,使得 XML 文档片段成为有效的 PHP 表达式,其主要目的是用于创建自定义和可重用的 HTML 元素。
此扩展的主要原则是使前端代码更易于理解,并有助于避免跨站点脚本攻击。该项目成功阻止了清理用户提交的恶意内容。
但是 XHP 有一个不同的问题,即动态 Web 应用程序需要多次往返服务器,而 XHP 并没有解决这个问题。此外,整个 UI 都会因应用程序中的微小变化而重新渲染。后来,Jordan 受 XHP 的启发创建了 React 的初始原型,名为FaxJ。最终,一段时间后,React 作为一个新的库被引入 JavaScript 世界。
注意: JSX 源自 XHP 的理念
-
React 的主要特性是什么?
React 的主要特性包括:
-
使用JSX语法,这是 JS 的语法扩展,允许开发人员在 JS 代码中编写 HTML。
-
考虑到真实 DOM 操作成本高昂,它使用虚拟 DOM而不是真实 DOM。
-
支持服务器端渲染,这对搜索引擎优化(SEO)很有用。
-
遵循单向或单向数据流或数据绑定。
-
使用可重复使用/可组合的UI 组件来开发视图。
-
-
什么是 JSX?
JSX代表JavaScript XML,它是 ECMAScript 的类似 XML 的语法扩展。基本上,它只是为函数提供了语法糖
React.createElement(type, props, ...children)
,为我们提供了 JavaScript 的表达能力以及类似 HTML 的模板语法。在下面的例子中,
<h1>
标签内的文本作为 JavaScript 函数返回给渲染函数。export default function App() { return <h1 className="greeting">{"Hello, this is a JSX Code!"}</h1>; }
如果你不使用 JSX 语法,则相应的 JavaScript 代码应按如下方式编写,
import { createElement } from "react"; export default function App() { return createElement( "h1", { className: "greeting" }, "Hello, this is a JSX Code!" ); }
查看类别
注意: JSX 比 HTML 更严格
-
元素 (Element) 和 组件 (Component) 有什么区别?
元素是一个简单的对象,它以 DOM 节点或其他组件的形式描述您想要在屏幕上显示的内容。元素可以在其 props 中包含其他元素。创建 React 元素的成本很低。元素一旦创建,就无法改变。
React Element 的 JavaScript 表示(没有 JSX)如下:
const element = React.createElement("div", { id: "login-btn" }, "Login");
这个元素可以使用 JSX 简化
<div id="login-btn">Login</div>
上述
React.createElement()
函数返回一个如下对象:{ type: 'div', props: { children: 'Login', id: 'login-btn' } }
最后,该元素使用 呈现到 DOM
ReactDOM.render()
。而组件可以用几种不同的方式声明。它可以是具有
render()
方法的类,也可以定义为函数。无论哪种情况,它都以 props 作为输入,并返回 JSX 树作为输出:const Button = ({ handleLogin }) => ( <div id={"login-btn"} onClick={handleLogin}> Login </div> );
然后 JSX 被转换成
React.createElement()
函数树:const Button = ({ handleLogin }) => React.createElement( "div", { id: "login-btn", onClick: handleLogin }, "Login" );