react+redux

一、环境介绍

1.安装create-react-app脚手架

npm install -g create-react-app

2.在pacgage.json配置文件，install 依赖库文件

3.npm start 启动服务，就可以localhost:3000 本地展示页面

二、为什么使用react+redux

1.react使项目像搭积木简单，但是一个页面嵌套很多组件，子组件必须要通过父组件传递参数才能渲染数据，数据都是由最顶层父组件，一层层向下传递的。所以数据传递是单向的，子数据只能就近获取。

2.redux出现改变react的这种窘迫处境，它提供了整个应用的唯一数据源store，这个数据源是随处可以访问的，不需要靠父子相传，并且还提供了更新这个数据源的方法，并且是随处可使用的。

3.redux实现流程：用户页面行为触发一个action，然后store自动调用reducer，并且传入二个参数：当前state和收到的action。reducer会返回新的state。每当state更新后，view会根据state触发重新渲染。

3.react-redux实现原理：redux作为一个通用模块，主要是用来处理state的变更。react-redux主要通过二个核心方法实现：

   3.1 Provider：从最外部封装了整个应用，并向connect模块传递store

   3.2 Connect：1.包装原组件，将state和action通过props的方式传入到原组件内部

                            2. 监听store tree变化，使其包装的原组件可以响应state变化

三、react常见面试题

1.react生命周期

componentWillMount：组件即将被装载、渲染到页面上，只调用一次

componentDidMount：组件真正被装载后，这个可以拿到真实的DOM执行操作，只调用一次。能流图，初始化容器，this.box=new twaver.ElementBox();

shouldCompoentUpdate(nextprops,nextstate)：组件更新前调用(组件接受新的props或state)，函数会返回一个布尔值，true才会更新组件。

   注意：最好判断一下新旧二个props/state是否相同，相同则返回false不要触发更新。这样就不用生成新的dom树和旧的进行diff算法对比，从而优化性能

componentWillUpdate：组件更新前调用

render():组件渲染

componentDidUpdate：组件更新完成后调用，组件初始化不调用。能流图就是在这个获取{isShow}=this.props的，判断是否走V2，或者V3

componetWillUnmount：组件卸载时调用，清除不需要的监听和计时器。能流图，清理容器内容，this.box.clear()；