用react 构建电子表格（3）---点击事件冲突的处理

选择单元格必然首先发生点击事件，单击和双击可能有冲突，单击的时候，我们要判断是独立的单击还是双击的组成，双击的时候，不能调用2次单击方法。

解决办法就是标志位+定时器，

    /**
     * Handle doubleclicking a Cell.
     */
    doubleClicked = () => {
        // Prevent click and double click to conflict
        clearTimeout(this.timer)
        this.prevent = true;
     执行双击引发的业务
            ......
    }


     /**
     * Handle clicking a Cell.
     */
    clicked = () => {
        // Prevent click and double click to conflict
        this.timer = setTimeout(() => {
            if (!this.prevent) {
               执行单击引发的业务
                    ......
            }
            this.prevent = false  //单击 双击都会执行本行代码
        }, this.delay)
    }

双击的时候，其实还是也会调用单击方法，但只会执行单击中的

最好有cell也能记住自己的位置

cell点击事件的时候，向上传递自己位置信息this.prevent = false

事件：点击单元格，可能需要广播一些事件：

广播事件：

监听事件:componentDidMount中注册监听，componentDidMount : 在第一次渲染后调用，只在客户端。

   componentDidMount(){
        window.document.addEventListener('eventA', this.handleeventA)
    }

事件处理函数：

  /**
   * Used by `componentDid(Un)Mount`, handles the `eventA` event response
   */
  handleEventA = () => {
    事件处理逻辑....
  }

分发事件：

   /**
     * Emits the `eventA` event, used to tell all the other cells to
     * handleeventA
     */
    emitAEvent = () => {
        const eventA = new Event('eventA')
        window.document.dispatchEvent(eventA)
    }

可以在点击时候，调用emitAEvent方法，来广播事件。

shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
可以在你确认不需要更新组件时使用。

以下是个老外的代码：

  /**
   * Performance lifesaver as the cell not touched by a change can
   * decide to avoid a rerender
   */
  shouldComponentUpdate(nextProps, nextState) {
    // Has a formula value? could be affected by any change. Update
    if (this.state.value !== '' && this.state.value.slice(0, 1) === '=') {
      return true
    }

componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。初始化的时候，不需要执行，只在非初始化的情况下应用。计算表中定义的公式的时候，可以在这当中执行。

ps1:forceUpdate() 

:By default, when your component’s state or props change, your component will re-render. If your render() method depends on some other data, you can tell React that the component needs re-rendering by calling forceUpdate().

ps2;Tutorial: create a Spreadsheet using React