鍍金池/ 問答/HTML5  PHP  HTML/ 能否通過react源碼解釋一下這個(gè)是怎么實(shí)現(xiàn)的么

能否通過react源碼解釋一下這個(gè)是怎么實(shí)現(xiàn)的么

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="請(qǐng)輸入關(guān)鍵字" 
                onChange={this.ChangeHandle.bind(this)}
                onKeyUp={this.KeyUpHandle.bind(this)}
                value={this.state.value}/>
        )
    }
    componentDidMount() {
        // 默認(rèn)值
        this.setState({
            value: this.props.value || ''
        })
    }
    ChangeHandle(e) {
        // 監(jiān)控變化
        this.setState({
            value: e.target.value
        })
    }
    KeyUpHandle(e) {
        // 監(jiān)控 enter 事件
        if (e.keyCode !== 13) {
            return
        }
        this.props.enterHandle(e.target.value)
    }
}

export default SearchInput

onChange={this.ChangeHandle.bind(this)}
value={this.state.value}
一開始一直以為是個(gè)死循環(huán)。設(shè)置了value以后重新給input賦值。賦值以后再觸發(fā)onChange 。這不就是死循環(huán)了么。但是沒有出現(xiàn)死循環(huán)。而且React官方也比較推薦這種寫法--請(qǐng)問源碼是怎么處理的呢

回答
編輯回答
薔薇花

onChange只會(huì)在input元素發(fā)生DOMchange事件時(shí)觸發(fā),重新賦值過程不會(huì)發(fā)生事件,所以不會(huì)循環(huán)

2018年1月30日 23:59
編輯回答
若相惜

react-DOM 的 onChange 跟 DOM 的 onchange 不太一樣,它是名副其實(shí)的“變化”。從源碼角度看,主要是監(jiān)聽了 changeinputclick 來實(shí)現(xiàn)監(jiān)聽各種組件的變化。這些事件都不會(huì)因?yàn)橥ㄟ^ DOM api 設(shè)置 value 而觸發(fā)。事實(shí)上,DOM 提供了 dispatchEvent 來手動(dòng)觸發(fā)事件。

2017年11月15日 08:19
編輯回答
生性

一句話解釋:react是單向數(shù)據(jù)綁定。

2017年9月17日 00:24
編輯回答
遲月

不會(huì)發(fā)生死循環(huán),setState給value這個(gè)字段重新賦值,也不會(huì)主動(dòng)觸發(fā)綁定的onChange事件,狀態(tài)改變,視圖將重新渲染,并不會(huì)主動(dòng)去觸發(fā)綁定的事件

2018年6月26日 19:56
編輯回答
悶騷型

為什么你認(rèn)為會(huì)死循環(huán)?

2018年6月4日 14:27
編輯回答
女流氓

重新賦值不會(huì)觸發(fā)onChange事件,那個(gè)是dom層的事件,和onKeyUp一樣,setState只是react內(nèi)部通知視圖該重新渲染了。

2018年9月10日 10:32