理解React反向数据流

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

July 04, 2019

4 min read

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

Add TodoList.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Product</title>
    <script src="build/lib/react.js"></script>
    <script src="build/lib/react-dom.js"></script>
    <script src="build/lib/browser.min.js"></script>
    <script src="build/lib/jquery.min.js"></script>
    <script src="build/lib/marked.min.js"></script>
</head>
<body>
    <div id="todolist">

    </div>
</body>
<script src="build/TodoList/Row.js" type="text/javascript"></script>
<script src="build/TodoList/List.js" type="text/javascript"></script>
<script src="build/TodoList/TodoForm.js" type="text/javascript"></script>
<script src="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