React基础知识-自学汇总

JSX

JSX的概念：

JSX是JavaScript和XML(HTML)的缩写，表示在js代码中编写HTML模板结构，它是react中编写UI模板的方式

什么是JSX?

JSX(JavaScript XML)是JavaScript的一个语法扩展，它允许开发者在JavaScript文件中编写类似HTML的代码。它是由Meta（以前的Facebook）开发的。

JSX的语法类似于HTML，有打开和关闭标签、属性和嵌套元素。

例如，你可以写下面的JSX代码来渲染一个简单的标题元素：

const heading = <h1>Hello, JSX!</h1>;
这段代码看起来像HTML，但它是JavaScript。const关键字创建了一个名为标题的新变量，该变量的值是JSX表达式的结果。

知识点参考：

【react】基础知识点---jsx语法规则，js与jsx的区别_jsx和js-CSDN博客

JSX简单入门_jsx基础-CSDN博客

JSX语法入门基础_jsx 语法-CSDN博客

React基本语法

特别关注：

for循环渲染

const itemList2 = []
  for(let i = 0; i < user.products.length; i++){
    itemList2.push(
      <li key={i}>
        {user.products[i].title}
      </li>
    )
  }
  
  <ul>
  {itemList2}
  </ul>

for循环，没其他写法

onSubmit 表单提交时触发

点击按钮时触发 form表单 提交函数 submitUserInf

注意：在表单上使用 onSubmit 事件，并没有阻止默认行为，它将触发表单的默认提交行为，导致页面刷新。

在用户点击提交按钮时候，submitHandle 函数将被调用，并且 e.preventDefault() 将阻止表单的默认提交行为，从而避免页面刷新。可以在 submitHandle 函数中执行提交表单的逻辑。

Hook

Hooks ---->以 use 开头的函数 -----> 只能在组件活自定义 Hook的最顶部调用。 不能在条件语句、循环语句或者其他嵌套函数内调用 Hook。Hook是函数，但将其视为关于组件需求的无条件声明。

组件导入导出

从一个文件中导出和导入多个文件

注意区分具名导出和默认导出

//用具名方式导出
export function Profile(){
    //****
}
//接着，具名导入的方式，从文件到当前组件文件中(用大括号)
import {Profile} from './Gallery.tsx'

//渲染
export default function App() {
  return <Profile />;
}

默认导出

//用默认导出的方式
export default function Gallery() {
  return (
    <section>
      <h1>了不起的科学家们</h1>
    </section>
  );
}

// 导入 默认导出的组件
import Gallery from './Gallery.tsx';

//渲染
export default function App() {
  return <Gallery />;
}

组件记忆：双向绑定

组件通常需要通过 交互更改屏幕上显示的呢绒。输入表单 应该更新输入字段，点击轮播图上的 “下一个”应该更改显示的图片，点击 “购买” 应该将商品放入购物车。组件需要 “记住” 某些东西：当前输入值、当前图片、购物车等。值React中，这种组件特有的记忆称为 state。

需关注组件中更新数组的方法

state 中更新数组

当操作 React state 中数组是时，你需要避免使用左列的方法，而首选右列的方法

避免使用 (会改变原始数组)    推荐使用 (会返回一个新数组）
添加元素    push，unshift    concat，[...arr] 展开语法（例子）
删除元素    pop，shift，splice    filter，slice（例子）
替换元素    splice，arr[i] = ... 赋值    map（例子）
排序    reverse，sort    先将数组复制一份（例子）

更新数组对象的元素

import React,{useState} from 'react'


const initialList = [
    { id: 0, title: 'Big Bellies', seen: false },
    { id: 1, title: 'Lunar Landscape', seen: false },
    { id: 2, title: 'Terracotta Army', seen: true },
]

function ArrayDomState() {
    const [myList, setMyList] = useState(initialList)

    function handleToggleMyList(artworkId :number, nextSeen: any) {
        setMyList(myList.map((item) => {
            if(item.id === artworkId){
                // 创建包含变更的 新对象
                return {...item, title: nextSeen}
            }else {
                return item
            }
        }))
    }

    return (
        <div>
            {/* 更新数组内部对象的值 */}
            <div>
                <p>更新数据{JSON.stringify(myList)}</p>
                <button onClick={() => handleToggleMyList(1,'修改咯')}>更新对象数组</button>
            </div>
        </div>
    )
}

export default ArrayDomState

使用Immer 编写简单的更新

import React,{useState} from 'react'
import { useImmer} from 'use-immer'

const initialList = [
    { id: 0, title: 'Big Bellies', seen: false },
    { id: 1, title: 'Lunar Landscape', seen: false },
    { id: 2, title: 'Terracotta Army', seen: true },
]

function ArrayDomState() {
    const [myList2, setMyList2] = useImmer(initialList)
    
    function handleToggleMyList2(artworkId :number, nextSeen: any) {
        setMyList2(draft => {
            console.log('draft',JSON.stringify(draft))
            const artwork = draft.find((item) => item.id === artworkId) 
            console.log('artwork', JSON.stringify(artwork))
            if(artwork) artwork.title = nextSeen
            console.log('artwork222',JSON.stringify(artwork))
        })
    }

    return (
        <div>
            {/* 使用Immer 编写更加简洁的更新逻辑 */}
            <div>
                <p>使用 Immer 编写:{JSON.stringify(myList2)}</p>
                <button onClick={() => handleToggleMyList2(2,'Immer')}>使用Immer点击</button>
            </div>
        </div>
    )
}

export default ArrayDomState

参考资料：

React基础语法整理_react语法合集-CSDN博客

React生命周期

挂载阶段

更新阶段

卸载阶段

参考资料：

前端React篇之React的生命周期有哪些？_react 生命周期-CSDN博客

Redux概念

参考资料

【React】Redux 基础使用_redux subscribe-CSDN博客

Router相关

路由守卫

路由守卫是一种用于在路由导航过程中进行拦截和验证的机制，可以用于实现权限控制、页面级别的验证和导航守卫等功能。React-Router提供了Route组件的render、children和component属性来实现路

代码分割和懒加载
在大型React应用中，代码分割和懒加载是一种优化性能的常用方法。React-Router可以与React的React.lazy和Suspense特性结合使用，从而实现按需加载页面组件，减小初始加载的包大小，提高应用性能由守卫。

import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./components/Home'));
const About = lazy(() => import('./components/About'));
const Contact = lazy(() => import('./components/Contact'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </Suspense>
    </Router>
  );
}

export default App;

在上面的例子中，我们使用React.lazy函数来按需加载Home、About和Contact组件，并且使用Suspense组件来提供加载过程中的fallback展示。这样，在用户访问到相应的路由时，对应的组件才会被加载，从而提高了应用性能。

参考资料：

React-Router详解_react router-CSDN博客

React Dom

ReactElement

React 元素（ReactElement）是构成 React 应用的最小单元。组件是由元素构成的。他们最终构成了渲染在浏览器中的 DOM

React Fiber

React Fiber 是 React 16 中新的协调引擎，主要目的是使 Virtual DOM 可以进行增量式渲染

React Fiber 增量渲染主要体现在——使 React 能够利用调度完成以下操作：

• 暂停工作，稍后再回来。
• 为不同类型的工作分配优先级。
• 重用之前完成的工作。
• 如果不再需要，则中止工作。

• React Fiber 是一个 JavaScript 对象，其中包含有关组件、其输入和输出的信息。下面是 Fiber 对象的部分属性：

  type：节点类型（元素、文本、组件）（具体的类型）。
  props：节点属性。
  stateNode：节点 DOM 对象或者组件实例对象。它是 Fiber 对应的真实 DOM 节点。
  tag：节点标记（对具体类型的分类 hostRoot || hostComponent || classComponent || functionComponent）。
  effects：数组, 存储需要更改的 fiber 对象。
  effectTag：当前 Fiber 要被执行的操作（新增, 删除, 修改）。
  parent：当前 Fiber 的父级 Fiber。
  child：当前 Fiber 的子级 Fiber。
  sibling：当前 Fiber 的下一个兄弟 Fiber。
  alternate：Fiber 备份 Fiber比对时使用

React 与 HTML 之间的属性差异

React DOM 为非受控组件提供了 defaultValue 属性 和 defaultChecked 属性，HTML 中没有这些属性。
React DOM 用 className 属性代替 HTML 的 class 属性。
React DOM 用 dangerouslySetInnerHTML 属性代替 HTML 的 innerHTML 属性。
React DOM 用 htmlFor 属性代替 HTML 的 for 属性

React 使用 ref 操作真实 DOM

React 内部会自动的通过虚拟 DOM 匹配好你想要的渲染输出，所以不希望开发者去直接操作真实 DOM。若不可避免的需要操作真实 DOM 的话，就用 Refs 来操作真实 DOM 吧。
Refs 允许我们访问真实的 DOM 节点，或在 render 方法中创建的 React 元素。一般会使用 Refs 来操作真实 DOM 元素。

React 虚拟 DOM

Virtual DOM 的诞生背景：真实的 DOM 操作代价昂贵，操作频繁还会引起页面卡顿影响用户体验。很多 DOM API 的读写都涉及页面布局的 重绘（repaint）和 回流（reflow），这会更加的耗费性能。而虚拟 DOM 就是为了减少不必要的 DOM API 调用，从而提高浏览器的性能。

React 虚拟 DOM 的核心

React Virtual DOM 的核心有 2 个步骤：

diff 算法（对比差异）：状态变更时，记录新树和旧树的差异——React 的 render() 方法，会创建一棵由 React 元素组成的树，也就是 Virtual DOM Tree。在下一次 state 或 props 更新时，相同的 render() 方法会返回一棵不同的树。React 需要基于这两棵树之间的差别来进行 diff，得到一个 Patch，这样就可以找到变化了的 DOM 节点，只对变化的部分进行 DOM 更新，而不是重新渲染整个 DOM 树。这个比较的过程就是 diff 算法。diff 算法可以将时间复杂度降为 O(n)。

batching（批量更新）：最后把差异更新到真正的 DOM 中——就是将多次比较的结果合并后一次性更新到页面，从而有效地减少页面渲染的次数，提高渲染效率。

React 虚拟 DOM 的优势

为函数式的 UI 编程方式打开了大门，我们不需要再去考虑具体 DOM 的操作，框架已经替我们做了，我们就可以用更加声明式的方式书写代码。
减少页面渲染的次数，提高渲染效率。
提供了更好的跨平台的能力，因为 virtual DOM 是以 JavaScript 对象为基础而不依赖具体的平台环境，因此可以适用于其他的平台，如 node、weex、native 等。

参考资料：

 react 与 DOM_reactdom-CSDN博客