Giters

qingzhu1224 / learn-react

learn react

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React

1.�生命周期

1.componentWillMount
2.componentDidMount
3.shuoldcomponentupdate
4.componentwillupdate
5.componentDidUpdate
6.componentwillunmount
7.componentwillreceiveprops

具体参考

1.挂载阶段 getDefaultProps\getIniteState\componentWillMount\render\compoentDidMount

2.更新阶段 componentWillRecieveProps\shouldCompoentUpdate\componentWillUpdate\render\compoentDidUpdate

3.卸载阶段 componentWillUnMount

4.1.挂载阶段�有：getDefaultProps这个方法只会调用一次。返回来默认的属性值。getInitialState用来初始化每个实例的state。componentWillMount的该方法在首次渲染之前调用，也是在render方法调用之前修改state的最后一次机会。render创建一个虚拟DOM，标示组件的输出。对于一个组件来说，这个方法是必须的。componentDidMount该方法被调用时，已经渲染出真是的DOM了。一般用来调后台接口。
2.更新阶段：componentWillReceiveProps组件的props�属性可以通过付组件来更改。在这里可以更新state,触发render方法重新渲染组件。shouldComponentUpdate�如果确定组件的props或state的改变不需要重新渲染，可以返回false来阻止组件重新渲染。componentWillUpdate，在组件接收到新的props或state即将渲染前。此时不要更新props或state.componentDidUpdate表示更新之后，�相当于compoentDIdMount，�可以获得DOM.
3.卸载阶段：componentWillUnmount卸载销毁时执行，完成�所有的清理和销毁工作。主要用于取消�定时器或事件监听器。

2.state

具体情况参考

1.setState不会�立刻改变React组件中state的值

2.setState通过引发一次组件的更新过程来引发重新绘制

3.多次setState函数�调用产生的效果会合并

3.虚拟dom

虚拟DOM介绍虚拟DOM是render方法返回来的一个轻量级javascript对象。虚拟DOM具有batching(批处理)和diff算法。

4.diff算法

参考资料

1.三个策略

传统diff�算法，复杂度是o(n�的三次方)，通过改进变成o(n)，主要用到的三个策略是

  • Web UI中DOM节点跨层级的移动操作很少，可以忽略不计
  • 拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结构
  • 对于同以层级的一组子节点，它们可以通过唯一id进行区分

�基于这三个策略对�tree diff\component diff\element diff做了优化。tree diff只进行统一层级比较。component diff不同类型的组件，删除组件，再新建组件。element diff设置key

5.react和vue区别

  • 相同点：虚拟DOM/组件化／属性／构建工具
  • 不同点：�JSX-模版／状态管理-对象属性／双向数据绑定

6.react�中遇到的困难

  • 动态表单中列表的key，必须是固定的，不然会出问题。
  • 当导航切换特别快的时候，之前请求的数据出现了setState(…):Can only update a mounted or mounting component……的错误。出现这个问题时，这个主要是发生在异步处理的情况下，例如事件或者异步请求的情况
  • 添加给DOM元素的监听事件，组件卸载时，手动清除。
  • 表单校验问题

7.setState 参考

1.参考

2.不能直接修改state, 例如： this.state.title = 'React';

3.State的更新是异步的图片

4.如果state的类型是不可变类型（数字，字符串，布尔值，null， undefined），直接给�修改的状态赋一个新值就可以了。如果状态的类型是数组，使用concat、slice、filter或者扩展运算符.如果是普通对象，使用Object.assgin{}或者扩展�运算符.

Immutable Data

1.参考

2.Immutable实现原理是持久化数据结构，也就是使用旧数据创建新数据时，要保证旧数据同时可用且不可变。同时为了避免deepCopy把所有节点都复制一遍带来的性能损耗，使用了结构共享，即如果对象数中一个节点发生变化，只修改这个节点和受它影响的父节点，其他节点则进行共享。优点：时间旅行和节省内存

虚拟DOM

1.参考

2.为什么用虚拟DOM？传统的MVC框架，它是将某个模版编译成模版函数，需要更新时，是自己手动将数据整体传入模版函数，得到一个字符串，使用innerHTML刷新整个容器。这里其实是可以优化的，但由于是手动，是体力活，都是直接使用innerHTML。由于整体替换，一下子销毁这么多元素（有时还绑着事件，可能导致GC出问题），又要插入这么多元素，再重新绑定事件，这个性能很差。react，首先使用编译手段（jsx的虚拟DOM转换），将这部分消耗能提前释放出去，不过将字符串（jsx模版）转换为一个个JS对象，也占不了多少内存。 然后是数据发生变动时, 由于数据变动都是需要用setState方法,因此兼容性很好, 少了Object.defineProperty或wrapper的消耗,然后对应数据通过render转换成字符串,字符串再转换虚拟DOM树 先后虚拟DOM进行比较, 更新视图.参考

3.两个虚拟dom,使用diff算法之后，会产生patchs，再更新dom

4.参考

5.Virtual Dom 算法的实现也就是以下三步

  • 通过 JS 来模拟创建 DOM 对象
  • 判断两个对象的差异
  • 渲染差异url

其他

1.react的数据载体

2.后台请求接口事放在ComponentWillMount还是ComponentDidMount中？ 参考

  • 一般异步加载数据放在ComponentDidMount中，因为componentWillMount里面状态改变并不会触发再次更新，而componentDidMount里面state的变化会触发更新，所以对于请求远程数据的，尽量放在componentDidMount，这样状态变化后，界面也会更新，而放在componentWillMount，有可能界面不会更新

3.react 16新增的内容 参考

About

learn react