React源码解读

1.事件的绑定方式

• JSX为按钮添加事件

  <button onClick={this.handleClick}>Test</button>
  复制代码

• DOM0级事件写法

  <button onclick="handleClick()">Test</button>
  复制代码

实现机制

• 事件委派

  事件绑定到结构的最外层，使用统一的事件监听器，映射了组件的事件监听和处理函数，并不会像原生事件那样直接绑定到真实的DOM节点上

• 自动绑定

  每个方法的上下文都会指向组建的实例，即自动绑定this为当前组件，而且react还会对这种引用进行缓存

  绑定方法

  • 传参

        <button onClick={this.handleClick.bind(this,'test')}Test</button>
    复制代码

  • 不传参

        this.handleClick= this.handleClick.bind(this)
    复制代码

    或者

       <button onClick={()=>this.handleClick()}>Test<button>
    复制代码

2.在React中使用原生事件

• 用法

  在componentDidMount中通过refs调用并且手动卸载，否则会造成内存泄漏

• 注意

  尽量避免在React中混用合成合成事件和原生事件，另外,用reactEvent,nativeEvent,stopPropagation阻止冒泡是不行的，阻止react事件冒泡的行为只能用于React的合成事件中，而且没有办法阻止原生事件的冒泡

  React合成事件并没有实现事件捕获，仅仅实现了事件冒泡机制，阻止原生事件传播用e.preventDefault

3.受控组件

• 特点

  组建渲染的状态和它的value值相对应

• 更新state的流程
  • 通过在初始state中设置表单的值
  • 每当表单的值发生变化，调用onChange事件处理器
  • 事件处理器通过合成事件对象e拿到改变后的状态，并更新state
  • setState触发视图重新渲染

4.非受控组件

• 表单组件没有value和props,可以使用defaultValue默认值

对比：使用受控组件需要为每一个组件绑定change事件

转载于:https://juejin.im/post/5c25fedf6fb9a049e412c5d3