React - 技术栈

生命周期

旧的新的

初始化阶段

constructor()

componentWillMount() ->. 去掉这个功能，constructor和componentDidMount代替

在willMount中订阅事件，在服务端并不会执行willUnMount事件，也就是说服务端会导致内存泄漏

render()

componentDidMount()

更新阶段

componentWillReceiveprops（仅在props ->getDerivedStateFromProps(

WillReceiveProps中判断前后两个 props 是否相同，如果不同再将新的 props 更新到相应的 state 上去。这样做一来会破坏 state 数据的单一数据源，导致组件状态变得不可预测，另一方面也会增加组件的重绘次数。

shouldComponentUpdate：判断组件是否需要重新渲染，返回一个布尔值，可以优化性能
componentWillUpdate---只想更新组件，不做状态处理，this.forceUpdate()强制调用，会触发这个钩子
render
getSnapshotBeforeUpdate
componentDidUpdate -> 参数多了一个(prevProps,prevState,snapshot)

卸载组件： componentWillUnmount()

getDerivedStateFromProps:静态方法，不能访问实例this，只接收两个参数,和componentDidUpdate一起使用

getSnapshotBeforeUpdate：会在最终确定的render执行之前执行，也就是能保证其获取到的元素状态与didUpdate中获取到的元素状态相同

https://juejin.cn/post/7285540804734468150?searchId=20240919153415D2A71699E90CF6190D35

1.你知道哪些React hooks？

useState：用于管理功能组件中的状态。
useEffect：用于在功能组件中执行副作用，例如获取数据或订阅事件。
useContext：用于访问功能组件内的 React 上下文的值。
useRef：用于创建对跨渲染持续存在的元素或值的可变引用。
useCallback：用于记忆函数以防止不必要的重新渲染。
useMemo：用于记忆值，通过缓存昂贵的计算来提高性能。
useReducer：用于通过reducer函数管理状态，类似于Redux的工作原理。
useLayoutEffect：与useEffect类似，但效果在所有DOM突变后同步运行

useContext是一个 React Hook，在组件的顶层调用useContext,可以让你读取和订阅组件中的context

总是在调用它的组件上面寻找最近的 provider。它向上搜索，不考虑 调用useContext()的组件中的 provider

export const StateContext = createContext({});

<StateContext.Provider value={useReducer(reducer, initialState)}]]>

{children}

</StateContext.Provider]]>

export const useStateValue: () => any = () => useContext(StateContext)或者StateContext.Consumer;

Hooks-9个

useState：来添加状态

useEffect：处理副作用--浏览器重新绘制屏幕之后异步触发的。不会阻塞组件的渲染过程

useLayoutEffect：处理副作用--浏览器重新绘制屏幕之前触发同步触发的。可以阻塞组件的渲染过程

useContext：使用上下文,减少组件层

useMemo：需要return. Hook用于缓存计算结果,比如进来计算页面的头部高度、以及传递过来的参数是否全屏，react.memo但是对props是浅比较，两个参数callback，deps

const layoutPadding = getQueryVariable('shareFlag') == 1 ? 0 : useMemo(() => {

return statusBarHeight + 44

}, [statusBarHeight])

useCallback：用于缓存函数实例--

useRef：用于引用 DOM 元素或者存储可变的值

useReducer‌: 处理复杂逻辑，通过dispatch函数更新状态

useDebugValue‌: 显示自定义调试信息（已弃用）

Hooks

规则：只能在函数组件的最顶层使用钩子。不要在循环、条件判断或者子函数中调用钩子

react父子组件传值

prop
Provider 和 Consumer - createContext, useContext创建上下文
Redux:
1. - Store：存储应用的整个状态树。
  - Action：描述状态变更的对象。
  - Reducer：用于更新状态的纯函数

const messageReducer = ()

store =createStore(messageReducer)

useSelector 和 useDispatch 访问和更新状态

redux：适用于所有Vue项目也能使用，创建store文件夹 reducer.js。

function reducer(state=[],action) {} function reducer2(state=[],action) {}

export default combineReduces({reducer,reducer2})

创建index.js const store = createStore(reducer)

页面直接引入路径，store.getState()、 store.dispath({type:'',参数:''})

Reducer：一个数据绑定一个，多个绑定多个，两个关联的使用combineReduces({reducer,reducer2})

插件有

React-Redux

react-redux:

connect使用：

组件中

import

function Third(props){console.log(props) return(<div>你好</div>)}

在function外面重新定义如何关联

const mapStateProps = (state) =>{return {..state}}

const actionObj = {

removeGoods(goods){

return {type: 'removeGoods', goods:goods}

}

export default connect(mapStateProps,actionObj)(Third)

reduxjs/toolkit

redux使用的插件。@reduxjs/toolkit createSlice

const numReducer = createSlice({

name: 'num',

initialState:0,

reducers:{

// 不需要接受type

add:function(state, action){

return state++

}

})

export const {add}=numReducer.actions

store/Index.js

import {buyListReducer,numReducer} from "./reducer";

import { configureStore } from "@reduxjs/toolkit";

const store = configureStore({

reducer:{

num: numReducer.reducer

}

})

export default store

页面使用。useDispatch()

受控组件和非受控组件有什么区别？

受控组件是状态由 React 控制的组件。组件接收其当前值并通过 props 更新它。当值改变时它也会触发回调函数。这意味着该组件不存储其自己的内部状态。相反，父组件管理该值并将其传递给受控组件。

不受控制的组件使用 refs 或其他方法在内部管理自己的状态。它们独立存储和更新状态，不依赖 props 或回调。父组件对不受控组件的状态控制较少

基于类的 React 组件和函数式 React 组件有什么区别？

类的组件React.Component。使用render方法返回定义组件输出的 JSX 。访问组件生命周期方法和状态管理this.setState()

函数组件被认为更简单、更容易阅读和测试。他们接受 props 作为参数并直接返回 JSX。功能组件无权访问生命周期方法或状态。然而，随着 React 16.8 中 React Hooks 的引入，功能组件现在可以管理状态并使用其他功能，例如上下文和效果

组件的生命周期方法有哪些？

constructor：这是创建组件时调用的第一个方法。它用于初始化状态和绑定事件处理程序。在函数组件中，可以将useState钩子用于类似的目的。
render：该方法负责渲染 JSX 标记并返回要在屏幕上显示的内容。
componentDidMount：组件在 DOM 中渲染后立即调用此方法。它通常用于初始化任务，例如 API 调用或设置事件侦听器。
componentDidUpdate：当组件的 props 或 state 改变时调用此方法。它允许您执行副作用、根据更改更新组件或触发其他 API 调用。
componentWillUnmount：在组件从 DOM 中删除之前调用此方法。它用于清理在中设置的任何资源componentDidMount，例如删除事件侦听器或取消计时器
componentWillMount、componentWillReceiveProps和componentWillUpdate

React 中的 props 是什么？

Props 是从父组件传递给组件的数据。props 是只读的，无法更改

状态管理器： React Context，Redux

Redux中的reducer是什么，它有哪些参数？

reducer是一个纯函数，以 state 和 action 为参数。在reducer中，我们会跟踪接收到的操作类型，并根据它修改状态，返回一个新的状态对象

什么是 Action，如何更改 Redux 中的状态？异步如何处理？

Action:是发起状态变更的一种方式,本质上它是一个普通的JavaScript对象,Action 是不可变的,这意味着一旦创建,Action 对象就不应被修改。每个 Action 都有一个必需的 type 属性，通过 payload 属性

使用中间件：在Redux 中处理异步操作需要中间件，例如 Redux Thunk 或 Redux Saga。这些中间件允许你编写返回函数或生成器的 Action Creator

Redux 实现了哪种模式?

Flux模式，引入单向数据流和应用程序状态的集中存储来帮助管理应用程序的状态

什么是JSX？

默认情况下，在 react 中使用以下语法创建元素

const someElement = React.createElement('h3',{className: 'title__value'},'Some Title Value')

但我们通常这样去写：

const someElement = (<h3 className='title__value']]>Some Title Value</h3]]>);

这正是被称为 jsx 的标记。这是一种语言扩展简化了代码和开发的感知

什么是 Props 透传？

Props 透传是指通过多层嵌套组件传递 props 的过程，即使某些中间组件不直接使用这些 props。这可能会导致代码结构复杂且繁琐

什么是React上下文？

多个未通过道具直接连接的组件之间共享数据时，上下文就非常有用

由三个主要部分组成：

createContext（创建上下文）：该函数用于创建新的上下文对象。
Context.Provider：该组件用于为上下文提供值。它封装了需要访问该值的组件。
Context.Consumer 或 useContext 钩子：该组件或钩子用于从上下文中获取值。它可以在上下文提供者的任何组件中使用。

通过使用 React Context，可以避免props 透传（通过多级组件传递props），并在更高层次上轻松管理状态，从而使代码更有条理、更高效

useContext 的用途是什么？它是如何工作的？

在典型的 React 应用程序中，数据是使用道具从上到下（从父组件到子组件）传递的。但是，这种使用方法对于某些类型的道具（例如所选语言、用户界面主题）来说可能过于繁琐，因为这些道具必须传递给应用程序中的许多组件

上下文提供了一种在组件间共享此类数据的方法，而无需明确地将道具传递到树的每一层。当上下文值发生变化时，调用 useContext 的组件总是会被重新渲染

什么是React Fragment？

<></>:创建不必要的节点

什么是React调和

调和是 React 的一种算法，用于区分一棵元素树和另一棵元素树，以确定需要替换的部分。调和是我们过去所说的虚拟 DOM 背后的算法

为什么使用map()时需要key？

这些键可帮助 React 确定哪些元素已被更改、添加或移除。必须指定这些键，这样 React 才能匹配数组元素。选择键的最佳方法是使用一个能将列表项与其相邻项明确区分开来的字符串

如何访问DOM元素？

使用 React.createRef() 或 useRef() 钩子创建的，并通过 ref 属性附加到 React 元素上。通过访问创建的引用，我们可以使用 ref.current 访问 DOM 元素

什么是自定义钩子？

自定义钩子是一种允许您在不同组件之间重复使用逻辑的功能。它是一种封装可重用逻辑的方法，以便在多个组件之间轻松共享和重用。自定义钩子是通常以 *use * 开头的函数，可在需要时调用其他钩子

创建自定义钩子的规则是什么？

钩子名称以 "use "开头。
如有需要，请使用现有钩子。
不要有条件地调用钩子。
将可重复使用的逻辑提取到自定义钩子中。
自定义钩子必须是纯函数。
自定义钩子可以返回值或其他钩子。
以描述性的方式命名自定义钩子。

什么是SSR（服务器端渲染）

服务器端渲染（SSR）是一种用于在服务器上渲染网页并将完全渲染后的网页发送到客户端显示的技术。它允许服务器生成网页的完整 HTML 标记，包括动态内容，并作为对请求的响应发送给客户端

SSR 常用于 React 的 Next.js 和 Vue.js 的 Nuxt.js 等框架和库中，以启用服务器端呈现功能。这些框架会为您处理服务器端呈现逻辑，从而更容易实现 SSR

使用SSR有什么好处？

改善初始加载时间： SSR 允许服务器向客户端发送完整呈现的 HTML 页面，从而减少客户端所需的处理量。这就改善了初始加载时间，因为用户可以更快地看到完整的页面。
有利于搜索引擎优化：搜索引擎可以有效地抓取和索引 SSR 页面的内容，因为在初始响应中提供了完全呈现的 HTML。这就提高了搜索引擎的可见性，有助于获得更好的搜索排名。
可访问性： SSR 可确保禁用 JavaScript 或使用辅助技术的用户可以访问内容。通过在服务器上生成 HTML，SSR 可为所有用户提供可靠、可访问的用户体验。
低带宽环境下的性能： SSR 减少了客户端需要下载的数据量，因此有利于低带宽或高延迟环境中的用户。这对于移动用户或网络连接速度较慢的用户尤为重要。

你知道哪些 React 架构解决方案？

MVC（模型-视图-控制器） ：MVC 是一种传统的架构模式，它将应用程序分为三个主要组件 - 模型、视图和控制器。React 可以在 View 层中使用来渲染 UI，而其他库或框架可以用于 Model 和 Controller 层。
Flux：Flux是Facebook专门针对React应用程序推出的应用程序架构。它遵循单向数据流，其中数据沿单个方向流动，从而更容易理解和调试应用程序的状态更改。
原子设计：原子设计并不是 React 特有的，而是一种将 UI 划分为更小、可重用组件的设计方法。它鼓励构建小型、独立且可以组合以创建更复杂的 UI 的组件。
容器和组件模式：该模式将表示（组件）与逻辑和状态管理（容器）分开。组件负责渲染 UI，而容器则处理业务逻辑和状态管理。
功能切片设计：它是一种用于组织和构建 React 应用程序的现代架构方法。它旨在通过根据功能或模块划分应用程序代码库来解决可扩展性、可维护性和可重用性的挑战。

你知道Next.js的主要功能有哪些？

getStaticProps：此方法用于在构建时获取数据并将页面预渲染为静态 HTML。它确保数据在构建时可用，并且不会因后续请求而更改

getServerSideProps：该方法用于在每次请求时获取数据并在服务器上预渲染页面。当您需要获取可能经常更改或特定于用户的数据时，可以使用它

getStaticPaths：此方法用于动态路由中，以指定应在构建时预渲染的路径列表。它通常用于获取带有参数的动态路由的数据