理解React反向数据流

文章目录

初始化时的数据流
用户提交时数据流

在React中数据传递是按组件一级一级传递的，因为这样可以很清楚数据的流向，但也会造成一个问题，就是当用户在深层的组件中输入数据，程序取得用户数据后，无法在当前组件中传递数据到其它层级组件，而只能通过把数据回传上级组件来把数据传递到其它组件（反向数据流），React这样做的好处就是让数据流向一直保持清晰可见，下面的Todo list就可以很好的理解这一点

Add TodoList.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Product</title>
<script src="https://www.myfreax.com/understanding-react-reverse-data-stream/build/lib/react.js"></script>
<script src="https://www.myfreax.com/understanding-react-reverse-data-stream/build/lib/react-dom.js"></script>
<script src="https://www.myfreax.com/understanding-react-reverse-data-stream/build/lib/browser.min.js"></script>
<script src="https://www.myfreax.com/understanding-react-reverse-data-stream/build/lib/jquery.min.js"></script>
<script src="https://www.myfreax.com/understanding-react-reverse-data-stream/build/lib/marked.min.js"></script>
</head>
<body>
<div id="todolist">
</div>
</body>
<script src="https://www.myfreax.com/understanding-react-reverse-data-stream/build/TodoList/Row.js" type="text/javascript"></script>
<script src="https://www.myfreax.com/understanding-react-reverse-data-stream/build/TodoList/List.js" type="text/javascript"></script>
<script src="https://www.myfreax.com/understanding-react-reverse-data-stream/build/TodoList/TodoForm.js" type="text/javascript"></script>
<script src="https://www.myfreax.com/understanding-react-reverse-data-stream/build/TodoList/TodoList.js" type="text/javascript"></script>
</html>

TodoList组件

/**
* Created by huangyanxiong on 16-3-11.
*/
var TodoList = React.createClass({
/**
* 初始化数据
* @returns {{todo: string}}
*/
getInitialState: function () {
return {todos:[],todo:''};
},
/**
*  处理下一级组件上传的值，即处理反向数据流
*/
handleTodoSubmit: function (todo) {
this.state.todos.push(todo);    //取得用户输入的数据并且推进的todos数组中
this.setState(this.state.todos);    //设置状态，更新组件
},
render: function () {
return (
<div className="todoList">
<h1>TODO</h1>
<TodoForm handletodosubmit={this.handleTodoSubmit}/>
<List todos={this.state.todos}/>
</div>
);
}
});
ReactDOM.render(<TodoList/>,document.getElementById('todolist'));

List

var List = React.createClass({
render: function () {
var rows = this.props.todos.map(function (todo) {
return <Row todo={todo} key={todo}/>
});
return (
<ul className="list">
{rows}
</ul>
);
}
});

Row组件

/**
* Created by huangyanxiong on 16-3-11.
*/
var Row = React.createClass({
render: function () {
return (
<li>
{this.props.todo}
</li>
);
}
});

TodoForm组件

/**
* Created by huangyanxiong on 16-3-11.
*/
var TodoForm = React.createClass({
handleSubmit: function (e) {
e.preventDefault();
/**
* 数据反向流入口，传递数据到上级组件
* 取得用户输入的表单值，接着需要把放在list中
* 由于React数据传递是一级一级传递的，所以只能把数据传递上级组件TodoList,然后由TodoList传递给 List
* List组件才能接收到用户添加的Todo,并添加到List组件
* 这就是反向数据流 TodoForm > TodoList
* 当用户点击添加Add事件，整个数据流向
* TodoForm > TodoList > List > Row
*/
if (!this.refs.todo.value){
alert('todo is not null');
return false;
}
this.props.handletodosubmit(this.refs.todo.value.toString());
this.refs.todo.value = '';
},
render: function () {
return (
<form onSubmit={this.handleSubmit}>
<input type="text" ref="todo"/>
<button>Add #3</button>
</form>
)
}
});

在这个Todo list划分了四个组件分别是TodoList,List,Row,TodoForm