对于react的理解

## react 生命周期

初始化阶段：

getDefaultProps:获取实例的默认属性
getInitialState:获取每个实例的初始化状态
componentWillMount：组件即将被装载、渲染到页面上
render:组件在这里生成虚拟的 DOM 节点
componentDidMount:组件真正在被装载之后

运行中状态：

componentWillReceiveProps:组件将要接收到属性的时候调用
shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回 false，接收数据后不更新，阻止 render 调用，后面的函数不会被继续执行了）
componentWillUpdate:组件即将更新不能修改属性和状态
render:组件重新描绘
componentDidUpdate:组件已经更新

销毁阶段：

componentWillUnmount:组件即将销毁

shouldComponentUpdate 是做什么的，（react 性能优化是哪个周期函数？）

shouldComponentUpdate 这个方法用来判断是否需要调用 render 方法重新描绘 dom。因为 dom 的描绘非常消耗性能，如果我们能在 shouldComponentUpdate 方法中能够写出更优化的 dom diff 算法，可以极大的提高性能。

在react17 会删除以下三个生命周期
componentWillMount，componentWillReceiveProps ， componentWillUpdate

对于store的理解

Store 就是把它们联系到一起的对象。Store 有以下职责：

维持应用的 state；
提供 getState() 方法获取 state；
提供 dispatch(action) 方法更新 state；
通过 subscribe(listener) 注册监听器;
通过 subscribe(listener) 返回的函数注销监听器

redux

redux是如何更新值得

用户发起操作之后，dispatch发送action ，根据type，触发对于的reducer，reducer 就是一个纯函数，接收旧的 state 和 action，返回新的 state。通过 subscribe(listener) 监听器，派发更新。

react-redux

react-redux是为了让redux更好的适用于react而生的一个库

redux 底层思想是什么？

setState之后发生了什么？

（1）代码中调用 setState 函数之后，React 会将传入的参数对象与组件当前的状态合并，然后触发所谓的调和过程（Reconciliation）。
（2）经过调和过程，React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个 UI 界面；
（3）在 React 得到元素树之后，React 会自动计算出新的树与老树的节点差异，然后根据差异对界面进行最小化重渲染；
（4）在差异计算算法中，React 能够相对精确地知道哪些位置发生了改变以及应该如何改变，这就保证了按需更新，而不是全部重新渲染。

setState的调用会引起React的更新生命周期的4个函数执行。

shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

setState 是同步异步？为什么？实现原理？

1. setState是同步执行的

setState是同步执行的，但是state并不一定会同步更新

2. setState在React生命周期和合成事件中批量覆盖执行

在React的生命周期钩子和合成事件中，多次执行setState，会批量执行

具体表现为，多次同步执行的setState，会进行合并，类似于Object.assign，相同的key，后面的会覆盖前面的

当遇到多个setState调用时候，会提取单次传递setState的对象，把他们合并在一起形成一个新的
单一对象，并用这个单一的对象去做setState的事情，就像Object.assign的对象合并，后一个
key值会覆盖前面的key值

经过React 处理的事件是不会同步更新 this.state的. 通过 addEventListener || setTimeout/setInterval 的方式处理的则会同步更新。
为了合并setState，我们需要一个队列来保存每次setState的数据，然后在一段时间后执行合并操作和更新state，并清空这个队列，然后渲染组件。

constructor 为什么不先渲染？

由ES6的继承规则得知，不管子类写不写constructor，在new实例的过程都会给补上constructor。

所以：constructor钩子函数并不是不可缺少的，子组件可以在一些情况略去。比如不自己的state，从props中获取的情况

react router

import React from 'react'
import { render } from 'react-dom'
import { browserHistory, Router, Route, IndexRoute } from 'react-router'

import App from '../components/App'
import Home from '../components/Home'
import About from '../components/About'
import Features from '../components/Features'

render(
  <Router history={browserHistory}>  // history 路由
    <Route path='/' component={App}>
      <IndexRoute component={Home} />
      <Route path='about' component={About} />
      <Route path='features' component={Features} />
    </Route>
  </Router>,
  document.getElementById('app')
)
render(
  <Router history={browserHistory} routes={routes} />,
  document.getElementById('app')
)

React Router 提供一个routerWillLeave生命周期钩子，这使得 React组件可以拦截正在发生的跳转，或在离开route前提示用户。routerWillLeave返回值有以下两种：

return false 取消此次跳转
return 返回提示信息，在离开 route 前提示用户进行确认。

react 父子传值

父传子——在调用子组件上绑定，子组件中获取this.props
子传父——引用子组件的时候传过去一个方法，子组件通过this.props.methed()传过去参数

connection

react代理原生事件为什么？

通过冒泡实现，为了统一管理，对更多浏览器有兼容效果

合成事件原理

如果react事件绑定在了真实DOM节点上，一个节点同事有多个事件时，页面的响应和内存的占用会受到很大的影响。因此SyntheticEvent作为中间层出现了。

事件没有在目标对象上绑定，而是在document上监听所支持的所有事件，当事件发生并冒泡至document时，react将事件内容封装并叫由真正的处理函数运行。

类的key改了，会发生什么，会执行哪些周期函数？

在开发过程中，我们需要保证某个元素的 key 在其同级元素中具有唯一性。在 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染。此外，React 还需要借助 Key 值来判断元素与本地状态的关联关系，因此我们绝不可忽视转换函数中 Key 的重要性。

答：componentWillMount componentDidMount render

react 的优化

shouldcomponentUpdate pureCompoment setState

CPU的瓶颈（当有大量渲染任务的时候，js线程和渲染线程互斥）
IO的瓶颈就是网络（如何在网络延迟客观存在的情况下，减少用户对网络延迟的感知）（Code Splitting • Data Fetching）比如react.lazy（组件懒加载） suspense(分包在网络上，用的时候在获取)
Virtual DOM 快么（Virtual DOM的优势不在于单次的操作，而是在大量、频繁的数据更新下，能够对视图进行合理、高效的更新。）

展示组件(Presentational component)和容器组件(Container component)之间有何不同?

vue 或者react 优化整体优化

虚拟dom

为什么虚拟 dom 会提高性能?(必考)

虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能。

用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异把 2 所记录的差异应用到步骤 1 所构建的真正的 DOM 树上，视图就更新了。

hooks 常用的

useEffct使用：
如果不传参数：相当于render之后就会执行
传参数为空数组：相当于componentDidMount
如果传数组：相当于componentDidUpdate
如果里面返回：相当于componentWillUnmount
会在组件卸载的时候执行清除操作。effect 在每次渲染的时候都会执行。React 会在执行当前 effect 之前对上一个 effect 进行清除。

useLayoutEffect:
useLayoutEffect在浏览器渲染前执行
useEffect在浏览器渲染之后执行

当父组件引入子组件以及在更新某一个值的状态的时候，往往会造成一些不必要的浪费，
而useMemo和useCallback的出现就是为了减少这种浪费，提高组件的性能，
不同点是：useMemo返回的是一个缓存的值，即memoized 值，而useCallback返回的是一个memoized 回调函数。


useCallback
父组件更新子组件会渲染,针对方法不重复执行，包装函数返回函数；

useMemo:
const memoizedValue =useMemo(callback,array)
callback是一个函数用于处理逻辑
array 控制useMemo重新执⾏行的数组，array改变时才会 重新执行useMemo
不传数组，每次更新都会重新计算
空数组，只会计算一次
依赖对应的值，当对应的值发生变化时，才会重新计算(可以依赖另外一个 useMemo 返回的值)
不能在useMemo⾥面写副作⽤逻辑处理，副作用的逻辑处理放在 useEffect内进行处理

自定义hook
自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook，
自定义 Hook 是一种自然遵循 Hook 设计的约定，而并不是 React 的特性
在我看来，自定义hook就是把一块业务逻辑单独拿出去写。

 const [counter, setCounter] = useState(0);
 const counterRef = useRef(counter);  // 可以保存上一次的变量

useRef 获取节点
function App() {
    const inputRef = useRef(null);

    return <div>
        <input type="text" ref={inputRef}/>
        <button onClick={() => inputRef.current.focus()}>focus</button>
    </div>
}

hooks父子传值

父传子
在父组件中用useState声明数据
 const [ data, setData ] = useState(false)

把数据传递给子组件
<Child data={data} />

子组件接收
export default function (props) {
	const { data } = props
	console.log(data)
}
子传父
子传父可以通过事件方法传值，和父传子有点类似。
在父组件中用useState声明数据
 const [ data, setData ] = useState(false)

把更新数据的函数传递给子组件
<Child setData={setData} />

子组件中触发函数更新数据，就会直接传递给父组件
export default function (props) {
	const { setData } = props
	setData(true)
}
如果存在多个层级的数据传递，也可依照此方法依次传递

// 多层级用useContext
const User = () => {
 // 直接获取，不用回调
 const { user, setUser } = useContext(UserContext);
 return <Avatar user={user} setUser={setUser} />;
};

hooks 组件内部执行原理？

hooks 和 class 比较的优势？

一、更容易复用代码

二、清爽的代码风格+代码量更少

缺点

状态不同步
不好用的useEffect，

diff算法如何比较?

只对同级比较，跨层级的dom不会进行复用
不同类型节点生成的dom树不同，此时会直接销毁老节点及子孙节点，并新建节点
可以通过key来对元素diff的过程提供复用的线索
单节点diff
单点diff有如下几种情况：
key和type相同表示可以复用节点
key不同直接标记删除节点，然后新建节点
key相同type不同，标记删除该节点和兄弟节点，然后新创建节点

fetch封装

npm install whatwg-fetch --save  // 适配其他浏览器
npm install es6-promise

export const handleResponse = (response) => {
  if (response.status === 403 || response.status === 401) {
    const oauthurl = response.headers.get('locationUrl');
    if (!_.isEmpty(oauthUrl)) {
      window.location.href = oauthurl;
      return;
    }
  }
  if (!response.ok) {
    return getErrorMessage(response).then(errorMessage => apiError(response.status, errorMessage));
  }
  if (isJson(response)) {
    return response.json();
  }
  if (isText(response)) {
    return response.text();
  }

  return response.blob();
};

const httpRequest = {
  request: ({
    method, headers, body, path, query,
  }) => {
    const options = {};
    let url = path;
    if (method) {
      options.method = method;
    }
    if (headers) {
      options.headers = {...options.headers,...headers};
    }
    if (body) {
      options.body = body;
    }
    if (query) {
      const params = Object.keys(query)
        .map(k => `${k}=${query[k]}`)
        .join('&');
      url = url.concat(`?${params}`);
    }
    return fetch(url, Object.assign({}, options, { credentials: 'same-origin' })).then(handleResponse);
  },
};

export default httpRequest;

用户不同权限可以查看不同的页面如何实现？

Js方式
根据用户权限类型，把菜单配置成json, 没有权限的直接不显示
react-router 方式在route 标签上添加onEnter事件，进入路由之前替换到首页

<Route path="/home" component={App} onEnter={(nexState,replace)=>{
      if(nexState.location.pathname!=='/'){
         var  sid = UtilsMoudle.getSidFromUrl(nexState);
         if(!sid){
            replace("/")
         }else{
            console.log(sid);
         }
      }
    }}>

\3. 自己封装一个privateRouter组件里面判断是否有权限，有的话返回

没有权限的话component 返回一个提示信息的组件。

\4. 扩展一下，如果是根据用权限来判断是否隐藏组件该怎么做呢？
react 可以使用高阶组件，在高阶组件里面判断是否有权限，然后判断是否返回组件，无权限返回null
vue 可以使用自定义指令，如果没有权限移除组件

// 需要在入口处添加自定义权限指令v-auth，显示可操作组件
Vue.directive('auth', {
    bind: function (el, binding, vnode) {
        // 用户权限表
        const rules = auths
        for (let i = 0; i < rules.length; i++) {
            const item = rules[i]
            if(!binding.value || (binding.value == item.auth)){
                // 权限允许则显示组件
                return true
            }
        }
        // 移除组件
        el.parentNode.removeChild(el)
    }
})
// 使用
<template>
  <div>
    <Button v-auth="admin_user_add">添加用户</Button>
    <Button v-auth="admin_user_del">删除用户</Button>
    <Button v-auth="admin_user_edit">编辑用户</Button>
  </div>
</template>

高阶组件

高阶函数：如果一个函数接受一个或多个函数作为参数或者返回一个函数就可称之为高阶函数。

高阶组件：如果一个函数 接受一个或多个组件作为参数并且返回一个组件 就可称之为 高阶组件。

react 中的高阶组件

React 中的高阶组件主要有两种形式：属性代理和反向继承。

属性代理（Props Proxy）

操作 props
抽离 state
通过 ref 访问到组件实例
用其他元素包裹传入的组件 WrappedComponent

反向继承

会发现其属性代理和反向继承的实现有些类似的地方，都是返回一个继承了某个父类的子类，只不过属性代理中继承的是 React.Component，反向继承中继承的是传入的组件 WrappedComponent。

反向继承可以用来做什么：

1.操作 state

高阶组件中可以读取、编辑和删除WrappedComponent组件实例中的state。甚至可以增加更多的state项，但是非常不建议这么做因为这可能会导致state难以维护及管理。

function withLogging(WrappedComponent) {	
    return class extends WrappedComponent {	
        render() {	
            return (	
                <div>;	
                    <h2>;Debugger Component Logging...<h2>;	
                    <p>;state:<p>;	
                    <pre>;{JSON.stringify(this.state, null, 4)}<pre>;	
                    <p>props:<p>;	
                    <pre>{JSON.stringify(this.props, null, 4)}<pre>;	
                    {super.render()}	
                <div>;	
            );	
        }	
    };	
}

2.渲染劫持（Render Highjacking）

条件渲染通过 props.isLoading 这个条件来判断渲染哪个组件。

修改由 render() 输出的 React 元素树

高阶组件存在的问题

静态方法丢失(必须将静态方法做拷贝)
refs 属性不能透传(如果你向一个由高阶组件创建的组件的元素添加ref引用，那么ref指向的是最外层容器组件实例的，而不是被包裹的WrappedComponent组件。)
反向继承不能保证完整的子组件树被解析
React 组件有两种形式，分别是 class 类型和 function 类型（无状态组件）。

我们知道反向继承的渲染劫持可以控制 WrappedComponent 的渲染过程，也就是说这个过程中我们可以对 elements tree、 state、 props 或 render() 的结果做各种操作。

但是如果渲染 elements tree 中包含了 function 类型的组件的话，这时候就不能操作组件的子组件了。

高阶组件的应用场景

权限控制

利用高阶组件的 条件渲染 特性可以对页面进行权限控制，权限控制一般分为两个维度：页面级别 和 页面元素级别

// HOC.js	
function withAdminAuth(WrappedComponent) {	
    return class extends React.Component {	
        state = {	
            isAdmin: false,	
        }	
        async componentWillMount() {	
            const currentRole = await getCurrentUserRole();	
            this.setState({	
                isAdmin: currentRole === 'Admin',	
            });	
        }	
        render() {	
            if (this.state.isAdmin) {	
                return &lt;WrappedComponent {...this.props} /&gt;;	
            } else {	
                return (&lt;div&gt;您没有权限查看该页面，请联系管理员！&lt;/div&gt;);	
            }	
        }	
    };	
}

// 使用
// pages/page-a.js	
class PageA extends React.Component {	
    constructor(props) {	
        super(props);	
        // something here...	
    }	
    componentWillMount() {	
        // fetching data	
    }	
    render() {	
        // render page with data	
    }	
}	
export default withAdminAuth(PageA);

可能你已经发现了，高阶组件其实就是装饰器模式在 React 中的实现：通过给函数传入一个组件（函数或类）后在函数内部对该组件（函数或类）进行功能的增强（不修改传入参数的前提下），最后返回这个组件（函数或类），即允许向一个现有的组件添加新的功能，同时又不去修改该组件，属于 包装模式(Wrapper Pattern) 的一种。

什么是装饰者模式：在不改变对象自身的前提下在程序运行期间动态的给对象添加一些额外的属性或行为

可以提高代码的复用性和灵活性。

再对高阶组件进行一个小小的总结：

高阶组件 不是组件，是一个把某个组件转换成另一个组件的函数
高阶组件的主要作用是 代码复用
高阶组件是 装饰器模式在 React 中的实现

封装组件的原则

封装原则

1、单一原则：负责单一的页面渲染

2、多重职责：负责多重职责，获取数据，复用逻辑，页面渲染等

3、明确接受参数：必选，非必选，参数尽量设置以_开头，避免变量重复

4、可扩展：需求变动能够及时调整，不影响之前代码

5、代码逻辑清晰

6、封装的组件必须具有高性能，低耦合的特性

7、组件具有单一职责：封装业务组件或者基础组件，如果不能给这个组件起一个有意义的名字，证明这个组件承担的职责可能不够单一，需要继续抽组件，直到它可以是一个独立的组件即可

react 强制刷新

component.forceUpdate() 一个不常用的生命周期方法, 它的作用就是强制刷新

官网解释如下

默认情况下，当组件的 state 或 props 发生变化时，组件将重新渲染。如果 render() 方法依赖于其他数据，则可以调用 forceUpdate() 强制让组件重新渲染。

调用 forceUpdate() 将致使组件调用 render() 方法，此操作会跳过该组件的 shouldComponentUpdate()。但其子组件会触发正常的生命周期方法，包括 shouldComponentUpdate() 方法。如果标记发生变化，React 仍将只更新 DOM。

通常你应该避免使用 forceUpdate()，尽量在 render() 中使用 this.props 和 this.state。

shouldComponentUpdate 在初始化和 forceUpdate 不会执行

useEffect和useLayoutEffect的区别

useEffect
基本上90%的情况下,都应该用这个,这个是在render结束后,你的callback函数执行,但是不会block browser painting,算是某种异步的方式吧,但是class的componentDidMount 和componentDidUpdate是同步的,在render结束后就运行,useEffect在大部分场景下都比class的方式性能更好.
useLayoutEffect
这个是用在处理DOM的时候,当你的useEffect里面的操作需要处理DOM,并且会改变页面的样式,就需要用这个,否则可能会出现出现闪屏问题, useLayoutEffect里面的callback函数会在DOM更新完成后立即执行,但是会在浏览器进行任何绘制之前运行完成,阻塞了浏览器的绘制.

react 版本差异

react16.8 hooks

React 16之后有三个生命周期被废弃(但并未删除)

componentWillMount
componentWillReceiveProps
componentWillUpdate

官方计划在17版本完全删除这三个函数，只保留UNSAVE_前缀的三个函数，目的是为了向下兼容，

react 16.4 新增

getSnapshotBeforeUpdate

getDerivedStateFromProps

对于废弃的生命周期函数，官方会采用逐步迁移的方式来实现版本的迁移：

16.3：为不安全的生命周期引入别名，UNSAFE_componentWillMount、UNSAFE_componentWillReceiveProps 和 UNSAFE_componentWillUpdate。（旧的生命周期名称和新的别名都可以在此版本中使用。）

未来 16.x 版本：为 componentWillMount、componentWillReceiveProps 和 componentWillUpdate 启用废弃告警。（旧的生命周期名称和新的别名都将在这个版本中工作，但是旧的名称在开发模式下会产生一个警告。）

17.0：删除 componentWillMount、componentWillReceiveProps 和 componentWillUpdate。（在此版本之后，只有新的 “UNSAFE_” 生命周期名称可以使用。）。

原文链接：react新旧版本生命周期函数讲解_诗渊的博客-CSDN博客_react废弃的生命周期

constructor

答案是：在 constructor 函数里面，需要用到props的值的时候，就需要调用 super(props)

\1. class语法糖默认会帮你定义一个constructor，所以当你不需要使用constructor的时候，是可以不用自己定义的

\2. 当你自己定义一个constructor的时候，就一定要写super()，否则拿不到this

\3. 当你在constructor里面想要使用props的值，就需要传入props这个参数给super，调用super(props)，否则只需要写super()

posted @ 2025-12-04 09:38 只心阅读(0) 评论(0) 收藏举报

刷新页面返回顶部

MyJiBai

99%的问题都可以用坚持解决

对于react的理解

## react 生命周期

对于store的理解

redux

redux是如何更新值得

react-redux

redux 底层思想是什么？

setState之后发生了什么？

setState 是同步异步？为什么？实现原理？

constructor 为什么不先渲染？

react router

react 父子传值

react代理原生事件为什么？

类的key改了，会发生什么，会执行哪些周期函数？

react 的优化

vue 或者react 优化整体优化

hooks 常用的

hooks父子传值

hooks 组件内部执行原理？

hooks 和 class 比较的优势？

diff算法如何比较?

fetch封装

用户不同权限可以查看不同的页面如何实现？

高阶组件

高阶组件存在的问题

高阶组件的应用场景

react 强制刷新

useEffect和useLayoutEffect的区别

react 版本差异

constructor

公告

MyJiBai

99%的问题都可以用坚持解决

对于react的理解

## react 生命周期

对于store的理解

redux

redux是如何更新值得

react-redux

redux 底层思想是什么？

setState之后 发生了什么？

setState 是同步异步？为什么？实现原理？

constructor 为什么不先渲染？

react router

react 父子传值

react代理原生事件为什么？

类的key改了，会发生什么，会执行哪些周期函数？

react 的优化

vue 或者react 优化整体优化

hooks 常用的

hooks父子传值

hooks 组件内部执行原理？

hooks 和 class 比较的优势？

diff算法如何比较?

fetch封装

用户不同权限 可以查看不同的页面 如何实现？

高阶组件

高阶组件存在的问题

高阶组件的应用场景

react 强制刷新

useEffect和useLayoutEffect的区别

react 版本差异

constructor

公告

setState之后发生了什么？

用户不同权限可以查看不同的页面如何实现？