注意学习这个在D盘:小红书第一部分的案例react/new-my-app 小红书第二部分的案例react/make-redux 小红书第三部分的案例react/my-app-higher 并且里面有说且文字
react生命周期及其它注意事件
/*
* react中组件里的render函数可以找到组件的this
* 在render方法里调用函数时函数是可以找到this的,react中组件里的方法函数里不能找到组件的this需要在render中绑定this,具体应该是点击事件里的函数
* react中状态管理放在组件的constructor里管理
* setState()设置state的,就会重新渲染render方法重新渲染
* 插值不能用for和if,可以用map
* 组件中必须继承react中的component,组件的首字母必须是大写的
* 生命周期分三个阶段,一个挂载阶段,一个是更新阶段,一个是卸载阶段
* 挂载阶段:constructor()构造函数,在创建组件的时候调用一次
* 挂载:componentWillMount()在组件即将被挂载的时候调用一次
* 一些组件启动的动作,包括像 Ajax 数据的拉取操作、一些定时器的启动等,就可以放在 componentWillMount 里面进行,例如 Ajax:
* 挂载:render()渲染
* 挂载:componentDidMount()在组件被挂载完成的时候调用一次,可以在这里使用refs,例如动画的启动
* 卸载阶段:(组件从页面中移除)
* componentWillUnmount即将卸载没有卸载完成,组件对应的 DOM 元素从页面中删除之前调用
* 更新阶段:(注意:组件一但建成进入更新阶段后不会再走constructor方法里了)
* “更新阶段”。说白了就是 setState 导致 React.js 重新渲染组件并且把组件的变化应用到 DOM 元素上的过程,这是一个组件的变化过程。
* React.js 当中可以直接通过 setState 的方式重新渲染组件,渲染的时候可以把新的 props 传递给子组件,从而达到页面更新的效果。
* componentWillReceiveProps(nextProps)组件从父组件接收到新的 props 之前调用。,父组件的更新会触发子组件的这个函数,nextProps父组件更新的时候带来的数据
* shouldComponentUpdate(nextProps,nextState),你可以通过这个方法控制组件是否重新渲染。如果返回 false 组件就不会重新渲染。是否需要重新渲染,Return false/true
* componentWillUpdate(nextProps,nextState),即将更新,组件开始重新渲染之前调用。
* render渲染
* componentDidUpdate(prevProps,PrevState)完成更新,组件重新渲染并且把更改变更到真实的 DOM 以后调用
* 尽量不要在render里去改状态(setState),尽量在相应的生命周期里去改
*
*
* */
react的redux共分几个部分各个部分的原理如下:
provider : 它做的事情就是与context建立联系,把传进来的store放到context里,并把所有组件当成自己的子组件,这样所有组件都可以经过connect之后都可以取到react-redux里的值( Provider
做的事情也很简单,它就是一个容器组件,会把嵌套的内容原封不动作为自己的子组件渲染出来。它还会把外界传给它的 props.store
放到 context,这样子组件 connect
的时候都可以获取到。)
store: 它就像是一个指挥部,会暴漏出来所有供外使用的方法,里面会写好各方法的处理逻辑,及调用顺序( getState, dispatch, subscribe)
dispatch: 它是处理state数据,也就是你传进来的想要改变的state里的值也就是形参action,它会把你传进来的action交给reducer去处理,reducer处理后调用渲染方法根据最新数据渲染页面(要改哪些数据以及指令类型)
reducer:它是根据action(也是你的指令的类型,它根据你传的类型去判断 它要干啥,要改哪个数据)去判断哪此数据需要更新(把要更新的数据复制出来一份去替换旧的,这样对象地址就不一样了,可以判断旧数据是否更新),从而反回最新的数据,也就是根据浅拷贝的原因,把想改变的数据用新对象替换,如果不用新对象替换引用类型地址没有变视为不更新
subscribe:渲染页面,也就是里面调用的setState,调用它后,就会调用render方法重新渲染,根据最新的数据
connect(高阶组件):通过高阶组件与原生的context通信,它就是将最新的数据绑定要传进来的组件上,使被传进来的组件可以取到最新的state数据,也就是所谓的被包装组件
Connect
会去 context 里面取出 store。把 store 里面的数据取出来通过 props
传给 传进来的函数
connect
connect中
mapStateTopProps参数的作用:(高阶组件的入参)
mapStateTopProps
相当于告知了Connect
应该如何去 store 里面取数据,然后可以把这个函数的返回结果传给被包装的组件,还需要告诉高级组件我们需要什么数据,高阶组件才能正确地去取数据。
connect中mapDispatchToProps参数的作用:
来告诉它我们的组件需要如何触发dispatch
。我们把这个参数叫mapDispatchToProps
2018年9月12日 学习react总结
1、在setState里更改state里的值,如何在当前组件,当前方法里取到最新的值:
(1)setState里加入第二个参数,为回调函数,在此回调内可以取到最新值
(2)在render生拿周期里直接取值
(3)加setTimeOut
2、不能在子组件里直接改props里的值,解决办法可以存在变量里,或在父组件里改
3、使用map之前进行非空判断以防报错
4、写行间样式用鸵峰式写法
5、在子组件使用props里的值时要先定义下初始值