React实现自定义双向数据流

自定义双向数据流

原创已于 2022-07-28 16:12:54 修改 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#React #ReactDOM

于 2019-05-15 14:03:31 首次发布

React 专栏收录该内容

15 篇文章

订阅专栏

本文通过React组件实例，深入解析并实现双向数据流的概念。首先，展示了如何在组件内部通过监听input元素变化来实现数据与视图的同步更新。接着，进一步探讨了组件间的数据传递，即如何将子组件的输入变化反馈给父组件，从而实现跨组件的双向数据流。此过程不仅巩固了对React单向数据流的理解，同时也提供了实现类似Angular双向绑定效果的实践思路。

ng是双向数据流、VM双向数据绑定。而react与vue都是单向数据流，model层的数据流向view层。今天，我们就尝试自定义实现双向数据流。

案例：
组件中通过监听input内容变化，进而赋值。

class Bar extends React.Component {
	constructor(){
		super();
		this.state = {
			msg:''
		}
	}
	// input的内容变化赋值msg
	handleChange(event){
		this.setState({
			msg:event.target.value
		})
	}
	render(){
		let {msg} = this.state
		return(
			<div>
				// 监听input内容的变化
				<input onChange={this.handleChange.bind(this)}	type="text" />
				<p>输入的内容是：{msg}</p>
			</div>
		)
	}
}

ReactDOM.render(
	<Bar />,
	document.getElementById('app')
)

上个案例实现组件内部的双向数据流。
以下案例实现组件外部的双向数据流：

class App extends React.Component {
	constructor(){
		super();
		this.state = {
			msg:''
		}
	}
	// 获取到子组件传来的value，赋值到msg
	getValue(value){
		this.setState({
			msg:value
		})
	}
	render(){
		let {msg} = this.state
		return(
			<div>
				<Bar getValue={this.getValue.bind(this)} />
				<p>我是子组件input输入的内容：{msg}</p>
			</div>
		)
	}
}
class Bar extends React.Component {
	// input的内容变化调用父组件的getValue方法传值到父组件
	handleChange(event){
		this.props.getValue(event.target.value)
	}
	render(){
		return(
			<div>
				// 监听input内容的变化
				<input onChange={this.handleChange.bind(this)}	type="text" />
			</div>
		)
	}
}

ReactDOM.render(
	<App />,
	document.getElementById('app')
)