JSX

写在前面

本系列是博主在学习 React 过程中阅读如下文档做出的笔记如果有错误希望在评论区指出哦 🤩🤩🤩

React 官网
React.js 小书
React 系列教程
Redux 中文文档
Mobx 中文文档
REACT ROUTER 中文文档
REACT ROUTER
Next.js

预计将会更新如下内容

React 小册 - 起步 JSX ✅ ✅
React 小册 - 扬帆起航
React 小册 - Hooks
React 小册 - CSS 解决方案
React 小册 - 生命周期
React 小册 - 状态管理 Redux
React 小册 - 状态管理 Redux 中间件
React 小册 - 状态管理 Mobx
React 小册 - Router
React 小册 - SSR
React 小册 - React 生态

本系列的所有代码你都可以在这个 👉仓库中看到 -->

你可能需要知道的一丢丢 JS 语法

解构

const target = {
  name: 'nanshu',
  desc: {
    height: 181,
    age: 18,
  },
};
// 解构第一层
const { name } = target;

// 解构第二层
const {
  desc: { age },
} = target;

展开运算符

展开运算符可以帮我们快速的浅拷贝一个可迭代的对象

例如我们要往一个对象中添加属性或者覆盖属性时我们不希望改变原来的对象就可以使用这个

当然展开运算符的使用场景不仅于此 📝

const obj = { nickname: 'nanshu' };
const newObj = { ...obj, age: 18 };

箭头函数

箭头函数表达式的语法比函数表达式更简洁，并且没有自己的 this 🥳

当我们需要返回一个对象时可以用()包裹对象从而省略 return

const setUsername = (username: string) => ({
  type: 'SET_USER_NAME',
  username,
});

ESM

描述

语法

说明

模块导出

export xxx

默认导出

export default xxx

一个模块只能有一个默认导出

重新导出

export * from xxx

常作为聚合导出统一管理模块入口

重命名导出

export {xxx as xxx} from xxx

默认导入

import xxx from xxx

一个模块只能有一个默认导入

解构导入

import {xxx} from xxx

重命名导入

import {xxx as xxx} from xxx

起步

在 html 中使用 React

在 html 使用 React 我们需要引入如下 script

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
- 将组件挂载到根节点上进行渲染
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
- 将 JSX 语法转换为 React.createElement

注意：在任何你使用到 JSX 语法的 script 内加上 type="text/babel" 否则它将不会生效

例如如下代码你就可以在页面上看到 Hello React

<body>
  <div id="root"></div>
  <script
    crossorigin
    src="https://unpkg.com/react@17/umd/react.development.js"
  ></script>
  <script
    crossorigin
    src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
  ></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <script type="text/babel">
    const App = () => <h1>Hello React</h1>;
    ReactDOM.render(<App />, document.getElementById('root'));
  </script>
</body>

JSX

JSX 语法本质

JSX 是 JS 的语法扩展不能被浏览器直接执行需要使用 babel 编译后才可以在浏览器中正常执行

JSX 在 React 中用来描述用户界面最终被 babel 编译为React.createElement(type,attrs,children)

type：用于标识节点的类型。它可以是类似“h1”“div”这样的标准 HTML 标签字符串，也可以是 React 组件类型或 React fragment 类型。
config：以对象形式传入，组件所有的属性都会以键值对的形式存储在 config 对象中。
children：以对象形式传入，它记录的是组件标签之间嵌套的内容，也就是所谓的“子节点”“子元素”。

所以 JSX 本质是只是一种语法糖最终还是被转化为了React.createElement

我们可以在babel官网中查看 JSX 最终被编译成了什么

<div class="header">
  <div
    class="title"
    onClick={() => {
      console.log('hello');
    }}
  >
    Title
  </div>
</div>;

// 经babel转换后
('use strict');

/*#__PURE__*/
React.createElement(
  'div',
  {
    class: 'header',
  },
  /*#__PURE__*/ React.createElement(
    'div',
    {
      class: 'title',
      onClick: () => {
        console.log('hello');
      },
    },
    'Title'
  )
);

createElement 中并没有十分复杂的涉及算法或真实 DOM 的逻辑，它的每一个步骤几乎都是在格式化数据

也就是处理成我们耳熟能详的虚拟DOM，关于虚拟DOM 我们都知道它解决了大量 DOM 操作带来的性能问题

但是时至今日浏览器的性能已经完成可以忽视这方面的消耗 虚拟DOM 在我看来更是一种一统大前端的野心

因为虚拟DOM中包含着描述 UI 的信息如果有一套规则可以将这些信息转换成每个平台支持的语言那么 React 就可以屏蔽每个平台的差异做到跨段开发

React 在早期的时候 react 和 react-dom 这两个包是在一起的从 React15 开始才开始分离各司其职

这也是 RN 诞生的时候这也可见一斑 react-dom 的作用

至此 createElement 完成了它的任务那就是格式化数据

接下来将由ReactDOM.render 接入处理好的数据然后将它挂在真正的 dom 节点上

至此你的页面便出现了

ReactDOM.render(
  // 需要渲染的元素（ReactElement）
  element,
  // 元素挂载的目标容器（一个真实DOM）
  container,
  // 回调函数，可选参数，可以用来处理渲染结束后的逻辑
  [callback]
);

JSX 表达式

JSX 允许在{}中使用我们的 JS 表达式

在里面我们可以使用变量进行运算符的操作调用方法等等

<div>{new Date().toDateString()}</div>

JSX 注释

JSX 有特殊的注释方法

{
  /* 我是注释  这里是一个头部信息*/
}
<div className="header">我是头部</div>;

特殊点

由于 JSX 是 JS 的语法扩展但是在里面我们又可以书写类似 HTML 的东西所以为了避免冲突
- HTML 中 class 在 JS 中表示类在 JSX 中我们用className来代替
- HTML 中 label 标签的 for 在 JS 中表示循环在 JSX 中用htmlFor来代替
undefined / boolean / null
- 对于以上几种数据类型 JSX 不会将其渲染到页面上
- 利用这个特性我们可以实现条件渲染

let flag = true
<div>{flag && "欢迎回来~~~"}</div>

JSX 列表渲染

这一块主要使用到了数组的高阶函数 map

const _games = ['剑盾', '塞尔达', '马里奥制造', '风花雪月'];

const gamesUI = _games.map((item, index) => {
  // 🙅‍♂️避免使用index作为唯一的key去使用 一般后端返回的数据都有唯一的key值
  return <div key={index}>{item}</div>;
});

JSX 事件绑定

例如我们为如下的 dom 节点绑定一个点击事件

const handleClick = () => {
  console.log('click...');
};

<button onClick={handleClick}>Click</button>;

如果在类组件中你可能就需要考虑到 this 的绑定问题了

使用 bind ｜｜箭头函数 😛😛😛

开发规范

文件目录

内容

路径

说明

存放静态资源，例如图片

src/assets

根据模块可以在 assets 下再新建文件夹

业务页面

src/containers

对应需求事实际页面

业务组件

src/components

业务公共组件，有些组件在封装的时候可以考虑后期的可扩展性，及通用性

页面路径

src/routes

页面路径

业务公共样式

src/styles

全局公共样式，可以在其他地方引用

实用公共函数

src/utils

例如网络请求 request，公共函数等

redux 状态

src/store

根据模块在划分文件

业务封装的钩子函数

src/hooks

与 components 思路类似，有些组件如果业务中多个地方在用，可以考虑后期抽离出来

服务端接口

src/api

存放所有的服务端接口

mock 数据

src/mock

存放一些 mock 数据

Previous关键字 & 内置类型 Next扬帆起航

Last updated 4 years ago

Was this helpful?