React 复习

2022 React

React 只是一个 JavaScript 库，它允许我们编写更多的 JavaScript, 与页面互动。

以声明方式创建一个巨大的 JavaScript 对象，它在 JavaScript 中创建一个虚拟Dom，React 库使用 虚拟Dom 以声明的方式为我们更新 DOM。

声明式

声明式编写 UI React帮助我们高效更新渲染组件

组件化

组件逻辑由 JavaScript 编写可以轻松地在应用中传递数据 单向数据流；

React 使用一个虚拟Dom 的东西来为我们处理 Dome 的变化

安装

React 运行5.0.0不能使用 5.0.1命令行解决

create-react-app -V
先看看 版本

npm uninstall -g create-react-app
卸载

create-react-app -V
如果没有卸载掉

where create-react-app
win cmd命令行 把文件夹关于create-react-app 的东西全部删掉

[安装](https://create-react-app.dev/docs/getting-started/)

npx create-react-app my-app --template typescript

npm 是节点包管理器，这些包只是这些不同的节点相关的

npx 实际上是一个包含在 npm 版本五点二及更高版本中的工具 npm 的工具

import React from 'react';  React 是运行这些应用程序构建方式的引擎。
import ReactDOM from 'react-dom/client'; React Dom 指定该引擎应该针对 Web 相关的应用程序
这两个库的结合实际上使我们能够在 React 中构建我们所有的 Web 应用程序
root.render(
  <React.StrictMode> 严格模式
    <App />
  </React.StrictMode>
);

JSX 只是 JavaScript 的语法扩展

React 变化 是状态不同是指内存中是否存在完全不同的对象。而不是 值修改

this.setState

与当前的状态对象进行浅合并，浅合并只是意味着你在这个对象内部传递给我的任何值，我都会更新检查状态对象是否有相同的键。如果相同的键，我就使用新值更新你的状态键。

key

React 为了优化 确定某个状态更新将那个组件与那个相关的状态的唯一键值。

用户JSON

生命周期

componentDidMount(挂载阶段) React第一次将组件渲染到正在安装的页面上，它仅在组件生命周期发生一次 (组件创建时（页面加载时))

shouldComponentUpdate() 控制是否更新，比如没有受到 父 props影响的组件由于父更新而被迫更新。

接收三个参数（nextProps，nextState，nextContext）

Css

<div className={`search-box ${this.props.classname}`}>

React 18

import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const container =  document.getElementById('root') as HTMLElement;
const root = createRoot(container);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

虚拟Dom

react 复制了真实的Dom,在 JS 中，它没有真正使用 Dom 元素，而是在 JS 中反映了所有的元素，JS 在实际创建和反应这些更改方面要快得多，我们需要一个真实的 Dom 来实际显示给用户，当我们更新修改依赖的元素状态，它会制作另一个虚拟 Dom副本，react 要做的是使用这个最新虚拟 dom 副本作为它正在运行实际的 dom 树。

为什么使用JSX

React 认为渲染逻辑本质 与 其他Ui 逻辑内在耦合，比如在 UI 中绑定处理事件。

React 没有采用将标记和逻辑分离到不同文件中，而是将它们存放在一个称之为 “组件”松散耦合的地方，来实现关注点分离。在计算机科学中，关注点分离( SoC ) 是将计算机程序分成不同部分的设计原则。

JXS 防止注入攻击

React Dom 在渲染所有内容之前，会默认进行转义，它可以确保你在你的应用中，永远不会注入你输入的内容，而是转为字符串，这可以防止 XSS 跨站脚本攻击。

React 只更新它需要更新的部分

React DOM 会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态。

key

key 帮助 React 识别那些元素改变，比如添加和删除。因此你应当给数组中的每一个元素赋予一个确定标识。

提取组件 key正确的使用方式

function ListItem(props) {
  // 正确！这里不需要指定 key：
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 正确！key 应该在数组的上下文中被指定
    <ListItem key={number.toString()} value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

一个好的经验法则是：在 map() 方法中的元素需要设置 key 属性。

表单

formik好用的表单控件

记录面试题

render函数什么时候会执行？

当 this. State 或者 this. Props 发生改变的时候 render 函数就会执行

redux异步请求用redux-thunk中间件

同源

两个端口的协议端口域名都一样的话我们称之为同源

重绘和重排

重绘：我们修改了 dom 元素的背景色或者阴影浏览器就会根据属性进行计算

重排：我们修改改变了 dom 的位置，渲染树就会重新计算重新布局重新渲染

props

props 是 React 中属性的简写。它们只读，不可变。它们总是在整个应用中从父组件传递到子组件。子组件永远不能将 prop 送回父组件。

React 组件的生命周期有三个不同的阶段

初始渲染阶段：组件开始生命之旅并进入 Dom 阶段

更新阶段：组件被添加 Dom 中，它 只有 prop 或 状态发生变化才可能更新和重新渲染。

卸载阶段：组件被销毁被从 Dom 中删除

纯组件

没有副作用就是里面的依赖的状态是自己内部的，纯组件增加了代码的简单些和应用的性能。

MVC框架的主要问题是什么

以下是MVC框架的一些主要问题：

对 DOM 操作的代价非常高

程序运行缓慢且效率低下

内存浪费严重

由于循环依赖性，组件模型需要围绕 models 和 views 进行创建

Redux

Redux 是 JS 应用状态管理器，提供可预测的状态管理。它体积小只有 2kb是个强大的插件扩展依赖。

npm install @reduxjs/toolkit

npx create-react-app my-app --template redux

应用整体全体状态以对象树的方式存放与单个 store。唯一改变状态树 的方法是创建 action，一个描述发生了什么的对象。并将其 dispatch 给 store。

要指定状态树如何响应 action 来进行更新的话，可以编写 reducer 函数 这些函数根据旧 state 和 action 来计算新 state。

• createStore
• combineReducers
• applyMiddleware
• bindActionCreators
• -compose

action

唯一改变状态树 的方法是创建 action，一个描述发生了什么的对象。并将其 dispatch 给 store。

Reducer – 这是一个确定状态将如何变化的地方。

Store

js 对象 ，它可以保存程序状态，它提供了一些方法访问状态所有操作都通过 reducer 返回一个新状态

• getState()
• dispatch(action)
• subscribe(listener)
• -replaceReducer(nextReducer)

Redux Toolkit

官方推荐的用来写 Redux逻辑的

React路由

开发单页 Web 应用，React-router-dom

react-router-dom6

BrowserRouter 存在服务区管理动态请求

Router

Route

Routes

Link to标签可以帮助我们跳转

useNavigate

区分Real DOM和Virtual DOM

​