前端框架-react2

3.11 列出一些应该使用 Refs 的情况

参考答案：

以下是应该使用 refs 的情况：

• 需要管理焦点、选择文本或媒体播放时
• 触发式动画
• 与第三方 DOM 库集成

3.12 React 事件绑定原理

参考答案：

React并不是将click事件绑在该div的真实DOM上，而是在document处监听所有支持的事件，当事件发生并冒泡至document处时，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅减少了内存消耗，还能在组件挂载销毁时统一订阅和移除事件。
另外冒泡到 document 上的事件也不是原生浏览器事件，而是 React 自己实现的合成事件（SyntheticEvent）。因此我们如果不想要事件冒泡的话，调用 event.stopPropagation 是无效的，而应该调用event.preventDefault。

3.15 redux-saga 和 mobx 的比较

参考答案：

1. 状态管理

• redux-sage 是 redux 的一个异步处理的中间件。
• mobx 是数据管理库，和 redux 一样。

2. 设计思想

• redux-sage 属于 flux 体系， 函数式编程思想。
• mobx 不属于 flux 体系，面向对象编程和响应式编程。

3. 主要特点

• redux-sage 因为是中间件，更关注异步处理的，通过 Generator 函数来将异步变为同步，使代码可读性高，结构清晰。action 也不是 action creator 而是 pure action，
• 在 Generator 函数中通过 call 或者 put 方法直接声明式调用，并自带一些方法，如 takeEvery，takeLast，race等，控制多个异步操作，让多个异步更简单。
• mobx 是更简单更方便更灵活的处理数据。 Store 是包含了 state 和 action。state 包装成一个可被观察的对象， action 可以直接修改 state，之后通过 Computed values 将依赖 state 的计算属性更新 ，之后触发 Reactions 响应依赖 state 的变更，输出相应的副作用 ，但不生成新的 state。

4. 数据可变性

• redux-sage 强调 state 不可变，不能直接操作 state，通过 action 和 reducer 在原来的 state 的基础上返回一个新的 state 达到改变 state 的目的。
• mobx 直接在方法中更改 state，同时所有使用的 state 都发生变化，不生成新的 state。

5. 写法难易度

• redux-sage 比 redux 在 action 和 reducer 上要简单一些。需要用 dispatch 触发 state 的改变，需要 mapStateToProps 订阅 state。
• mobx 在非严格模式下不用 action 和 reducer，在严格模式下需要在 action 中修改 state，并且自动触发相关依赖的更新。

6. 使用场景

• redux-sage 很好的解决了 redux 关于异步处理时的复杂度和代码冗余的问题，数据流向比较好追踪。但是 redux 的学习成本比 较高，代码比较冗余，不是特别需要状态管理，最好用别
  的方式代替。
• mobx 学习成本低，能快速上手，代码比较简洁。但是可能因为代码编写的原因和数据更新时相对黑盒，导致数据流向不利于追踪。

3.16 简述一下 React 的源码实现

参考答案：

1. React 的实现主要分为 Component 和 Element；
2. Component 属于 React 实例，在创建实例的过程中会在实例中注册 state 和 props 属性，还会依次调用内置的生命周期函数；
3. Component 中有一个 render 函数，render 函数要求返回一个 Element对象（或 null）；