react 学习笔记

1. react的事件委派机制
   react不会像html上直接写事件那样把事件绑在真实节点上，而是把所有事件绑定到结构的最外层，使用一个统一的事件监听器。

   这个监听器保存了所有组件内部的事件监听和处理函数，当组件挂载或者卸载时，只是在这个统一的监听器上插入或删除对应的对象。当事件发生时，首先被统一事件监听器处理，然后在其映射里找到真正的事件处理函数并调用。这种方式简化了事件处理与回收机制，效率可以提到提升。

---

2. 受控组件和非受控组件

   react中不提倡使用非受控组件，受控组件虽然必可避免的造成了性能损耗（比如受控表单组件，表单值每次变化的时候都会调用onChange事件处理器），但这个问题可以使用Flux/Redux等方式来达到统一组

---

3. 啥是context
   在react里经常看见context，但是一直没怎么用，所以也没多留意，今天看到个文章，介绍的挺好。

   
   传统传值方法

通过context`分享`

代码：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Header from './header';
import Main from './main';
import './App.css';

class App extends Component {
  static childContextTypes = {
    themeColor :PropTypes.string
  }
  constructor () {
    super()
    this.state = {
      themeColor : 'red'
    }
  }
  getChildContext () {
    return {
      themeColor : this.state.themeColor
    }
  }
  render () {
    return (
        <div>
          <Header />
          <Main />
        </div>
    )
  }
}

export default App;

构造函数里面的内容其实就很好理解，就是往 state 里面初始化一个 themeColor 状态。getChildContext 这个方法就是设置 context 的过程，它返回的对象就是 context（也就是上图中处于中间的方块），所有的子组件都可以访问到这个对象。我们用 this.state.themeColor 来设置了 context 里面的 themeColor。

//子组件获取状态的方法
//title.js
class Title extends Component {
  static contextTypes = {
    themeColor: PropTypes.string
  }

  render () {
    return (
        <h1 style={{ color: this.context.themeColor }}>React.js 小书标题</h1>
    )
  }
}

一个组件可以通过 getChildContext 方法返回一个对象，这个对象就是子树的 context，提供 context 的组件必须提供 childContextTypes 作为 context 的声明和验证。

如果一个组件设置了 context，那么它的子组件都可以直接访问到里面的内容，它就像这个组件为根的子树的全局变量。任意深度的子组件都可以通过 contextTypes 来声明你想要的 context 里面的哪些状态，然后可以通过 this.context 访问到那些状态。
context 打破了组件和组件之间通过 props 传递数据的规范，极大地增强了组件之间的耦合性。而且，就如全局变量一样，context 里面的数据能被随意接触就能被随意修改，每个组件都能够改 context 里面的内容会导致程序的运行不可预料。

https://segmentfault.com/a/1190000012976767