<深入React技术栈>阅读笔记

[du1wu2lzlz]

React核心

• 虚拟dom对象(Virtual DOM)
• 虚拟dom差异化算法（diff algorithm）
• 单向数据流渲染（Data Flow）
• 组件生命周期
• 事件处理

React组件

---

React组件构建

1. React.creactClass
2. ES6 classes
   static protoTypes
   static defaultProps

3. 无状态函数

   使用无状态函数构建的组件成为无状态组件(0.14版本之后新增的)
   无状态组件只传入props和context两个参数;
   即不存在state，没有生命周期方法。
   
   优点:
       无状态组件不像上述两个方法在调用时会创建新实例
       它创建时始终保持一个实例，避免了不必要的检查和内存分配，
       做到了内部优化
   其他:
       无状态组件挂载时，只是方法的调用，没有新建实例，因此```findDOMNode```和```refs```都无法用于其中

   ---

   组件之间通信

4. React数据流
   1.1 state
   React没有结合Flux或Redux框架之前,使用state管理组件自身内部状态
   setState是一个异步方法，一个生命周期内所有的setState方法会合并操作
   1.2 props
   React的单向数据流,主要的流动体现在props，props本身是不可变的.
   defaultProps用来定义props的默认配置.

   React内置的props--children,代表组件的子组件的集合.children可以根据传入子组件的数量来决定是否是数组类型
   可以通过React.Children.map方法遍历子组件

        这种调用方式成为动态子组件,它指的是组件内的子组件是通过动态计算得到的，我们可以对任何数据,字符串,数组或者对象进行动态计算.

   propType用于规范props的类型与必需的状态,如果组件定义了protoTypes，在开发环境下，就会对组件的props值的类型进行检查，并报warning

5. React与DOM
   2.1 ReactDOM的API
   2.11 findDOMNode
   在compomemtDidMount和componentDidupdate中，我们可以获得真正的DOM元素
   2.12 render
   2.13 unmountComponentAtNode
   2.14 refs

   React组件中特殊的prop，可以附加到任何一个组件上。组件被调用时会新建一个该组件的实例,```refs```就会指向这个实例  
   + refs可以是个回调函数，在组件被挂载后立即执行  
   + refs支持字符串，对于DOM操作，可以使用refs获得组件内部的DOM
   + refs可以获取当前组件所有子组件的引用。

---

生命周期

---

事件系统

1. Virtual DOM 在内存中是以对象的形式存在的,React基于Virtual DOM 实现了一个SyntheticEvent(合成事件)层,
   我们所定义的事件处理器会接收到一个SyntheticEvent对象的实例,同样支持事件的冒泡机制,
   可以使用stopPropagation()和preventDefault()中断

   所有事件都自动绑定到最外层上，如果需要访问原生事件对象，可以使用nativeEvent属性

2. React中的合成事件的实现机制
   在React底层，主要对合成事件做的下面两件事：

   • 事件委派

     React的事件代理并不会把事件处理函数直接绑定到真实的节点上，而是把所有事件绑定到结构的最外层，使用统一的事件监听器
     该事件监听器维持一个映射来保存所有组件内部的事件监听和处理函数

   • 自动绑定

     1. React组件中，每个方法的上下文都会指向这个组件的实例，即自动绑定this为当前组件,并对这种引用进行缓存，以达到CPU和内存的最优化

     2. 使用ES6 classes或者纯函数时，React的自动绑定就不存在了，需要手动实现this绑定 2.1 bind 绑定

        • 绑定事件处理器内的this
        • 向事件处理器中传递参数

        • 如果只绑定，不传参，例子如下：

              import React,{Component} from 'react';
          
              class App extends Component {
                  handleClick(e) {
                      console.log(e);
                  }
          
                  render() {
                      return <button onClick = {::this.handleClick}>test</button>;
                  }
              }

          2.2 构造器内声明

        • 仅需要进行一次绑定

              import React,{Component} from 'react';
          
              class App extends Component {
                  constructor(props){
                      super(props);
                      this.handleClick = this.handleClick.bind(this);
                  }
                  handleClick(e) {
                      console.log(e);
                  }
          
                  render() {
                      return <button onClick = {this.handleClick}>test</button>;
                  }
              }

          2.3 箭头函数

3. 在React中使用原生事件 在componentDidMount生命周期及以后可以进行原生事件绑定
   在组件卸载时手动移除，否则会出现内存泄露的问题

组件间抽象

---

组件性能优化

1. shouldComponentUpdate进行判断,来避免不必要的渲染（React性能优化核心）