react面试总结

react

react发展－－－facebook在构建instagram网站的时候遇见两个问题
数据绑定的时候，大量操作真实dom，性能成本太高
网站的数据流向太混乱，不好控制

React 把用户界面抽象成一个个组件。开发者通过组合这些组件，最终得到功能丰富、可交互的页面。通过引入 JSX 语法，复用组件变得非常容易，同时也能保证组件结构清晰。

生命周期

react diff算法

tree diff 只对树进行同层对比，不去比较跨层的节点。
给列表结构的每个单元添加的唯一 key值进行区分同层次的子节点的比较
component diff 比较组件类型，相同的话比较element
element diff 对于同一层级的一组子节点，它们可以通过唯一 id 进行区分

hook

react新增的特性，可以在不编写class类组件的情况下使用state以及其他的react特性。有两个属性usestate和useEffect。
usestate代替了constructor中的this.state。
useEffect看做componentDidMount，componentDidUpdate和componentWillUnmount这三个函数的组合

函数组件和类组件

react的this.setState是同步异步，调用 setState 之后发生了什么

setState 只在合成事件和钩子函数中是“异步”的，在原生事件和 setTimeout 中都是同步的。

合成事件：就是react 在组件中的onClick等都是属于它自定义的合成事件
原生事件：比如通过addeventListener添加的，dom中的原生事件

调用 setState 之后：

1.this.setState(newState) =>
2.newState存入pending队列 =>
3.调用enqueueUpdate =>
4.是否处于批量更新模式 => 是的话将组件保存到dirtyComponents
5.不是的话遍历dirtyComponents，调用updateComponent,更新pending state or props

redux的运行机制，redux帮助前端解决什么

首先组件会触发一个action给store，然后传state和action给reducer，我们要是想改state的值，只能通过reducer，到一个新的setstate，返回给store，去重新进行渲染
它的作用就是，把我需要用的数据存放到一个地方，然后我哪个组件要用我就直接去store里面拿，这样就很方便
组件间通信
通过对象驱动组件进入生命周期
方便进行数据管理

什么是受控组件和非受控组件

什么是展示组件和容器组件

真实dom和虚拟dom的区别

虚拟dom的实现原理，为什么虚拟dom会提高性能

当底层数据发生改变时，整个 UI 都将在 Virtual DOM 描述中重新渲染。
然后计算之前 DOM 表示与新表示的之间的差异。
完成计算后，将只用实际更改的内容更新 real DOM

虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法减少了对真实DOM的操作次数，从而提高性能。

区分状态和 props

如何更新组件的状态

用 this.setState()更新组件的状态

React 的 refs

对 render() 返回的特定元素或组件的引用。当需要进行 DOM 引用或向组件添加方法时，它们会派上用场

高阶组件（HOC）

高阶组件是重用组件逻辑的高级方法，是一种源于 React 的组件模式。 HOC 是自定义组件，在它之内包含另一个组件。它们可以接受子组件提供的任何动态，但不会修改或复制其输入组件中的任何行为。你可以认为 HOC 是“纯（Pure）”组件。

hoc做了什么
*   代码重用，逻辑和引导抽象
*   渲染劫持
*   状态抽象和控制
*   Props 控制

纯组件

纯组件就是有生命周期的但是只是接受props来作为纯展示组件不做逻辑判断处理的组件（一般常见list组件）
纯组件是通过控制shouldComponentUpdate生命周期函数，减少render调用次数来减少性能损耗的。这相对于Component来说，减少了手动判断state变化的繁琐操作。

Redux遵循的三个原则

单一事实来源：整个应用的状态存储在单个 store 中的对象/状态树里。单一状态树可以更容易地跟踪随时间的变化，并调试或检查应用程序。
状态是只读的：改变状态的唯一方法是去触发一个动作。动作是描述变化的普通 JS 对象。就像 state 是数据的最小表示一样，该操作是对数据更改的最小表示。
使用纯函数进行更改：为了指定状态树如何通过操作进行转换，你需要纯函数。纯函数是那些返回值仅取决于其参数值的函数。

解释 Reducer 的作用

Reducers 是纯函数，Reducers 通过接受先前的状态和 action 来工作，然后它返回一个新的状态。它根据操作的类型确定需要执行哪种更新，然后返回新的值。如果不需要完成任务，它会返回原来的状态。

Store 在 Redux 中的意义是什么

Store 是一个 JavaScript 对象，它可以保存数据的状态，并提供一些方法来访问状态。可以将中间件传递到 store 来处理数据，并记录改变存储状态的各种操作。所有操作都通过 reducer 返回一个新状态。