Open pomelovico opened 6 years ago
[TOC]
参考：React 常用面试题目与分析: https://zhuanlan.zhihu.com/p/24856035#tipjar React 调用setState之后发生了什么 在代码中调用setState函数之后，React 会将传入的参数对象与组件当前的状态合并，然后触发所谓的调和过程（Reconciliation）。经过调和过程，React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个UI界面。在 React 得到元素树之后，React 会自动计算出新的树与老树的节点差异，然后根据差异对界面进行最小化重渲染。在差异计算算法中，React 能够相对精确地知道哪些位置发生了改变以及应该如何改变，这就保证了按需更新，而不是全部重新渲染。
参考：React 常用面试题目与分析: https://zhuanlan.zhihu.com/p/24856035#tipjar
在代码中调用setState函数之后，React 会将传入的参数对象与组件当前的状态合并，然后触发所谓的调和过程（Reconciliation）。经过调和过程，React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个UI界面。在 React 得到元素树之后，React 会自动计算出新的树与老树的节点差异，然后根据差异对界面进行最小化重渲染。在差异计算算法中，React 能够相对精确地知道哪些位置发生了改变以及应该如何改变，这就保证了按需更新，而不是全部重新渲染。
组件状态的人合并是通过组件实例上的_pengdingState来保存，setState执行时会开启update队列的事务，在这个事务开启的时候，可以多次调用setState以此来合并多次更新，在事务的close方法里才会真正的进行Reconciliation()
_pengdingState
Reconciliation()
Element
React.createElement()
Component
我们应当将AJAX 请求放到 componentDidMount 函数中执行，主要原因有下：React 下一代调和算法 Fiber 会通过开始或停止渲染的方式优化应用性能，其会影响到 componentWillMount 的触发次数。对于 componentWillMount这个生命周期函数的调用次数会变得不确定，React 可能会多次频繁调用 componentWillMount。如果我们将 AJAX 请求放到 componentWillMount 函数中，那么显而易见其会被触发多次，自然也就不是好的选择。如果我们将 AJAX请求放置在生命周期的其他函数中，我们并不能保证请求仅在组件挂载完毕后才会要求响应。如果我们的数据请求在组件挂载之前就完成，并且调用了setState函数将数据添加到组件状态中，对于未挂载的组件则会报错。而在 componentDidMount 函数中进行 AJAX 请求则能有效避免这个问题。
为了解决跨浏览器兼容性问题，React 会将浏览器原生事件（Browser Native Event）封装为合成事件（SyntheticEvent）传入设置的事件处理器中。这里的合成事件提供了与原生事件相同的接口，不过它们屏蔽了底层浏览器的细节差异，保证了行为的一致性。另外有意思的是，React 并没有直接将事件附着到子元素上，而是以单一事件监听器的方式将所有的事件发送到顶层进行处理。这样 React 在更新 DOM 的时候就不需要考虑如何去处理附着在 DOM 上的事件监听器，最终达到优化性能的目的。
store
router
app
renderer.renderToString()
__INITIAL_STATE__
is-Vue-SSR
避免实例化后的组件引用同一个data对象。
官方解释：
组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。
React组件自身具备state属性，在项目规模不大的时候，通过组件的state对象可以维护自身的数据状态，父子通信通过props，跨组件通信可以利用context和全局变量实现
配合React库使用的数据管理工具，从最早的Flux，到Redux，然后有MobX等。
Redux继承了Flux的单向数据流思想，但是将store精简为一个store，Redux的store通过一系列嵌套的函数reducers聚合而得到，每dispatch一次数据变动，所有的reducer函数都会收到更新数据，根据type来决定是否更新本次数据。
dispatch
Redux通过Provider组件包裹应用的根组件，将store注入到应用的context中，在应用内部的组件通过高阶组件Connect包裹来获得store和dispatch分发函数。
Provider
context
Connect
每次dispatch后，Provider组件会得到更新，进而更新props中传递的store，因此，应用中所有通过Connect组件包裹的组件都会得到更新。
Component组件周期包括：
https://segmentfault.com/a/1190000006792687
React-Router是用于前端页面控制路由跳转的，其核心基于npm上的history库开发，利用history库中对浏览器url变化的监听，添加了路由匹配映射等模块，在url变化时，渲染匹配得到的组件。从而完成了页面的控制。其有两种配置方式，通过JSX组件语法配置比较直观，也可以通过对象字面量的方式配置，在react-router内部最终会把配置转化为一个js的对象存储在闭包里。
[TOC]
组件状态的人合并是通过组件实例上的
_pengdingState来保存，setState执行时会开启update队列的事务，在这个事务开启的时候，可以多次调用setState以此来合并多次更新，在事务的close方法里才会真正的进行Reconciliation()React 中 Element 与 Component 的区别是？
Element是React对DOM元素的Object表示，每个Element最终都会成为一个对象，表示了一个DOM标签所具备的所有属性 由React.createElement()生成，JSX语法经过Babel编译后就会转换为React.createElement(),Element的type又分为普通的HTML标签类型和合成类型（Component），所以React.createElement()会在遇到类型为合成类型的参数type时，递归渲染这个合成类型的Element返回的内容。Component是可以返回某个Element的函数或者类（类形式拥有生命周期和状态），也是Element的一种type在生命周期中的哪一步你应该发起 AJAX 请求？
React 中的事件处理逻辑
Vue SSR理解
store和router以及app入口文件均需要改为函数形式，以保证每次创建的app是独立的，这是因为在node服务端，server跑起来之后，创建的变量是不会销毁的，也就意味着多次的请求共享了同一个app对象renderer.renderToString()方法会根据路由，找到匹配的组件，遍历组件上的异步请求方法并执行，返回Promise对象，Promise执行完成后，初始化组件，向浏览器输出html__INITIAL_STATE__保存的store，根据页面标签里的is-Vue-SSR来判断是否是服务端渲染，如果是的话，会比对当前页面元素和虚拟DOM里的元素是否对应，如果不一致会重新渲染（一定要保证数据一致，不然客户端重新更新DOM浪费了性能）Vue 组件 data为什么是函数？
避免实例化后的组件引用同一个data对象。
官方解释：
React相对于传统框架的优势是什么
React 怎么做数据管理？介绍下 Redux ？React Component 的生命周期？说下 React-Router ？
React组件自身具备state属性，在项目规模不大的时候，通过组件的state对象可以维护自身的数据状态，父子通信通过props，跨组件通信可以利用context和全局变量实现
配合React库使用的数据管理工具，从最早的Flux，到Redux，然后有MobX等。
Redux继承了Flux的单向数据流思想，但是将store精简为一个store，Redux的store通过一系列嵌套的函数reducers聚合而得到，每
dispatch一次数据变动，所有的reducer函数都会收到更新数据，根据type来决定是否更新本次数据。Redux通过
Provider组件包裹应用的根组件，将store注入到应用的context中，在应用内部的组件通过高阶组件Connect包裹来获得store和dispatch分发函数。每次dispatch后，Provider组件会得到更新，进而更新props中传递的store，因此，应用中所有通过
Connect组件包裹的组件都会得到更新。Component组件周期包括：
https://segmentfault.com/a/1190000006792687
React-Router是用于前端页面控制路由跳转的，其核心基于npm上的history库开发，利用history库中对浏览器url变化的监听，添加了路由匹配映射等模块，在url变化时，渲染匹配得到的组件。从而完成了页面的控制。其有两种配置方式，通过JSX组件语法配置比较直观，也可以通过对象字面量的方式配置，在react-router内部最终会把配置转化为一个js的对象存储在闭包里。