React技术栈之手札

近日开始通读《深入React技术栈》，发现坐着讲的很详细，书中很多知识点是我忽视的或者没有接触到了，特写遍手记记录一下。

React数据流，stata只关心自己组建的内部状态，并且只能在组件内改变，吧组建看成一个函数，那么它接受props作为参数，内部由state作为函数的内部参数，返回一个Virtual DOM的实现。
setState是一个异步方法，一个生命周期内的所有的setState方法会合并操作。
props： React的单向数据流，只要的流动管道是props，props本身是不可变的，当我们视图改变props的值时，React会报出类型错误的警告，组件的props一定是来自于默认属性或者通过父组件传递而来。

子组件prop：在React中有一个重要且内置的prop----children。他代表组件的子组件集合，children可以根据传入子组件的数量来决定是否是数组类型：

        <Tabs defaultActiveIndex={this.state.activeIndex} className="tabs-bar">
          <TabPane order="0" tab={'Tab 1'}>第一个 Tab 里的内容</TabPane>
          <TabPane order="1" tab={'Tab 2'}>第二个 Tab 里的内容</TabPane>
          <TabPane order="2" tab={'Tab 3'}>第三个 Tab 里的内容</TabPane>
        </Tabs>

//在Tabs组件中 this.props.children 代表的是Tabs的子组件 
          <TabPane order="0" tab={'Tab 1'}>第一个 Tab 里的内容</TabPane>
          <TabPane order="1" tab={'Tab 2'}>第二个 Tab 里的内容</TabPane>
          <TabPane order="2" tab={'Tab 3'}>第三个 Tab 里的内容</TabPane>

React.Children是React官方提供的一系列操作children的方法。它提供诸如map、forEach、count、only、toArray等实用函数，可以为我们的子组件提供便利。
shouldComponentUpdate是一个特别的方法，他接收需要更新的props和state，让开发者增加必要的条件判断，让其在需要时更新，不需要时不更新，因此在返回false的时候，组件不再向下执行生命周期方法。

事件系统

React基于虚拟DOM实现的一个SyntheticEvent合成事件层，不存在兼容问题，也可以使用 stopPropagation、preventDefault 来进行中断。所有事件自动绑定到最外层上，如果需要访问原生事件对象，则可以通过nativeEvent属性。

在JSX中事件的写法必须是驼峰式写法，比如 onClick，而html的事件是小写的 onclick。
合成事件的实现机制是 事件委派和自动绑定 ，把所有的事件绑定到最外层，使用一个监听器来监听。根据组件的挂载和卸载来进行增删一个对象，或者是调用一些方法。
this 的问题，使用createClass的写法的react会自动绑定this为当前组件，使用ES6 classes 或者纯函数的时候，这种自动绑定就不存在了，需要我们手动实现，实现方法有以下几种。
bind，onClick={this.handleClick.bind(this)}
ES7 的双冒号写法， onClick={::this.handleClick}
在construct 里面提前使用bind声明
箭头函数
在React中可以使用原生的事件。但是一定要react生命函数componentDidMount 的时候使用，因为这个时候DOM元素已经真实的渲染在页面上了。
```
componentDidMount(){
  this.refs.button.addEventListener('click',e=>{
    handleClick(e)
  })
}
handleClick(e){
  console.log(e)
}

componentWillUnmount(){
  this.refs.button.removeEventListener('click)
}
```
在React中使用原生事件时，一定要在组件卸载时手动移除事件，否则可能出现内存泄漏的问题，而使用React合成系统的不需要考虑这些问题，React已经帮我们处理。
React合成事件和DOM原生事件最好不要混用。
react的阻止事件冒泡不能用到原生的事件中，原生的阻止事件冒泡却能用到react的事件系统中。

事件系统

文章评论