您的位置:首页 > Web前端 > React

react学习总结9--深入理解

2017-01-06 10:43 330 查看

深入学习react

官网

1.拆分所有用户界面为一个组件树

首先为所有组件命名并画上线框图

拆分组件的原则:单一功能原则,理想状态下一个组件应该只做一件事

2.利用react,创建应用的一个静态版本

3.识别出最小的(但是完整的)代表UI的state

为了使UI可交互,需要能够触发底层数据模型的变化,需要用到state,关键在于精简,不要存储重复的数据,可以分析是否需要state

1.是否从父级通过props传入? true : 不是state

2.是否会随着时间改变? false : 不是state

3.是否能根据组件中其他state数据或者props计算出来? true : 不是state

4.确认state的生命周期

指定哪一个组件会拥有这个数据模型

数据流是沿着组件树,从上至下的单项数据流

5.添加反向数据流

将一个在顶层组件会执行的函数封装成一个属性,传递给子组件,子组件调用后,触发顶层组件的函数执行,在这个函数中可以定义更新state,从而触发UI的改变

论坛

react 的 diff算法

当组件更新的时候,react 会创建一个新的虚拟DOM树,并且会和之前存储的DOM树进行比较,这个比较的过程就用到diff算法

react 提出一种假设,相同的组件具有类似的结构,二不同的组件具有不同的结构,在这种假设的基础上进行逐层比较,如果发现对应的节点是不同的,那就直接删除就的节点以及他所包含的所有子节点,然后替换成新的节点,如果是相同的节点则只进行属性的更改

react 组件是怎么来的

es6 的 class 类可以看做是构造函数的一个语法糖,可以把它当做构造函数来看,extends实现了类之间的继承—定义一个类继承React.Component所有的属性和方法,组件的生命周期函数就是从这里来的,constructor是构造器,在实例化对象时调用,super调用了父类的constructor创造了父类的实例对象this,然后用子类的构造函数进行修改。

当我们使用组件的时候 实际上是对Person类的实例化–new Person,
4000
只不过react对这个过程进行了封装,让他看起来更像是标签

render 发生了什么

render 是react生命周期中最重要的步骤,创建虚拟DOM,进行diff算法,更新DOM树都在这里进行

react-router路由

Router 和 Route就是react的一个组件,他并不会被渲染,只是一个创建内部路由规则的配置对象,根据匹配的路由地址展现相应的组件,Route则对路由地址和组件进行绑定,Route具有嵌套功能,表示路由地址的包含关系,这和组件之间的嵌套并没有直接联系

react-redux实现

react-redux提供了connect和Provider两个API 他们一个将组件与redux关联起来,一个将store传递给组件。组件通过dispatch 发出 action ,store 根据根据action 的type属性调用对应的reducer 并传入state 和 这个action,reducer对state进行处理并返回一个新的state放入store,connect 监听到store 发生变化,调用setState更新组件,此时组件的props也就跟着变化

reducer 必须返回一个新对象才能出发组件的更新

因为connect函数中会对新旧两个state进行浅对比,如果state只是值改变了,但是引用地址没有改变,connect会人为他们相同而不触发更新

无论reducer返回的state是否改变 subscribe中注册的所有回调函数都会被触发

组件卸载之前,加在DOM元素上的监听事件,和定时器需要手动清除,因为这些并不在react的控制范围内

优化

参考这里

1.尽量少用setState,容易导致重新渲染,使用redux管理

2.将方法的bind一律置于constructor中,如果需要传递参数,则使用闭包:
onClick={() => {this.handleClick(name);}}


3.只传递component需要的props(避免传的太多,传的太深)

4.
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: