vivian blog

React学习之旅

发表于

React介绍

认识误区

  • React不是完整的MVC框架，最多只是MVC中的V(view)，甚至React本身都不认可MVC开发模式

  • React并不是在任何情况下，都是性能最佳的框架，在有大量DOM改动的情况下，React的性能较差

  • React不是一个新的模板语言，JSX只是一个表象，没有JSX的React也能工作

React原理

  • React 会完整的复制一份DOM Tree,然后通过标记dirty nodes 来找到真正重绘的Nodes。

– eg.某个DOM被标记说要更新，那么它以下所有的subTree都要被调用shouldComponentUpdate。关键是从setState被触发后，其自身节点到其所有子节点都要被呼叫到shouldComponentUpdate,遍历所有节点的时间成本是很高的。

React知识点

  • getDefaultProps只在组件创建时调用一次并缓存对象(即在React.createClass之后就会调用)此方法不能以来this获得这个组件实例。使用ES6语法，直接定义defaultProps这个类属性来替代,Temp.defaultProps = {initialCount: 0};

  • getInitialState,初始化this.state的值，只在组件装载之前调用一次，若使用ES6语法，可在构造函数中初始状态

1
2
3
4
5
6
7
8
9
class Temp extends React.Component{
    constructor(props){
      super(props);
      this.state = {count: 0};
   }
   render() {
  
   }
}
  • render必须用于生成此组件的HTML结构，可返回null或者false，这时候ReactDOM.findDOMNode(tjos)会返回null

生命周期函数

装载组件触发

componentWillMount

  • 只在装载之前调用一次，在render之前调用，可在这个方法调用this.state改变状态，此处不会额外调用render

更新组件触发

  • componentWillReceiveProps
  • shouldComponentUpdate

  • shouldComponentUpdate(nextProps,nextState)
    – 调用shouldComponentUpdate可以让React知道一个组件的输出是否会被当前状态或参数的改变而影响，默认的行为是在每一个状态改变后便重新渲染页面，而且在大多情况下需要依赖这个默认的行为。
    当新的参数和状态被接收到时shouldComponentUpdate就会被调用。此方法不会在首次render或是forceUpdate在执行时被调用

  • componentWillUpdate

  • componentDidUpdate

卸载组件触发

  • componentWillUnmount

React的核心

  • 虚拟DOM，传统的diff(比较新DOM与虚拟DOM的差异，然后再加以渲染),但facebook工程师采用了更近大胆的策略，当然这必定有所牺牲

  • DOM节点跨层级少

  • 组件，不同组件基本不同DOM，比较是否同一类型组件，若否，删除原有节点，新增整个组件下的子节点，若是，比较ELEMENT
  • 同一层级的子节点，可用ID区分，然后根据节点ID，进行移位操作，得到如何修改，删除，新增