React面试题集合 | 小菜笔记

生命周期

Initialization ：组件准备设置初始化状态和默认属性；
Mounting ：组件准备好挂载到浏览器 DOM 树，这个阶段调用两个生命周期方法：
- 挂载前调用 componentWillMount ；
- 挂载后调用 componentDidMount ；
Updating ：更新组件，由 props 或 state 的更改触发：
- 更新前调用 shouldComponentUpdate 判断是否需要更新；
- 确定需要更新后，在更新前调用 componentWillUpdate ；
- 在更新后调用 componentDidUpdate ；
Unmounting ：组件已经不再需要了，它从浏览器 DOM 树卸载下来：
- 卸载前调用 componentWillUnmount 方法；

componentWillMount ：在组件准备挂载到 DOM 树之前执行，用于根组件中 APP 级配置；
componentDidMount ：在组件挂载后执行，通常在这个阶段做：
- 网络数据请求；
- DOM操作；
- 状态更新；
- 设置事件监听器；
componentWillReceiveProps ：
shouldComponentUpdate ：确定是否更新组件；
- 默认情况下，它返回 true ，表示需要重新渲染组件；
- 如果确定 props 和 state 更新后无须重新渲染，可以返回 false ，避免渲染，提升性能；
componentWillUpdate ：在组件准备更新前执行（ shouldComponentUpdate 返回 true 才会更新）；
componentDidUpdate ：在组件完成更新后执行；
componentWillUnmount ：在组件卸载前执行，用于执行一些清理工作：
- 删除事件监听；

父子组件通信（父传子）：父组件通过 props 向子组件传数据；
父子组件通信（子传父）：props + 回调函数，父组件将自身函数作通过 props 传给子组件，子组件调用该函数，将要传递的数据作为调用参数，传递给父组件；
兄弟组件通信：找到兄弟组件的共同父节点，结合以上两种方式进行通信（父组件负责管理和转发数据）；
跨层级通信：组件嵌套层数较深，采用常规通信方式比较麻烦，可以使用 Context 来解决。举个例子，页面主题、首选语言、当前用户等全局数据，页面中的很多组件都可能用到，通过 Context 来传递就再合适不过了；
发布订阅模式：引入 event 模块进行通信，发布者发布事件，订阅者监听事件并做出反应；
- 在 componentDidmounted 中订阅事件；
- 在 componentwillUnmount 解除订阅；
全局状态管理工具：借助 Redux 或者 Mobx 等全局状态管理工具进行通信，这种工具会维护一个全局状态中心 Store ，并根据不同的事件产生新的状态；

Redux 是一种为了实现 react 组件间通信，和组件状态共享的解决方案，主要包括三个部分：

Redux 提供了一个叫 store 的统一仓储库，它是只读状态，只做数据存储，数据修改更新的角色由 reducer 负责。

用户通过 dispatch 方法，发出 action ，action 提供数据修改信息。

store 自动调用 reducer ，通过参数传入当前状态 state 和收到的 action 。reducer 据此进行计算，并返回新的 state 。state —旦有变化，store 就会调用监听函数来更新视图。

【小菜笔记】系列文章首发于公众号【小菜学编程】，敬请关注：