React技术栈之手札

09. 十二月 2016 React 0

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

  1. React数据流  ,stata只关心自己组建的内部状态,并且只能在组件内改变,吧组建看成一个函数,那么它接受props作为参数,内部由state作为函数的内部参数,返回一个Virtual DOM的实现。
  2. setState是一个异步方法,一个生命周期内的所有的setState方法会合并操作。
  3. props: React的单向数据流,只要的流动管道是props,props本身是不可变的,当我们视图改变props的值时,React会报出类型错误的警告,组件的props一定是来自于默认属性或者通过父组件传递而来。
  4. 子组件prop:在React中有一个重要且内置的prop—-children。 他代表组件的子组件集合,children可以根据传入子组件的数量来决定是否是数组类型:
  5. React.Children是React官方提供的一系列操作children的方法。它提供诸如map、forEach、count、only、toArray等实用函数,可以为我们的子组件提供便利。
  6. shouldComponentUpdate是一个特别的方法,他接收需要更新的props和state,让开发者增加必要的条件判断,让其在需要时更新,不需要时不更新,因此在返回false的时候,组件不再向下执行生命周期方法。

事件系统

React基于虚拟DOM实现的一个SyntheticEvent合成事件层,不存在兼容问题,也可以使用 stopPropagationpreventDefault  来进行中断。所有事件自动绑定到最外层上,如果需要访问原生事件对象,则可以通过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元素已经真实的渲染在页面上了。

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

 


发表评论

电子邮件地址不会被公开。