学习react心得及总结

注意学习这个在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里的值时要先定义下初始值