React解决了什么问题
MVC架构的双向绑定以及一对多的关系容易造成连级/联动(Cascading)修改,对于代码的调试和维护都成问题。Problem
如何设计一个好的Component
高内聚,低耦合
React组件设计推崇的是“组合”,而非“继承”。例如你的页面需要一个表单组件,表单中需要有输入框,按钮,列表,单选框等。那么在开发中你不应该只开发一(整)个表单组件(
什么时候render调用,什么时候修改DOM
毫无疑问Render是在组件 state 发生改变时候被调用。无论是通过 setState 函数改变组件自身的state值,还是继承的 props 属性发生改变都会造成render函数被调用,即使改变的前后值都是一样的。shouldComponentUpdate默认都返回true,可以重写进行优化。
React组件中存在两类DOM,一类是众所周知的Virtual DOM,相信大家也耳熟能详了;另一类就是浏览器中的真实DOM(Real DOM/Native DOM)。React的Render函数被调用之后,React立即根据props或者state重新创建了一颗Virtual DOM Tree,虽然每一次调用时都重新创建,但因为在内存中创建DOM树其实是非常快且不影响性能的,所以这一步的开销并不大。而Virtual DOM的更新并不意味这Real DOM的更新,接下来的事情也是大家知道的,React采用算法将Virtual DOM和Real DOM进行对比,找出需要更新的最小步骤,此时Real DOM才可能发生修改。每一次的state更改都会使得render函数被调用,但页面的DOM不一定会发生修改
生命周期
Mounting, Updating, Unmounting.
Mounting:
constructor,componentWillMount(在mount前调用可操作state),render(只能渲染DOM),componentDidMount(如果你有第三方操作DOM的类库需要初始化(类似于jQuery,Bootstrap的一些组件)操作DOM、或者请求异步数据,都应该放在这个步骤中做)
Updating:
componentWillReceiveProps,在这里你可以拿到即将改变的状态,可以在这一步中通过setState方法设置state;shouldComponentUpdate,componentWillUpdate(不能改变state);render();componentDidUpdate,更新DOM执行请求.
componentWillReceiveProps()提供了该流程中更新state的最后时机,后续的其他函数都不能再更新组件的state了。我们尤其需要注意的是shouldComponentUpdate函数,它的结果直接影响该组件是不是需要进行虚拟DOM比较,我们对组件渲染性能优化的基本思路就是:在非必要的时候将shouldComponentUpdate返回值设置为false,从而终止更新DOM流程中的后续步骤。
Unmounting
componentWillUnmount
有哪些生命周期是允许设置state的?
React 提供了性能分析插件React.addons.Perf,它让我们可以在需要检测的代码起始位置分别添加Perf.start()和Perf.stop(),并可以通过Perf.printInclusive()方法打印花费时间,然后我们可以结合数据做进一步的分析。
虽然React提供了Virtual DOM DOM Diff 等优秀的能力来提高渲染性能,但是在实际使用过程中,我们经常会遇到父组件更新,不需要更新所有子组件的场景(分页),此时必须考虑利用React本周的渲染机制来进行优化。
React更新state时做了什么
React会做的第一件事就是把你传递给setState的参数对象合并到组件原先的state。这个事件会导致一个“reconciliation”(调和)的过程。reconciliation的最终目标就是,尽可能以最高效的方法,去基于新的state来更新UI。为了达到这个目的,React会构建一个React元素树(你可以把这个想象成一个表示UI的一个对象)。一旦这个树构建完毕,React为了根据新的state去决定UI要怎么进行改变,它会找出这棵新树和旧树的不同之处。React能够相对精确地找出哪些位置发生了改变以及如何发生了什么变化,并且知道如何只通过必要的更新来最小化重渲染。
Redux相关问题
React的批量更新机制 BatchUpdates?
Redux是如何将state注入到React组件上的?mapStateToProps,connect
请描述一次完整的 Redux 数据流
Redux是如何做到可预测呢?pure function,map State to action
Redux将React组件划分为哪两种?container,common UI component
Webpack相关
Webpack如何打包输出多个文件?
webpack打包时如何工作的?
如何解决循环引用的问题
在什么情况下需要打包输出多个文件?
loader和plugin的差别:loader 用于加载某些资源文件;plugin 用于扩展webpack的功能。它直接作用于 webpack,扩展了它的功能。
你觉得使用过什么高级技巧吗?
React-redux链接问题
connect(null,actions):将普通component注入reducer && state使其变为container。bindActionCreators一般不在行为定义的时候进行行为绑定。bindActionCreators(action,dispatch);//action payload返回的时候promise解析成dispatch(res=>dispatch({type:FETCH_USER,payload:res.data}));
According to oficial guide:
You might ask: why don’t we bind the action creators to the store instance right away, like in classical Flux? The problem is that this won’t work well with universal apps that need to render on the server. Most likely you want to have a separate store instance per request so you can prepare them with different data, but binding action creators during their definition means you’re stuck with a single store instance for all requests.