IT评测·应用市场-qidao123.com技术社区

标题: React [打印本页]

---

作者: 北冰洋以北    时间: 2024-9-22 21:55
标题: 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:
  
  
  
  • 
    
    
    
    • 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：此方法用于动态路由中，以指定应在构建时预渲染的路径列表。它通常用于获取带有参数的动态路由的数据

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)

Powered by Discuz! X3.4