关于react的一些总结
之前为了学习redux买了一本《深入浅出react和redux》,只看了redux部分。最近重新一遍,还是很有收获,这里结合阅读文档时的一些理解,记下一些初学者可能不太注意的东西。
原则:
1.react原本的目标是为设计视图组件,UI=render(data);一个react组件有两个数据源可以驱动渲染,一个是记录内部状态变化的state,一个是外部传入的props。由于props中的变量可能在外部的某个地方被引用,因而props中的数据是绝对不能修改的。
生命周期:
2.react组件的生命周期有三个过程:Mount、Update、Unmount,每个过程都会触发钩子函数:
Mount----
constructor:创建一个组件类的实例,一般用来设置state和绑定成员函数的this;无状态的组件不需要constructor
getInitialState:调用React.createClass时才调用,调用React.createClass已被官方弃用。
getDefaultProps:调用React.createClass时才调用,调用React.createClass已被官方弃用。
componentWillMount:渲染前触发(一般不需要)
render:渲染组件
componentDidMount:渲染完成后触发,比如在这里执行ajax;只能在浏览器中调用
Update----
componentWillReceiveProps:组件传入的props改变或父组件重新渲染时触发
shouldComponentUpdate(nextProps,nextState):返回布尔值决定该次更新是否继续
子该函数中,this.state是setState之前的值。通过this.state,next.state,this.props,next.props对比,决定是否渲染,可以提高组件性能
componentWillUpdate:
render:
componentDidUpdate:可在服务器端或客户端调用。
Unupdate-----
componentWillUnmount:唯一一个卸载过程触发的函数,作者提醒,在mount时通过非react方式创建的dom容易造成内存泄漏,需要在这里手动清除。
数据流:
react中的数据流是自上而下的,父组件可以将props、state、自定义的一些js对象、方法、字符串传给子组件,作为子组件的props,逐级下传。
当几个组件需要共享某个状态变量的时候,react文档提到一个概念“lifting state up”:意思是将这个共享的状态变量放到最近的一个共同父组件中,由这个父组件以props的方式传给子组件。
状态管理:
当我们的应用逐渐变大复杂的时候,往往会发现组件状态管理变得麻烦,对状态进行集中管理是一个好的方案。
1.redux由flux改进而来,使用redux,全局只有一个store保存整个应用的state,这个state是由一个root reducer函数返回的。
2.每当某个组件对应的state需要更新时,调用store.dispatch(action)方法,让root reducer函数根据action.type计算出新的全局state。而action只是一个携带信息的纯js对象。
3.root reducer 内部可以根据action.type调用子reducer函数,该子函数用于计算对应于某个组件的state。
4.单纯使用redux时,在组建生命周期中其实只需要用到store的4个方法:.dispatch() .subscribe() .unSubscribe() .getState() 。
5.redux把组件分两类:无状态的展示组件和有状态的容器组件。用connect()()方法将容器方法(跟踪state,触发state改变)和展示组件封装并生成容器组件。
6.使用redux时,由于app的架构发生了改变,文件结构变成了四个部分:
actionType.JS //定义action类型
actionCreateor.js //返回一个触发reducer的action
reducer //计算新的state,其中state参数不可修改
store //该文件返回一个全局store
component //存放组件和connect方法生成的组件
6.扩展redux功能时可以使用中间件,中间件一般是增强store方法的功能,并在action到达reducer之前对其进行处理,比如异步action
7.为了便捷开发,可以引入“react-redux”,提供了Provider组件让我们全局访问store,connect函数生成容器组件
路由:
就用react-router
v2~3版本是静态路由,直接配置url和组件的对应关系。
v4开始动态路由,将路由组件当作react组件来使用,跟app的组件耦合比较深,打包比较麻烦。