网站开发系统规划,湘潭做网站口碑好磐石网络,无锡网站建设专家,网页升级紧急通知中1.说说对react的理解 1️⃣是什么 React是用于构建用户界面的 JavaScript 库,遵循组件设计模式、声明式编程范式和函数式编程概念#xff0c;更高效使用虚拟 DOM 来有效地操作 DOM #xff0c;遵循从高阶组件到低阶组件的单向数据流。 react 类组件使用一个名为 render() 的方…1.说说对react的理解 1️⃣是什么 React是用于构建用户界面的 JavaScript 库,遵循组件设计模式、声明式编程范式和函数式编程概念更高效使用虚拟 DOM 来有效地操作 DOM 遵循从高阶组件到低阶组件的单向数据流。 react 类组件使用一个名为 render() 的方法或者函数组件 return 接收输入的数据并返回需要展示的内容。形式就是JSX最终会babel被编译为合法的 JS语句调用被传入的数据可在组件中通过this.props 在render() 访问。 2️⃣特性 JSX 语法 单向数据绑定 虚拟 DOM 声明式编程 Component 3️⃣优势 高效灵活 声明式的设计简单使用 组件式开发提高代码复用率单向响应的数据流会比双向绑定的更安全速度更快 2.state和props区别 1️⃣state 一个组件的显示形态可以由数据状态和外部参数所决定而数据状态就是 state ,一般在 constructor 中初始化当需要修改里面的值的状态需要通过调用 setState 来改变。 setState 还可以接受第二个参数,它是一个函数,会在 setState 调用完成并且组件开始重新演染时被调用可以用来监听渲染是否完成 2️⃣props props理解为从外部传入组件内部的数据react 具有单向数据流的特性,所以他的主要作用是从父组件向子组件中传递数据。props 可以传字符串,数字传递对象数组回调函数。 props 在内部不可变的,如果想要改变它看,只能通过外部组件传入新的 props 来重新渲染子组件否则子组件的 props 和展示形式不会改变 3️⃣区别 相同点: 两者都是 JavaScript 对象 两者都是用于保存信息 props 和state 都能触发渲染更新 区别: props 是外部传递给组件的,而 state 是在组件内被组件自己管理的,一般在 constructor 中初始化 props 在组件内部是不可修改的,但state 在组件内部可以进行修改state 是多变的、可以修改 3.super()和super(props)区别 在React 中,类组件基于ES6,所以在 constructor 中必须使用 super在调用 super 过程无论是否传入 props,React 内部都会将 props赋值给组件实例props 属性中如果只调用了 super(),那么 this.props 在super() 和构造函数结束之间仍是undefined 4.说说对react中类组件和函数组件的理解 1️⃣类组件 通过使用 ES6 类的编写形式来编写组件,该类必须继承 React.Component 如果想要访问父组件传递过来的参数可通过this.props 的方式去访问,在组件中必须实现render 方法,在return 中返回 React 对象 2️⃣函数组件 通过函数编写的形式去实现一个 React 组件。 函数第一个参数为props用于接收父组件传递过来的参数 3️⃣区别 1.编写形式一个function一个class 2.状态管理 类组件中调用setState在 hooks 情况下,函数组件调用 state 则需要创建一个类组件或者 state 提升到父组件中然后通过props 对象传递到子组件 3.生命周期 在函数组件中不存在生命周期生命周期钩子来自于继承的react.Component,函数组件useEffect来对应类组件中的componentDidMount生命周期。useEffect回调函数中return一个函数则return函数会在组件卸载的时候执行正如componentWillUnmount 4.调用方式 函数组件调用则是执行函数 类组件则需要将组件进行实例化然后调用实例对象的render方法 5.获取渲染值 类组件中输出this.props.user,this总是可变的而函数组件本身不存在this 4️⃣总结 两种组件都有各自的优缺点 函数组件语法更短更简单而类组件会因大量使用this而让人感到困惑 5.说说对受控组件和非受控组件的理解应用场景 受控组件就是受我们控制的组件组件的状态全程响应外部数据受控组件需要初始状态和状态更新事件函数。 非受控组件初始化接受外部数据自己在内部存储其自身状态通过ref查询DOM并查找其当前值。 应用场景 大部分时候推荐使用受控组件来实现表单 6.说说react的事件机制 react基于浏览器的事件机制自身实现了一套事件机制包括事件注册事件合成事件冒泡事件派发等在react中这套事件机制被称为合成事件。 react事件机制总结 React 上注册的事件最终会绑定在document这个 DOM 上而不是 React 组件对应的 DOM(减少 内存开销就是因为所有的事件都绑定在 document 上,其他节点没有绑定事件) React 自身实现了一套事件冒泡机制所以这也就是为什么我们event.stopPropagation()无效的原因。 React 通过队列的形式从触发的组件向父组件回溯,然后调用他们 JSX 中定义的 callbackReact 有一套自己的合成事件SyntheticEvent 7.react事件绑定的方式有哪些区别 绑定方式 render方法中使用bind render方法中使用箭头函数 constructor中bind 定义阶段使用箭头函数绑定 区别 编写方面:方式一、方式二写法简单,方式三的编写过于冗杂 性能方面:方式一和方式二在每次组件render的时候都会生成新的方法实例性能问题欠缺。若该函数作为属性值传给子组件的时候都会导致额外的渲染。而方式三、方式四只会生成一个方法实例 综合上述方式四是最优的事件绑定方式。 8.react构建组件的方式有哪些区别 构建方式 函数式创建 通过React.createClass 方法创建 继承 React.Component 创建 区别 由于React.createclass创建的方式过于冗杂并不建议使用而像函数式创建和类组件创建的区别主要在于需要创建的组件是否需要为有状态组件:· 对于一些无状态的组件创建,建议使用函数式创建的方式 由于react hooks 的出现,函数式组件创建的组件通过使用 hooks 方法也能使之成为有状态组件,再加上目前推崇函数式编程,所以这里建议都使用函数式的方式来创建组件在考虑组件的选择原则上能用无状态组件则用无状态组件 9.说说react中引入css的方式有哪几种区别 方式 在组件内直接使用 组件中引入.css 文件 .module.css 文件 css in Js 区别 在组件内直接使用css该方式编写方便,容易能够根据状态修改样式属性但是大量的演示编写 在组件内直接使用容易导致代码混乱 组件中引入.css 文件符合我们日常的编写习惯,但是作用域是全局的样式之间会层叠引 引入.module.css 文件能够解决局部作用域问题但是不方便动态修改样式需要使用内联的方式进行样式的编写 通过cssin s 这种方法,可以满足大部分场景的应用,可以类似于预处理器一样样式嵌套、定义修改状态等 至于使用 react 用哪种方案引入 css ,并没有一个绝对的答案,可以根据各自情况选择合适的方案 10.说说react生命周期有哪些不同阶段每个阶段对应的方法是 三个阶段 创建阶段 constructor getDerivedStateFromProps render componentDidMount 更新阶段 getDerivedStateFromProps shouldComponentUpdate render getSnapshotBeforeUpdate componentDidUpdate 卸载阶段 componentWillUnmount 11.react中组件之间如何通信 父组件向子组件传递 由于react的数据流动为单向的父组件向子组件传递是最常见的方式父组件在调用子组件的时候只需要在子组件标签哪传递参数子组件通过props属性就能接收父组件传递过来的参数 子组件向父组件传递 父组件向子组件传一个函数然后通过这函数的回调拿到子组件传过来的值 兄弟组件之间的通信 父组件作为中间层来实现数据的互通通过使用父组件传递 父组件向后代组件传递 通过使用react.createContext创建一个context创建成功后存在provider组件通过value属性用于给后代组件传递数据通过consumer组件或者使用contextType属性接收 非关系组件传递 通过使用redux 总结 由于 React 是单向数据流,主要思想是组件不会改变接收的数据,只会监听数据的变化当数据发生变化时它们会使用接收到的新值,而不是去修改已有的值因此可以看到通信过程中数据的存储位置都是存放在上级位置中 12.说说对高阶组件的理解 在react中高阶组件即接受一个或多个组件作为参数并且返回一个组件本质就是一个函数并不是一个组件。 通过对传入的原始组件做一些你想要的操作(比如操作 props,提取 state,给原始组件包裹其他元素等)从而加工出想要的组件把通用的逻辑放在高阶组件中对组件实现一致的处理从而实现代码的复用所以高阶组件的主要功能是封装并分离组件的通用逻辑,让通用逻辑在组件间更好地被复用 使用高阶组件的同时一般遵循一些约定如下: props 保持一致 不能在函数式组件上使用 ref 属性因为没有实例 不要再render()方法中使用高阶组件 使用 compose 组合高阶组件 应用场景 高阶组件能够提高代码的复用性和灵活性在实际应用中常常用于与核心业务无关但又在多个模块使用的功能,如权限控制、日志记录、数据校验、异常处理、统计上报等 13.在react中组件间过渡动画如何实现 在react 中实现过渡动画效果如 react-transition-group react-motion Animated 原生的CSS 14.说说你在react项目中如何捕获错误的 错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误形成错误边界组件的两个条件: 使用了 static getDerivedStateFromError(). 使用了 componentDidCatch() 下面这些情况无法捕获到异常: 事件处理 异步代码 服务端渲染 自身抛出来的错误 对于错误边界无法捕获的异常,如事件处理过程中发生问题并不会捕获到是因为其不会在渲染期间触发并不会导致渲染时候问题 这种情况可以使用js 的try…catch…语法 15.说说对react里的refs的理解应用场景 React 中的Refs 提供了一种方式允许我们访问DOM 节点或在 render方法中创建的React元素本质为 ReactDOM.render() 返回的组件实例,如果是渲染组件则返回的是组件实例如果渲染dom 则返回的是具体的dom 节点 使用 创建ref 的形式有三种: 传入字符串使用时通过 this.refs传入的字符串的格式获取对应的元素 传入对象对象是通过 React.createRef()方式创建出来使用时获取到创建的对象中存在current 属性就是对应的元素 传入函数该函数会在 DOM 被挂载时进行回调,回调函数参数会传入一个 元素对象,然后通过实例将对象进行保存 传入hook,hook是通过useRef() 方式创建使用时通过生成hook对象的 current 属性就是对应的元素 应用场景 对Dom元素的焦点控制、内容选择、控制 对Dom元素的内容设置及媒体播放对Dom元素的操作和对组件实例的操作 集成第三方 DOM 库 16.说说react中的setState执行机制 react修改数据状态state需要通过调用setState来改变从而达到更新组件内部数据作用。setState第一个参数可以是一个对象或者一个函数而第二个参数是一个回调函数用于可以实时的获取到更新之后的数据。在组件生命周期或react合成事件中setState是异步在setTimeout或者原声dom事件中setState是同步。 17.说说react render方法的原理在什么时候会被触发 render 函数里面可以编写 JSX 转化成 createElement 这种形式用于生成虚拟DOM最终转化成真实 DOM 在React 中类组件只要执行了 setState 方法就一定会触发render 函数执行函数组件使用useState更改状态不一定导致重新render组件的 props 改变了不一定触发 render 函数的执行但是如果 props 的值来自于父组件或者祖先组件的state 在这种情况下父组件或者祖先组件的 state 发生了改变就会导致子组件的重新渲染所以,一旦执行了setState 就会执行 render 方法, useState 会判断当前值有无发生改变确定是否执行 render 方法一旦父组件发生渲染子组件也会渲染 18.说说real DOM和virtual DOM区别优缺点 两者的区别如下: 虚拟 DOM 不会进行排版与重绘操作,而真实 DOM 会频繁重排与重绘 虚拟 DOM 避免大量的无谓计算 真实 DOM 的优势:易用 缺点: 效率低解析速度慢,内存占用量过高 性能差:频繁操作真实 DOM易于导致重绘与回流。 虚拟 DOM 的优势: 性能方面: 使用 Virtual DOM,能够有效避免真实 DOM 数频繁更新,减少多次引起重绘与回流提高性能 跨平台:React 借助虚拟 DOM,带来了跨平台的能力一套代码多端运行 缺点: 在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化 首次染大量 DOM 时由于多了一层虚拟 DOM 的计算速度比正常稍慢 19.说说react jsx转换成真实dom过程 使用React.createElement或JSX编写React组件,JSX 代码最后都会通过babel转换成React.createElement createElement函数对key和ref等特殊的props进行处理并获取defaultProps对默认props进行赋值并且对传入的孩子节点进行处理最终构造成一个虚拟DOM对象 ReactDOM.render将生成好的虚拟DOM渲染到指定容器上其中采用了批处理、事务等机制并且对特定浏览器进行了性能优化最终转换为真实DOM 20.说说对fiber架构的理解解决什么问题 在react中主要做了以下的操作: 增加了优先级,优先级高的任务可以中断低优先级的任务。然后再重新,注意是重新执行优先级低的任务 增加了异步任务调用requestidleCallback api,浏览器空闲的时候执行. dom diff树变成了链表,一个dom对应两个fiber对应两个队列为找到被中断的任务重新执行 从架构角度来看,Fiber 是对 React 核心算法重写从编码角度来看,Fiber 是 React 内部所定义的一种数据结构,它是 Fiber 树结构的节点单位也就是React 16 新架构下的虚拟 DOM一个 fiber 就是一个 JavaScript 对象,包含了元素的信息、该元素的更新操作队列、类型。 21.react中的key有什么作用 跟 Vue 一样, React 也存在 Diff 算法,而元素 key 属性的作用是用于判断元素是新创建的还是被移动的元素从而减少不必要的元素渲染 22.说说react diff的原理是什么 1️⃣tree层级 DOM节点跨层级的操作不做优化只会对相同层级的节点进行比较 2️⃣conponent层级 如果是同一个类的组件则会继续往下diff运算如果不是一个类的组件那么直接删除这个组件下的所有子节点创建新的 3️⃣element层级 比较同一层级的节点每个节点对应的层级用唯一的key作为标识 23.说说对react hooks的理解解决了什么问题 常见的hooks 1️⃣useState 在函数组件中通过useState 实现函数内部维护 state ,参数为 state 默认的值返回值是一个数组第一个值为当前的state ,第二个值为更新state 的函数 2️⃣useEffect useEffect第一个参数接受一个回调数默认情况下useEffect会在第一次渲染和更新之后都会执行,相当于在componentDidMount 和componentDidUpdate 两个生命周期函数中执行回调 3️⃣ useRef 4️⃣useReducer 管理多个相对关联的状态数据定义一个reducer函数根据不同的action返回不同的新状态在组件中调用useReducer,并传入reducer函数和状态的初始值事件发生时,通过dispatch函数分派一个action对象 5️⃣useCallback 作用:在组件多次重新渲染的时候缓存函数 6️⃣ useMemo 作用:允许组件在Props没有改变的情况下跳过渲染 解决hooks 能够更容易解决状态相关的重用的问题每调用useHook一次都会生成一份独立的状态通过自定义hook能够更好的封装我们的功能编写 hooks 为函数式编程每个功能都包裹在函数中使函数组件的功能得到了扩充拥有了类组件相似的功能拥有代码复用机制 24.如何提高组件的渲染效率在react中如何避免不必要的render render 的触发时机就是类组件通过调用 setState 方法就会导致 render 父组件一旦发生 render 渲染,子组件一定也会执行 render 渲染父组件渲染导致子组件渲染,子组件并没有发生任何改变就会导致无谓的渲染。 解决方法如下: 1️⃣shouldComponentUpdate 通过shouldComponentUpdate生命周期函数来比对 state 和props确定是否要重新渲染默认情况下返回 true 表示重新渲染,如果不希望组件重新渲染,返回 false 即可 2️⃣React.memo React.memo 用来缓存组件的渲染,避免不必要的更新 25.react性能优化的手段有哪些 避免使用内联函数 使用react fragments避免额外标记 使用Immutable 懒加载组件 事件绑定方式 服务端渲染 组件拆分 合理使用hooks 避免不必要的render 26.说说对react router理解常用的router组件有些哪些 react-router页面的url发生改变时页面的显示结果根据url的变化而变化页面不会刷新从而实现单页面应用 react-router主要的包: 1️⃣react-router:实现了路由的核心功能 2️⃣react-router-dom: 基于react-router,加入了在浏览器运行环境下的一些功能 3️⃣react-router-native: 基于 react-router,加入了 react-native 运行环境下的一些功能 4️⃣react-router-config: 用于配置静态路由的工具库 27.react router有几种模式实现原理 React Router 两种模式 hash 模式和 history 模式对应的组件为: HashRouter 通过window.addEventListener(‘hashChange’,callback) 监听 hash 值的变化,并传递给其嵌套的组件 然后通过 context 将location 数据往后代组件传递。 BrowserRouter 通过props 传进来的 path 与context 传进来的 pathname进行匹配然后决定是否执行渲染组件 原理改变 hash 值并不会导致浏览器向服务器发送请求浏览器不发出请求,也就不会刷新页面hash 值改变触发全局 window 对象上的hashchange事件hash模式路由就是利用 hashchange 事件监听 URL 的变化,从而进行 DOM 操作来模拟页面跳转。 28.在react中如何使用redux项目结构是如何划分 通过redux将整个应用状态存储到 store 中,组件可以派发 dispatch 行为action 给store其他组件通过订阅store中的状态state 来更新自身的视图 使用react-redux分成了两大核心: 1️⃣Provider 在redux 中存在一个store 用于存储 state ,将store 存放在顶层元素中其他组件都被包裹在顶层元素之上所有的组件都能够受到redux 的控制都能够获取到 redux 中的数据 Provider store {store}
App /
Provider2️⃣connection connect 方法将 store 上的 getState 和dispatch 包装成组件的 props导入conect 29.说说对redux中间件的理解常用的中间件有哪些实现原理 中间件是介于应用系统和系统软件之间的一类软件它使用系统软件所提供的基础功能衔接网络上应用系统的各个部分或不同的应用达到资源共享、功能共享的目的。如果需要支持异步操作或者支持错误处理、日志监控这个过程就可以用上中间件 常用的中间件 redux-thunk用于异步操作 redux-logger用于日志记录 原理所有中间件被放进了个数组然后嵌套执行最后执行 store.dispatch中间件内部 可以拿到getState和dispatch这两个方法 30.说说对immutable的理解如何应用在react项目中 Immutable不可改变的在计算机中即指一旦创建就不能再被更改的数据对Immutable对象的任何修改或添加删除操作都会返回一个新的Immutable对象Immutable 实现的原理是持久化数据结构用一种数据结构来保存数据当数据被修改时会返回一个对象,使用旧数据创建新数据时要保证旧数据同时可用且不变。 react中应用 使用 Immutable 可以给 React 应用带来性能的优化主要体现在减少渲染的次数。 31.说说react服务端渲染怎么做原理是什么 react实现SSR有两种形式 1️⃣手动搭建一个SSR 框架 2️⃣使用成熟的SSR 框架如 Next.JS 原理 node server 接收客户端请求,得到当前的请求 ur 路径,然后在已有的路由表内查找到对应的组件拿到需要请求的数据将数据作为 props、context或者store 形式传入组件然后基于 react 内置的服务端渲染方法 renderToString() 把组件渲染为 html 字符串在把最终的 html进行输出前需要将数据注入到浏览器端浏览器开始进行渲染和节点对比,然后执行完成组件内事件绑定和一些交互浏览器重用了服务端输出的 html节点整个流程结束
