能否通过react源码解释一下这个是怎么实现的么

Question

import React from 'react'
import PureRenderMixin from 'react-addons-pure-render-mixin'

import './style.less'

class SearchInput extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
        this.state = {
            value: ''
        }
    }
    render() {
        return (
            <input
                className="search-input" 
                type="text" 
                placeholder="请输入关键字" 
                onChange={this.ChangeHandle.bind(this)}
                onKeyUp={this.KeyUpHandle.bind(this)}
                value={this.state.value}/>
        )
    }
    componentDidMount() {
        // 默认值
        this.setState({
            value: this.props.value || ''
        })
    }
    ChangeHandle(e) {
        // 监控变化
        this.setState({
            value: e.target.value
        })
    }
    KeyUpHandle(e) {
        // 监控 enter 事件
        if (e.keyCode !== 13) {
            return
        }
        this.props.enterHandle(e.target.value)
    }
}

export default SearchInput

onChange={this.ChangeHandle.bind(this)}
value={this.state.value}
一开始一直以为是个死循环。设置了value以后重新给input赋值。赋值以后再触发onChange 。这不就是死循环了么。但是没有出现死循环。而且React官方也比较推荐这种写法--请问源码是怎么处理的呢

Answer 1

为什么你认为会死循环？

Answer 2

重新赋值不会触发onChange事件，那个是dom层的事件，和onKeyUp一样，setState只是react内部通知视图该重新渲染了。

Answer 3

不会发生死循环，setState给value这个字段重新赋值，也不会主动触发绑定的onChange事件，状态改变，视图将重新渲染，并不会主动去触发绑定的事件

Answer 4

一句话解释：react是单向数据绑定。

Answer 5

react-DOM 的 onChange 跟 DOM 的 onchange 不太一样，它是名副其实的“变化”。从源码角度看，主要是监听了 change、input 和 click 来实现监听各种组件的变化。这些事件都不会因为通过 DOM api 设置 value 而触发。事实上，DOM 提供了 dispatchEvent 来手动触发事件。

Answer 6

onChange只会在input元素发生DOMchange事件时触发，重新赋值过程不会发生事件，所以不会循环