能否通过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

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

Answer 2

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

Answer 3

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