react相关问题

最新推荐文章于 2022-05-29 16:56:23 发布

qq_39186982

最新推荐文章于 2022-05-29 16:56:23 发布

阅读量75

点赞数

文章标签： react

本文链接：https://blog.csdn.net/qq_39186982/article/details/115511312

版权

1.react15版本与16版本有什么区别

生命周期的改变
组件创建方式的改变
React.createClass()
class Component extends Component{
}
无状态函数
渲染方式的改变

2.组件的分类

函数组件无状态组件 UI组件木偶组件
类组件有状态组件智能组件容器组件
受控组件
非受控组件
高阶组件

3.react数据承载类型

props 来自于组件外部在组件内部只能使用不能修改
state 属于组件内部可以进行修改

4.单向数据流

数据只能从外向里，而不能从内部流向外部

5.如何修改state值

setState

6.如何理解setState这个api setState有什么特点

react数据更新页面不会渲染，需要通过setState触发render再次执行
setState是一个异步函数
setState 参数1 更改的数据参数2 修改成功的回调
setState 在使用的时候会进行合并操作，连续执行setState 只会执行一次render
在异步中执行setState 都会执行render

7.如何绑定数据

{}
不能放对象
条件渲染列表渲染属性绑定事件绑定

8.Fragment

react提供的组件，作为容器使用，不会渲染在页面

9.如何实现组件通信

父子通信 props(属性) ref
子父通信 props(方法)
兄弟通信状态提升 context上下文全局状态管理

10.什么叫状态提升

将state放到公有父元素上面，结合父子与子父实现通信

11.context上下文？怎么用？解决了什么问题

context提供了一个无需为每层组件手动添加props，就能在组件树间进行数据传递的方法

跨组件通信
创建上下文对象
通过上下文对象在父组件注册一个数据
在子组件（任何一个子组件）里将上下文对象挂载到该组件静态属性contextType上就可以使用父组件提供的数据
API
React.createContext
Context.Provider
Class.contextType
Context.Consumer
Context.displayName

12.如何实现在嵌套的子组件里修改上下文

Context.Consumer
用Consumer组件包裹要渲染的组件
Consumer组件里渲染的是一个函数
函数的参数是父组件提供的数据
在函数里返回要渲染的jsx

13.react生命周期

初始化
getInitialState 已废弃
getDefaultProps 已废弃

constructor

挂载
componentWillMount
componentDidMouunt

更新
componentWillUpdate
componentDidUpdate
销毁
componentWillUnmount
数据改变
componentWillReceiveProps
shouldComponentUpdate

14.react有哪些生命周期，都用来做什么

constructor 初始化数据
componentDidMouunt 网络请求
componentWillUnmount 消除全局监听计时器
shouldComponentUpdate 控制render函数是否执行

15.fiber相关

react副作用放在哪个生命周期

componentDidMouunt

副作用为什么不放在componentWillMount里

生命周期有哪些变化

react15版本和16版本渲染机制有什么差异

同步渲染和异步渲染

react fiber

react新增哪些生命周期

15版本之前的渲染方式是同步渲染，导致页面卡顿
16版本之后渲染核心引入fiber，异步渲染
fiber将一个时间超长的任务分段解决页面卡顿问题
fiber组件的渲染分成两个阶段
第一阶段：可以被其他优先级高的任务打断 render之前都可以被打断打断之后就会重新执行
componentWillMount 17版本废弃
componentWillReceiveProps 17版本废弃
componentWillUpdate 17版本废弃
新增 getDerivedStateFromProps 数据变化时触发
新增 getSnapshopBeforeUpdate 更新前触发
shouldComponentUpdate
第二阶段：不会被打断 render之后的生命后期都属于第二阶段

getDerivedStateFromProps
1.不能跟已经废弃的生命周期一起使用
2.这是个静态函数
3.必须要return一个值
4.在初始化之后，渲染之前执行一次，类似于componentWillMount

16. React生命周期函数

初始化阶段
- getDefaultProps：获取实例的默认属性
- getInitialState:获取每个实例的初始化状态
- componentWillMount:组件即将被装载、渲染到页面上
- render:组件生成虚拟的DOM节点
- componentDidMount:组件真正在被装载之后
运行中状态
- componentWillReceiveProps:组件将要接收到属性的时候调用
- shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回false，接收数据后不更新，组织render调用，后面的函数不会被继续执行了）
- componentWillUpdate:组件即将更新，不能修改属性和状态
- render：组件重新描绘
- componentDidUpdate:组件已经更新
销毁阶段
- componentWillUnmount:组件即将销毁

17.shouldComponentUpdate是做什么（React的性能优化是哪个周期函数）

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

18.React中的keys的作用是什么

keys是React用于追踪哪些列表中的元素被修改、被添加或者被移除的辅助标识

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

19.调用setState之后发生了什么

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

20.为什么虚拟DOM会提高性能

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

21.react diff原理

把树形结构按照层级分解，只比较同级元素
给列表结构的每个单元添加唯一的key属性，方便比较
React只会匹配相同class的component（这里面的class指的是组件的名字）
合并操作，调用component的setState方法的时候，React将其标记为dirty。到每一个事件循环结束，React检查所有标记dirty的component重新绘制
选择性子树渲染。开发人员可以重写shouldComponentUpdate提高diff的性能

22.React中refs的作用是什么

Refs是React提供给我们的安全访问FOM元素或者某个组件实例的句柄，我们可以为元素添加ref属性然后在回调函数中接受该元素在DOM树中的句柄，该值会作为回调函数的第一个参数返回

23.展示组件和容器组件的区别

展示组件关心组件看起来是什么。展示专门通过props接受数据和回调，并且几乎不会有自身的状态。但当展示组件拥有自身的状态时，通常也只关心UI状态而不是数据的状态
容器组件则更关心组件是如何运作的。容器组件会为展示组件或者其他容器组件提供数据和行为，它们会调用FLux actions，并将其作为回调提供给展示组件。容器组件经常是有状态的，因为它们是（其他组件的）数据源

24.类组件和函数式组件之间有何不同

类组件不仅允许你使用更多额外的功能，如组件自身的状态和生命周期钩子，也能使组件直接访问store并维持状态
当组件仅是接收props，并将组件自身渲染到页面时，该组件就是一个‘无状态函数’，可以使用一个纯函数来创建这样的组件。这种组件也被称为哑组件或展示组件

25.组件的状态state和属性props之间有何不同

state是一种数据结构，用于组件挂载时所需数据的默认值。state可能会随着时间的推移而发生突变，但多数时候是作为用户事件行为的结果
props则是组件的配置。props由父组件传递给子组件，并且就子组件而言，props是不可变的，组件不能改变自身的props，但是可以把其子组件的props放在一起（统一管理）。Props也不仅仅是数据—回调函数也能通过props传递

26.(在构造函数中)调用 super(props) 的目的是什么

在 super() 被调用之前，子类是不能使用 this 的，在 ES2015 中，子类必须在constructor 中调用 super()。传递 props 给 super() 的原因则是便于(在子类中)能在constructor 访问 this.props。

27.应该在 React 组件的何处发起 Ajax 请求

在 React 组件中，应该在 componentDidMount 中发起网络请求。

28.react 组件的划分业务组件技术组件？

根据组件的职责通常把组件分为 UI 组件和容器组件。
UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。
两者通过 React-Redux 提供 connect 方法联系起来。

29.简述 flux 思想

Flux 的最大特点，就是数据的"单向流动"。
1. 用户访问 View
2. View 发出用户的 Action
3. Dispatcher 收到 Action，要求 Store 进行相应的更新
4. Store 更新后，发出一个"change"事件
5. View 收到"change"事件后，更新页面

30.redux

redux 是一个应用数据流框架，主要是解决了组件间状态共享的问题，原理是集中式管理，主要有三个核心方法，action，store，reducer，工作流程是view 调用 store 的 dispatch 接收 action 传入 store，reducer 进行 state 操作，view 通过 store 提供的 getState 获取最新的数据，flux 也是用来进行数据操作的，有四个组成部分 action，dispatch，view，store，工作流程是view 发出一个 action，派发器接收 action，让 store 进行数据更新，更新完成以后 store 发出 change，view 接受 change 更新视图。Redux 和 Flux 很像。主要区别在于 Flux 有多个可以改变应用状态的 store，在 Flux 中dispatcher 被用来传递数据到注册的回调事件，但是在 redux 中只能定义一个可更新状态的 store，redux 把 store 和 Dispatcher 合并,结构更加简单清晰
新增 state,对状态的管理更加明确，通过 redux，流程更加规范了，减少手动编码量，提高了编码效率，同时缺点时当数据更新时有时候组件不需要，但是也要重新绘制，有些影响效率。一般情况下，我们在构建多交互，多数据流的复杂项目应用时才会使用它们