下面的代码来自React,它会动态更新DOM。我使用了Facebook的教程,但没有理解整个代码,即,代码的哪一部分在何时以及如何触发代码中的其余部分时执行。请帮助我理解代码。
React
var TodoList = React.createClass({ render: function() { var createItem = function(itemText) { return <li>{itemText}</li>; }; return <ul>{this.props.items.map(createItem)}</ul>; } }); var TodoApp = React.createClass({ getInitialState: function() { return {items: [], text: ''}; }, onChange: function(e) { this.setState({text: e.target.value}); }, handleSubmit: function(e) { e.preventDefault(); var nextItems = this.state.items.concat([this.state.text]); var nextText = ''; this.setState({items: nextItems, text: nextText}); }, render: function() { return ( <div> <h3>TODO</h3> <TodoList items={this.state.items} /> <form onSubmit={this.handleSubmit}> <input onChange={this.onChange} value={this.state.text} /> <button>{'Add #' + (this.state.items.length + 1)}</button> </form> </div> ); } }); React.renderComponent(<TodoApp />, mountNode);
上面的代码用于动态更新DOM结构。该代码是从http://facebook.github.io/react/引用的,因此请帮助您了解代码的工作过程。
谢谢,这是一个很好的问题。这里是幕后发生情况的粗略概述:
一切都从这一行开始:
React.renderComponent(<TodoApp />, mountNode);
这将实例化TodoApp组件,该组件调用:
TodoApp::getInitialState()
然后,它渲染TodoApp组件
TodoApp::render()
依次实例化TodoList
TodoList::render()
至此,我们已经具备了渲染初始标记所需的一切
<div> <h3>TODO</h3> <ul></ul> <!-- <TodoList> --> <form> <input value="" /> <button>Add #1</button> </form> </div>
它被字符串化并通过innerHTML添加到mountNode内部
然后,假设您要在输入中输入一些文本,然后
TodoApp::onChange
将要被呼叫,这将要被呼叫
TodoApp::setState
然后依次调用
TodoApp::render
再次并生成更新的DOM
<div> <h3>TODO</h3> <ul></ul> <!-- <TodoList> --> <form> <input value="sometext" /> <button>Add #1</button> </form> </div>
此时发生的事情是,React将在上一个DOM和当前DOM之间进行区分。
<div> <input - value="" + value="sometext"
只有输入的值改变了,所以React将只更新真实DOM中的这个特定属性。