react出道101问-- 初出茅庐

核心 React

什么是 React？

React（又名 React.js 或 ReactJS）是一个开源前端 JavaScript 库，用于构建可组合的用户界面，尤其是单页应用程序。它用于以声明式方法处理基于组件的 Web 和移动应用程序的视图层。
2.

React 进化的历史是怎样的？

ReactJS 的历史始于 2010 年XHP的创建。XHP 是一个 PHP 扩展，它改进了语言的语法，使得 XML 文档片段成为有效的 PHP 表达式，其主要目的是用于创建自定义和可重用的 HTML 元素。

此扩展的主要原则是使前端代码更易于理解，并有助于避免跨站点脚本攻击。该项目成功阻止了清理用户提交的恶意内容。

但是 XHP 有一个不同的问题，即动态 Web 应用程序需要多次往返服务器，而 XHP 并没有解决这个问题。此外，整个 UI 都会因应用程序中的微小变化而重新渲染。后来，Jordan 受 XHP 的启发创建了 React 的初始原型，名为FaxJ。最终，一段时间后，React 作为一个新的库被引入 JavaScript 世界。

注意： JSX 源自 XHP 的理念
3.

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 函数返回给渲染函数。

javascript 复制代码

export default function App() {
  return <h1 className="greeting">{"Hello, this is a JSX Code!"}</h1>;
}

如果你不使用 JSX 语法，则相应的 JavaScript 代码应按如下方式编写，

javascript 复制代码

import { createElement } from "react";

export default function App() {
  return createElement(
    "h1",
    { className: "greeting" },
    "Hello, this is a JSX Code!"
  );
}

查看类别

复制代码

注意： JSX 比 HTML 更严格
5.

元素 (Element) 和组件 (Component) 有什么区别？

元素是一个简单的对象，它以 DOM 节点或其他组件的形式描述您想要在屏幕上显示的内容。元素可以在其 props 中包含其他元素。创建 React 元素的成本很低。元素一旦创建，就无法改变。

React Element 的 JavaScript 表示（没有 JSX）如下：

ini 复制代码

const element = React.createElement("div", { id: "login-btn" }, "Login");

这个元素可以使用 JSX 简化

bash 复制代码

<div id="login-btn">Login</div>

上述React.createElement()函数返回一个如下对象：

bash 复制代码

{
  type: 'div',
  props: {
    children: 'Login',
    id: 'login-btn'
  }
}

最后，该元素使用呈现到 DOM ReactDOM.render()。

而组件可以用几种不同的方式声明。它可以是具有render()方法的类，也可以定义为函数。无论哪种情况，它都以 props 作为输入，并返回 JSX 树作为输出：

ini 复制代码

const Button = ({ handleLogin }) => (
  <div id={"login-btn"} onClick={handleLogin}>
    Login
  </div>
);

然后 JSX 被转换成React.createElement()函数树：

javascript 复制代码

const Button = ({ handleLogin }) =>
  React.createElement(
    "div",
    { id: "login-btn", onClick: handleLogin },
    "Login"
  );

react出道101问-- 初出茅庐

核心 React

什么是 React？

React 进化的历史是怎样的？

React 的主要特性是什么?

什么是 JSX？

元素 (Element) 和 组件 (Component) 有什么区别？

元素 (Element) 和组件 (Component) 有什么区别？