react 学习笔记
-
react的事件委派机制
react不会像html上直接写事件那样把事件绑在真实节点上，而是把所有事件绑定到结构的最外层，使用一个统一的事件监听器。这个监听器保存了所有组件内部的事件监听和处理函数，当组件挂载或者卸载时，只是在这个统一的监听器上插入或删除对应的对象。当事件发生时，首先被统一事件监听器处理，然后在其映射里找到真正的事件处理函数并调用。这种方式简化了事件处理与回收机制，效率可以提到提升。
-
受控组件和非受控组件
react中不提倡使用非受控组件，受控组件虽然必可避免的造成了性能损耗（比如受控表单组件，表单值每次变化的时候都会调用onChange事件处理器），但这个问题可以使用Flux/Redux等方式来达到统一组
-
啥是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 里面的内容会导致程序的运行不可预料。
