react出道101问-- 初出茅庐

104 阅读3分钟

核心 React

  1. 什么是 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 组件来开发视图。

  4. 什么是 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 更严格

  5. 元素 (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"
      );