Next 的原理分析_React原理(JSX)

libokaifa
144 阅读4分钟

这是一个基于React的服务端渲染框架

我们在学习一个框架的时候除了其基本使用之外，我们需要了解其原理，从而递增的模式来对一个框架的完全掌握，所以我们先学习下React的主要技术-JSX。

什么是React

用于创建页面的JavaScript的库

主要特性

  • 虚拟dom：虚拟 DOM 使用一种称为“diffing”的算法来比较前后两个虚拟 DOM 树的差异。通过计算差异，虚拟 DOM 可以最小化地更新真实 DOM，打包式的执行只应用必要的变化
  • 组件化: 将用户界面分解成独立的、可复用的组件;
  • 声明式: 描述应用的 UI 应该是什么样子，而不需要详细描述如何一步步地实现这些 UI。
  • 灵活性: 平台无关性，很好的和其他库的融合，渐进式采用等
  • 高效:通过多种机制和设计模式来提高应用程序的性能和开发效率
  • 面向对象化：更容易操作，封装,和理解

JSX

什么是JSX

JavaScript And Xml 可拓展的标记性语言，主导思想 all in jsx

react 的技术，不是一种新的语言，js扩展，标记性表现在：比如组件的使用， html和js同时使用如下：

 const num=2
 <Radio value={num}>abc</Radio>
 // 遇见< 为标签，{} 为js 逻辑,内部使用

JSX原理

上述的代码块可以转化为：

 React.createElement(Radio, { value: num }, 'abc');

React.createElement 来创建常规可被浏览器人事认识js 和H5 的标签，所以并不是一个新的技术，且只能有一个顶层组件

JSX的具体使用

  1. 内联样式
  • 在 JSX 中，内联样式是通过 style 属性来设置的，style 属性的值是一个 JavaScript 对象：
const element = <div style={{ color: 'blue', backgroundColor: 'lightgray' }}>Hello World!</div>;
  • 清晰写法，你可以将样式对象存储在变量中，然后在 style 属性中引用该变量：
const divStyle = {
  color: 'blue',
  backgroundColor: 'lightgray',
  padding: '10px',
  borderRadius: '5px'
};
const element = <div style={divStyle}>Hello World!</div>;
  • 动态样式：你可以根据组件的状态或属性来动态设置样式：
import React, { useState } from 'react';

function App() {
  const [isActive, setIsActive] = useState(false);

  const divStyle = {
    color: isActive ? 'green' : 'red',
    backgroundColor: 'lightgray',
    padding: '10px',
    borderRadius: '5px'
  };

  return (
    <div>
      <div style={divStyle}>Hello World!</div>
      <button onClick={() => setIsActive(!isActive)}>Toggle Color</button>
    </div>
  );
}
// 多样式合并
const baseStyle = {
  padding: '10px',
  borderRadius: '5px'
};

const additionalStyle = {
  color: 'blue',
  backgroundColor: 'lightgray'
};

const combinedStyle = { ...baseStyle, ...additionalStyle };

const element = <div style={combinedStyle}>Hello World!</div>;

export default App;
  1. 标签类型
  • HTML 标签：这些是标准的 HTML 标签，如 <div>、<span>、<h1> 等。它们直接映射到浏览器的 DOM 元素。
  • React 组件：这些是自定义的 React 组件，通常以大写字母开头。它们可以是函数组件或类组件。
  • Fragment：React 提供的 Fragment 组件，用于包裹多个元素而不在 DOM 中添加额外的节点。

在 JSX 中，每个组件只能返回一个根元素。这意味着如果你想返回多个元素，它们必须被包裹在一个单一的父元素中。有时候，这会导致不必要的嵌套和额外的 DOM 节点。Fragment 解决了这个问题，它允许你返回多个元素而不在 DOM 中添加额外的节点。

  • 特殊标签：如 <> 和 </>，这是 Fragment 的简写形式
  1. 组件使用
import React, { useState } from 'react';

// 定义一个带有状态的函数组件
function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>当前计数: {count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}

// 使用组件
function App() {
  return (
    <div>
      <Counter />
    </div>
  );
}

export default App;
  1. {} 表达式
  • 变量：你可以在 JSX 中嵌入变量。
const name = "Alice";
<h1>Hello, {name}!</h1>
  • 函数调用：你可以在 JSX 中调用函数。
function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

<h1>Hello, {formatName(user)}!</h1>
  • 三元运算符：你可以使用三元运算符来进行条件渲染。
const isLoggedIn = true;
<h1>{isLoggedIn ? 'Welcome back!' : 'Please sign up.'}</h1>
  • 逻辑运算符：你可以使用逻辑运算符来进行条件渲染。
const messages = ['React', 'Re: React', 'Re:Re: React'];
<div>
  {messages.length > 0 &&
    <h2>
      You have {messages.length} unread messages.
    </h2>
  }
</div>
  • 模板字符串：你可以在 JSX 中使用模板字符串。
const name = "Alice";
<h1>{`Hello, ${name}!`}</h1>
  • 表达式求值：你可以在 JSX 中进行数学运算或其他表达式求值。
const a = 5;
const b = 10;
<h1>{a + b}</h1>

总结

Next 分析系列，欢迎观看共同进步。

avatar
文章
阅读
粉丝