React简单聊聊【面试】

简单聊聊React

1 React 中 keys 的作⽤是什么？

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

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

2 传⼊ setState 函数的第⼆个参数的作⽤是什么？

该函数会在 setState 函数调⽤完成并且组件开始重渲染的时候被调⽤，我们 可以⽤该函数来监听渲染是否完成：

this.setState(
{ username: 'tylermcginnis33' },
() => console.log('setState has finished and the component has re-rendere
)
this.setState((prevState, props) => {return {streak: prevState.streak + props.count
} })

3 React 中 refs 的作⽤是什么？

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

4 在⽣命周期中的哪⼀步你应该发起 AJAX 请求。

我们应当将AJAX 请求放到 componentDidMount 函数中执⾏，
主要原因有下。

React 下⼀代调和算法 Fiber 会通过开始或停⽌渲染的⽅式优化应⽤性能，其会影响到 componentWillMount 的触发次数。对于 componentWillMount 这个⽣命周期函数的调⽤次数会变得不确定， React 可能会多次频繁调⽤ componentWillMount 。如果我们将 AJAX 请求放到 componentWillMount 函数中，那么显⽽易⻅其会被触发多次，⾃然也就不是好的选择。如果我们将 AJAX 请求放置在⽣命周期的其他函数中，我们并不能保证请求仅在组件挂载完毕后才会要求响应。如果我们的数据请求在组件挂载之前就完成，并且调⽤了setState 函数将数据添加到组件状态中，对于未挂载的组件则会报错。⽽在componentDidMount 函数中进⾏ AJAX 请求则能有效避免这个问题。

5 shouldComponentUpdate 的作⽤

shouldComponentUpdate 允许我们⼿动地判断是否要进⾏组件更新，根据组件的应⽤场景设置函数的合理返回值能够帮我们避免不必要的更新。

6 如何告诉 React 它应该编译⽣产环境版

通常情况下我们会使⽤ Webpack 的 DefinePlugin ⽅法来将 NODE_ENV
变量值设置为 production 。编译版本中 React 会忽略propType 验证以及其他的告警信息，同时还会降低代码库的⼤⼩， React 使⽤了 Uglify插件来移除⽣产环境下不必要的注释等信息。

7 概述下 React 中的事件处理逻辑

为了解决跨浏览器兼容性问题， React 会将浏览器原⽣事件（ BrowserNative Event ）封装为合成事件（ SyntheticEvent ）传⼊设置的事件处理器中。这⾥的合成事件提供了与原⽣事件相同的接⼝，不过它们屏蔽了底层浏览器的细节差异，保证了⾏为的⼀致性。另外有意思的是， React 并没有直接将事件附着到⼦元素上，⽽是以单⼀事件监听器的⽅式将所有的事件发送到顶层进⾏处理。这样 React 在更新 DOM 的时候就不需要考虑如何去处理附着在 DOM 上的事件监听器，最终达到优化性能的⽬的。

8 createElement 与 cloneElement 的区别是什么？

createElement 函数是 JSX 编译之后使⽤的创建 React Element 的函数，⽽ cloneElement 则是⽤于复制某个元素并传⼊新的 Props。

9 redux中间件

中间件提供第三⽅插件的模式，⾃定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer 。这种机制可以让我们改变数据流，实现如异步 action ， action 过滤，⽇志输出，异常报告等功能。
redux-logger ：提供⽇志输出
redux-thunk ：处理异步操作
redux-promise ：处理异步操作， actionCreator 的返回值是 promise

10 redux有什么缺点

⼀个组件所需要的数据，必须由⽗组件传过来，⽽不能像 flux 中直接从 store 取。当⼀个组件相关数据更新时，即使⽗组件不需要⽤到这个组件，⽗组件还是会重新
render ，可能会有效率影响，或者需要写复杂的 shouldComponentUpdate 进⾏判断。

11 react组件的划分业务组件技术组件？

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

12 react⽣命周期函数（大多数面试官会问）

挂载更新、渲染卸载（一句话就是这个，具体的看下文）

初始化阶段

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

13 react性能优化是哪个周期函数？

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

14 为什么虚拟dom会提⾼性能？

虚拟 dom 相当于在 js 和真实 dom 中间加了⼀个缓存，利⽤ dom diff 算法避免了没有必要的 dom 操作，从⽽提⾼性能。（一句话：虚拟dom比真实dom节省资源。）
具体实现步骤如下
⽤ JavaScript 对象结构表示 DOM 树的结构；然后⽤这个树构建⼀个真正的 DOM 树，插到⽂档当中。
当状态变更的时候，重新构造⼀棵新的对象树。然后⽤新的树和旧的树进⾏⽐较，记录两棵树差异。
把2所记录的差异应⽤到步骤1所构建的真正的 DOM 树上，视图就更新。

15 diff算法?

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

16 react性能优化⽅案

重写 shouldComponentUpdate 来避免不必要的dom操作。
使⽤ production 版本的 react.js
使⽤ key 来帮助 React 识别列表中所有⼦组件的最⼩变化。

17简述flux 思想

Flux 的最⼤特点，就是数据的"单向流动"。
⽤户访问 View
View 发出⽤户的 Action
Dispatcher 收到 Action ，要求 Store 进⾏相应的更新。
Store 更新后，发出⼀个 “change” 事件。
View 收到 “change” 事件后，更新⻚⾯。

18 说说你⽤react有什么坑点？

1. JSX做表达式判断时候，需要强转为boolean类型

如果不使⽤ !!b 进⾏强转数据类型，会在⻚⾯⾥⾯输出 0 。

render() {const b = 0;
return <div>
{!!b && <div>这是⼀段⽂本</div>
}
</div> }

2. 尽量不要在 componentWillReviceProps ⾥使⽤ setState，如果⼀定要使⽤，那么需要判断结束条件，不然会出现⽆限重渲染，导致⻚⾯崩溃。
3. 给组件添加ref时候，尽量不要使⽤匿名函数，因为当组件更新的时候，匿名函数会被当做新的prop处理，让ref属性接受到新函数的时候，react内部会先清空ref，也就是会以null为回调参数先执⾏⼀次ref这个props，然后在以该组件的实例执⾏⼀次ref，所以⽤匿名函数做ref 的时候，有的时候去ref赋值后的属性会取到null
4. 遍历⼦节点的时候，不要⽤ index 作为组件的 key 进⾏传⼊。

19 我现在有⼀个button，要⽤react在上⾯绑定点击事件，要怎么做？

class Demo {render() {return <button onClick={(e) => {alert('我点击了按钮')
}}>
按钮
</button>
} }

面试官可能会问：你觉得你这样设置点击事件会有什么问题吗？
由于 onClick 使⽤的是匿名函数，所有每次重渲染的时候，会把该onClick 当做⼀个新的 prop 来处理，会将内部缓存的 onClick 事件进⾏重新赋值，所以相对直接使⽤函数来说，可能有⼀点的性能下降。
修改

class Demo {onClick = (e) => {alert('我点击了按钮')
}
render() {return <button onClick={this.onClick}>
按钮
</button>
}

20 react 的虚拟dom是怎么实现的？

⾸先说说为什么要使⽤ Virturl DOM ，因为操作真实 DOM 的耗费的性能代价太⾼，所以 react 内部使⽤ js 实现了⼀套dom结构，在每次操作在和真实 dom之前，使⽤实现好的diff算法，对虚拟dom进⾏⽐较，递归找出有变化的 dom节点，然后对其进⾏更新操作。为了实现虚拟 DOM ，我们需要把每⼀种节点类型抽象成对象，每⼀种节点类型有⾃⼰的属性，也就是prop，每次进⾏ diff 的时候， react 会先⽐较该节点类型，假如节点类型不⼀样，那么react 会直接删除该节点，然后直接创建新的节点插⼊到其中，假如节点类型⼀样，那么会⽐较 prop 是否有更新，假如有 prop 不⼀样，那么 react会判定该节点有更新，那么重渲染该节点，然后在对其⼦节点进⾏⽐较，⼀层⼀层往下，直到没有⼦节点。
**

21 react 的渲染过程中，兄弟节点之间是怎么处理的？也就是key值不⼀样的时候

通常我们输出节点的时候都是map⼀个数组然后返回⼀个 ReactNode ，为了⽅便 react 内部进⾏优化，我们必须给每⼀个 reactNode 添加 key ，这 个 key prop 在设计值处不是给开发者⽤的，⽽是给react⽤的，⼤概的作⽤ 就是给每⼀个 reactNode 添加⼀个身份标识，⽅便react进⾏识别，在重渲染 过程中，如果key⼀样，若组件属性有所变化，则 react 只更新组件对应的属 性；没有变化则不更新，如果key不⼀样，则react先销毁该组件，然后重新创 建该组件。

每天一句中文式外语

巴西葡萄牙语

你好，你说英语吗？
哦一，发蜡，英国来续？（联想记忆：发蜡是英国来的，再续一点发蜡）
我不是很懂
闹，贡布里安肚，摸一肚（联想记忆：闹呢？贡布里安的肚子很好，你就摸你的小肚子了）
早上好！
波翁 跌
下午好！
波阿 大
晚上好！
波阿 闹一得

ATT：（巴西语跟葡语类似于英式英语与美式英语一样，他们都能听得懂）