【前端】手把手解读React官方文档_理论+实战+补充

近两天更新完基本内容，后续长期更新，建议关注收藏点赞。

推荐搭配食用：快速学会react全家桶

必备工具

• ESLint： JavaScript 代码检查工具
• Prettier ：格式化代码
• TypeScript ：类型安全

npm install @types/react @types/react-dom

react中使用它，使用 .tsx 文件扩展名，告诉 TypeScript 该文件包含 JSX。

• React 开发者工具：检查 React components，编辑 props 和 state，并识别性能问题。

过时内容

React 现在已经不推荐使用 class 和 constructor，主流开发全面转向函数组件和 Hooks。
constructor构造函数 最先被执行

• state

//旧版写法：
this.setState({
   
	inputValue:e.target.value
})

• 绑定事件

constructor(props){
   
super(props);
this.handleClick = this.handleClick.bind(this);//绑定方法二 更好 节约性能
}

render(){
   
return (//绑定方法一：
	<div onClick={
   this.handleClick.bind(this)}>
	//如果只是一个函数，this会指向不明，所以需要绑定
	   {
   this.props.content}
	</div>)
	}
)

• ref

//旧版
handle(e){
   
const value = e.target.value;
}

/*
ref 是 React 提供的一种方式，
它可以让你直接访问 DOM 元素或组件实例，避免了通过 e.target 来获取元素。
在 React 中，ref 提供了对组件内部 DOM 元素的直接引用，从而使得你能够更高效地进行 DOM 操作。
*/
import React, {
    Component } from 'react';

class MyComponent extends Component {
   
  constructor(props) {
   
    super(props);
    // 创建 ref 对象
    this.inputRef = React.createRef();
  }

	focusInput = () => {
   
	    // 直接通过 ref 聚焦到输入框
	    this.inputRef.current.focus();
	  };
  
  handleClick = () => {
   
    // 通过 ref 获取输入框的值
    const inputValue = this.inputRef.current.value;
    console.log(inputValue);
  };

  render() {
   
    return (
      <div>
        <input
          ref={
   this.inputRef}  // 将 ref 绑定到输入框元素
          type="text"
        />
        <button onClick={
   this.focusInput}>Focus the Input</button>
        <button onClick={
   this.handleClick}>Log Input Value</button>
      </div>
    );
  }
}

export default MyComponent;

简介

React.js 不是一个框架，它只是一个库。它只提供 UI （view）层面的解决方案。在实际的项目当中，它并不能解决我们所有的问题，需要结合其它的库，例如 Redux、React-router 等来协助提供完整的解决方法。
用户断网后网页不会消失。

• 项目目录文件

my-react-app/
├── node_modules/
├── public/
├── src/
│   ├── api/
│   │   └── index.js
│   ├── components/
│   │   ├── common/
│   │   └── specific/
│   ├── hooks/
│   │   └── useCustomHook.js
│   ├── pages/
│   │   ├── Home.js
│   │   └── About.js
│   ├── redux/
│   │   ├── actions/
│   │   ├── reducers/
│   │   └── store.js
│   ├── utils/
│   │   └── helpers.js
│   ├── App.js
│   ├── index.js
│   └── ...
├── .gitignore
├── package.json
├── README.md
└── ...

1. package.json
   关于项目的基本信息,还有相关指令 npm，如npm run start…
2. .gitignore
   不想传到git的文件可以定义在里面

#注释
要忽略的用相对路径

3. public
   存放静态资源，包含 HTML 文件、图标等。默认的 index.html 文件是 React 应用的入口 HTML 文件。
   在 manifest.json 文件中配置 PWA（渐进式Web应用）的快捷方式图标、网址跳转和主题颜色，可以通过以下属性来完成：

{
   
  "name": "My Progressive Web App",
  "short_name": "My PWA",
  "description": "This is a PWA example.",
  "start_url": "/index.html",  // 设置启动页的网址
  "display": "standalone",  // 可选项: fullscreen, standalone, minimal-ui, browser
  "background_color": "#ffffff",  // 设置背景颜色
  "theme_color": "#0000ff",  // 设置应用主题颜色
  "icons": [
    {
   
      "src": "icons/icon-192x192.png",  // 图标路径
      "sizes": "192x192",  // 图标尺寸
      "type": "image/png"  // 图标类型
    },
    {
   
      "src": "icons/icon-512x512.png",  // 图标路径
      "sizes": "512x512",  // 图标尺寸
      "type": "image/png"  // 图标类型
    }
  ],
  "scope": "/",  // 限定PWA的范围
  "orientation": "portrait",  // 设置应用的默认方向，可选 'landscape' 或 'portrait'
  "lang": "en",  // 设置语言
  "dir": "ltr"  // 文字方向: "ltr" (从左到右), "rtl" (从右到左)
}

4. src目录 （项目源代码）
   自动化测试：app.test.js
   src 目录是我们主要编写代码的地方，包含了所有的 React 组件、样式和其他资源。通常会按照功能或组件类型来组织代码。
   components 目录存放项目的所有 React 组件。通常，我们会按照组件的功能或页面进行子目录的划分。

// src/components/Header.js
import React from 'react';

const Header = () => (
  <header>
    <h1>My React App</h1>
  </header>
);

export default Header;

assets 目录存放项目的静态资源，如图片、字体、样式等。
App.js 是 React 应用的根组件，通常用于设置路由和全局状态管理。

// src/App.js
import React from 'react';
import Header from './components/Header';

const App = () => (
  <div>
    <Header />
    <main>
      <p>Welcome to my React app!</p>
    </main>
  </div>
);

export default App;

运行入口：index.js 负责引入和渲染，index.js 是 React 应用的入口文件，负责渲染根组件App到index.html 中的 root 节点。

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
//将app组件挂载到root节点下，则在div为root的模块下会显示app组件

// src/api/index.js
import axios from 'axios';

const apiClient = axios.create({
   
  baseURL: 'https://api.example.com',
  headers: {
   
    'Content-Type': 'application/json'
  }
});

export const fetchData = async () => {
   
  const response = await apiClient.get('/data');
  return response.data;
};

• pages 目录用于存放页面组件，这些组件通常会包含路由配置。

// src/pages/Home.js
import React from 'react';

const Home = () => (
  <div>
    <h1>Home Page</h1>
  </div>
);

export default Home;

• redux 目录用于存放 Redux 的相关文件，包括 actions、reducers 和 store 配置。

// src/redux/store.js
import {
    createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;

• utils 目录用于存放通用的工具函数。

// src/utils/helpers.js
export const formatDate = (date) => {
   
  return new Date(date).toLocaleDateString();
};

• 视为树
  UI设为树、渲染树、模块依赖树

JSX（JavaScript XML）

JSX（JavaScript XML）是 React 提供的一种语法扩展，允许在 JavaScript 中写类似 HTML 的代码。本质上是 JavaScript 的一种语法糖，用来描述用户界面的结构和布局。JSX 让开发者能够在 React 组件中更加直观地定义 UI，而不需要通过传统的 JavaScript API 方式（例如 React.createElement）来创建 DOM 元素。

• 使用jsx语法(带标签）必须要引入react import react from 'react'; 因为 JSX 本质上会被转译成 React.createElement 调用，React 必须在代码中存在，以便这些 JSX 元素能够被正确处理和渲染。在 React 17 之前，通常需要在每个文件顶部引入 React。
• 从 React 17 开始，JSX 的编译方式发生了变化，React 团队引入了一种新的编译器（@babel/preset-react 的更新版本）。通过这一变化，不再强制要求在每个文件中显式引入 React。这是因为，JSX 会在编译阶段自动从 React 中获取相关的功能，而不需要显式调用 React.createElement()。
  因此，在 React 17 及之后的版本中，如果你只是使用 JSX，而不直接使用 React 对象中的其他功能（如 useState、useEffect 等），你可以省略引入 React。
• 为什么 JSX 仍然被广泛使用？
  语法简洁：JSX 让开发者可以像写 HTML 那样写 React 组件的 UI，而不是写一堆 React.createElement 调用。这种语法更符合开发者的直觉，也更容易理解和修改。
  React 官方推荐R：它不仅简化了组件的书写，还能让开发者更高效地进行开发。即便 React 17 以后支持了“自动引入 React”的功能，JSX 依然是默认推荐的方式。
• 使用 JSX 与不使用 JSX 的区别

//使用JSX
const Button = () => {
   
  return <button>Click me</button>;
};

//最终转译成 JavaScript
//JSX 并不能被浏览器直接识别，它需要经过编译，通常通过 Babel 将 JSX 转换成 JavaScript。

//不使用JSX
const Button = () => {
   
  return React.createElement('button', null, 'Click me');
};

//在 JSX 中，你可以直接嵌入 JavaScript 表达式。表达式必须用大括号 {} 包裹
// 在 JSX 中，所有的动态内容都必须用大括号 {} 包裹。
const name = "John";
const element = <h1>Hello, {
   name}!</h1>;

//JSX 与 HTML 的区别
// 在 HTML 中，你用 class 来定义元素的类名，但在 JSX 中，应该使用 className，因为 class 是 JavaScript 的保留字。
<div className="my-class"></div>
//同样的，标签中的for用htmlFor替换

//在 JSX 中，自闭合标签必须明确写成自闭合格式。
//例如，<img> 标签在 HTML 中可以省略闭合标签，但在 JSX 中必须写成 <img />。

//在 JSX 中，事件名是驼峰命名法，而不是小写的。
//onclick 在 HTML 中是 onclick，但在 JSX 中应该写作 onClick
<button onClick={
   handleClick}>Click me</button>

//example
const user = {
   
  name: 'Hedy Lamarr',
  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
  imageSize: 90,
};

export default function Profile() {
   
  return (
    <>
      <h1>{
   user.name}</h1>
      <img
        className="avatar"
        src={
   user.imageUrl}
        alt={
   'Photo of ' + user.name}
        style={
   {
   
          width: user.imageSize,
          height: user.imageSize
        }}
      />
    </>
  );
}

• JSX规范

1. 组件也不能返回多个 JSX 标签。你必须将它们包裹到一个共享的父级中，比如 <div>...</div> 或使用空的<>...</>包裹
2. JSX 比 HTML 更加严格。你必须闭合标签，如 <br />
3. 大写字母开头为组件，组件写完记得导出export default TodoItem;
   在别的组件里引入TodoItem组件import TodoItem from './TodoItem';

组件

组件定义

React 组件是返回标签的 JavaScript 函数。React 组件必须以大写字母开头，而 HTML 标签则必须是小写字母。
整体父子组件的结构就是一层套一层的。

//App.js
function MyButton() {
   
  return